Skip to main content
Model3D(props: Model3DProps): Component;

type Model3DProps = {
    url: string;
    iOSURL?: string;
    description?: string;
    cameraControls: boolean;
    autoRotate: boolean;
};
​
url
string
required
URL to the 3D model file. Supports common formats like .glb, .gltf, and .usdz.
​
iOSURL
string
iOS-specific URL for the model, typically a .usdz file optimized for Apple platforms. When provided, iOS uses this URL while other platforms use url.
​
description
string
Accessibility description of the 3D model for screen readers.
​
cameraControls
boolean
required
Whether the user can zoom, pan, and rotate the camera to examine the model.
​
autoRotate
boolean
required
Whether the model automatically rotates for showcase purposes.

​
Support

​
Usage

​
Basic 3D model

Model3D({
    url: "https://example.com/models/chair.glb",
    cameraControls: true,
    autoRotate: false
})

​
Auto-rotating product showcase

Model3D({
    url: "https://example.com/models/shoe.glb",
    iOSURL: "https://example.com/models/shoe.usdz",
    description: "Running shoe 3D model",
    cameraControls: true,
    autoRotate: true
})
    .frame({ height: 400 })

​
Static display

Model3D({
    url: "https://example.com/models/logo.glb",
    cameraControls: false,
    autoRotate: true
})
    .frame({ width: 200, height: 200 })

​
Notes

  • .usdz format is recommended for iOS AR Quick Look integration.
  • .glb / .gltf formats provide good cross-platform compatibility.
  • Auto-rotate is useful for product showcases where user interaction is not required.

​
See Also

  • Image — image display
  • Video — video playback