I am using model-viewer for displaying 3D models in AR on iOS and Android, but I'm facing an issue where the AR element appears huge and is not positioned in front of the user. Instead, it moves with the user as they walk or change positions.

For reference, you can see the issue on my website (click the bottom button "הצג הדמייה בחלל שלי").

Here’s my current implementation in React:

<Box
  ref={modelViewerRef}
  as="model-viewer"
  ar-modes="webxr scene-viewer quick-look"
  src={convertedLinks?.[selectedFrame]?.glb || ""}
  ios-src={convertedLinks?.[selectedFrame]?.usdz || ""}
  alt={`מודל מסגרת ${selectedFrame}`}
  ar
  auto-rotate
  camera-controls
  disable-zoom={false}
  interaction-prompt="none"
  shadow-intensity="1"
  environment-image="neutral"
  ar-placement="wall"
  camera-target="0m 1m 0m"
  style={{
    width: isMobile ? "90%" : "60%",
    height: isMobile ? "70vh" : "80vh",
    borderRadius: "20px",
    boxShadow: "0 15px 30px rgba(0, 0, 0, 0.2)",
    background: "#ffffff",
    transition: "all 0.5s ease",
  }}
></Box>

Is this a problem with how the GLB/USDZ model itself is created or exported? Or is it an issue with my model-viewer configuration?

Any guidance or suggestions would be appreciated!

I’ve tried adjusting the scale using properties like scale="0.1 0.1 0.1" and tweaking the camera settings, but nothing seems to resolve the issue.