ModelViewer
The ModelViewer component renders a 3D model for the Storefront API's Model3d object.
The component outputs a <model-viewer> tag. You can customize this component using passthrough props.
Example code
Anchor link to section titled "Example code"
| Name | Type | Description |
|---|---|---|
| children? | ReactNode |
Any ReactNode elements. |
| data | PartialDeep<Model3d> |
An object with fields that correspond to the Storefront API's Model3D object. |
| loading? | "auto" | "lazy" | "eager" |
A string of either auto, lazy, or eager to indicate the conditions for preloading. Refer to loading in the <model-viewer> documentation. |
| poster? | string |
A URL to display an image instead of the model. This is useful for showing the user something before a model is loaded and ready to render. If no URL is provided, then Model3d.previewImage is used. Refer to poster in the |
| reveal? | "auto" | "interaction" | "manual" |
A string of either auto, interaction, or manual to indicate when the model should be revealed. Refer to reveal in the <model-viewer> documentation. |
| ar? | boolean |
A boolean to enable an AR experience. Refer to ar in the <model-viewer> documentation. |
| arModes? | "webxr" | "scene-viewer" | "quick-look" |
A prioritized list of webxr, scene-viewer, and/or quick-look to indicate the types of AR experiences to enable. Refer to ar-modes in the <model-viewer> documentation. |
| arScale? | "auto" | "fixed" |
A string of auto or fixed to control the scaling behaviour. Refer to ar-scale in the <model-viewer> documentation. |
| arPlacement? | "floor" | "wall" |
A styring of either floor or wall to indicate where to place the object in AR. Refer to ar-placement in the <model-viewer> documentation. |
| iosSrc? | string |
The url to a USDZ model which will be used on supported iOS 12+ devices via AR Quick Look on Safari. Refer to ios-source in the <model-viewer> documentation. |
| cameraControls? | boolean |
A boolean to enable camera controls. Refer to attributes in the <model-viewer> documentation. |
| touchAction? | "pan-x" | "pan-y" | "none" |
A string of pan-x, pan-y, or none. Refer to touch-action in the <model-viewer> documentation. |
| disableZoom? | boolean |
A boolean to disable zoom. Refer to disable-zoom in the <model-viewer> documentation. |
| orbitSensitivity? | number |
A number to adjust the speed of theta and phi orbit interactions. Refer to orbit-sensitivity in the <model-viewer> documentation. |
| autoRotate? | boolean |
A boolean to enable auto rotate. Refer to auto-rotate in the <model-viewer> documentation. |
| autoRotateDelay? | number |
A number in milliseconds to specify the delay before auto rotation begins. Refer to auto-rotate-delay in the <model-viewer> documentation. |
| rotationPerSecond? | string |
The speed of auto rotation. Refer to rotation-per-second in the <model-viewer> documentation. |
| interactionPolicy? | "allow-when-focused" | "always-allow" |
A string of either allow-when-focused or always-allow to indicate whether the viewer requires focus before interacting with it. Refer to interaction-policy in the <model-viewer> documentation. |
| interactionPrompt? | "auto" | "when-focused" | "none" |
A string of either 'auto', 'when-focused', or 'none' indicating the conditions under which the visual and audible interaction prompt will display. Refer to interaction-prompts in the <model-viewer> documentation. |
| interactionPromptStyle? | "wiggle" | "basic" |
A string of either wiggle or basic indicating the presentation style of the interaction-prompt when it is raised. Refer to interaction-prompt-style in the <model-viewer> documentation. |
| interactionPromptThreshold? | number |
A number to indicate how long the model viewer should wait before prompting the user visually for interaction. Refer to interaction-prompt-threshold in the <model-viewer> documentation. |
| cameraOrbit? | string |
A string of the starting orbital position of the camera. Refer to camera-orbit in the <model-viewer> documentation. |
| cameraTarget? | string |
A string of the point the camera orbits around. Refer to camera-target in the <model-viewer> documentation. |
| fieldOfView? | string |
A string of the vertical field of view of the camera. Refer to field-of-view in the <model-viewer> documentation. |
| maxCameraOrbit? | string |
A string of the maxiumum orbital values of the camera. Refer to max-camera-orbit in the <model-viewer> documentation. |
| minCameraOrbit? | string |
A string of the minimum orbital values of the camera. Refer to min-camera-orbit in the <model-viewer> documentation. |
| maxFieldOfView? | number |
A number indicating the max field of view of the camera. Refer to max-field-of-view in the <model-viewer> documentation. |
| minFieldOfView? | number |
A number indicating the min field of view of the camera. Refer to min-field-of-view in the <model-viewer> documentation. |
| bounds? | "tight" | "legacy" |
A string of tight or legacy for calculating the model's bounding box. Refer to bounds in the <model-viewer> documentation. |
| interpolationDecay? | number |
A number indicating the rate of interpolation when the camera or model moves. Refer to interpolation-decay in the <model-viewer> documentation. |
| skyboxImage? | string |
A string for the background image of the scene. Refer to skybox-image in the <model-viewer> documentation. |
| environmentImage? | string |
A string to control the environmental reflection of the model. Refer to environment-image in the <model-viewer> documentation. |
| exposure? | number |
A number indicating the exposure of the model and the skybox. Refer to exposure in the <model-viewer> documentation. |
| shadowIntensity? | number |
A number for the opacity of the shadow. Refer to shadow-intensity in the <model-viewer> documentation. |
| shadowSoftness? | number |
A number for the bluriness of the shadow. Refer to shadow-softness in the <model-viewer> documentation. |
| animationName? | string |
A string of the animation to play by name. Refer to animation-name in the <model-viewer> documentation. |
| animationCrossfadeDuration? | string |
A string of the animation crossfade duration between the previous and next animations. Refer to animation-cross-fade-duration in the <model-viewer> documentation. |
| autoplay? | boolean |
A boolean to enable the model animations. Refer to autoplay in the <model-viewer> documentation. |
| variantName? | string |
A string to select a model variant by name. Refer to variant-name in the <model-viewer> documentation. |
| orientation? | string |
A string to rotate the model. Refer to orientation in the <model-viewer> documentation. |
| scale? | string |
A string to scale the model. Refer to scale in the <model-viewer> documentation. |
| onError? | (event: Event) => void |
The callback to invoke when the 'error' event is triggered. Refer to error in the <model-viewer> documentation. |
| onLoad? | (event: Event) => void |
The callback to invoke when the load event is triggered. Refer to load in the <model-viewer> documentation. |
| onPreload? | (event: Event) => void |
The callback to invoke when the 'preload' event is triggered. Refer to preload in the <model-viewer> documentation. |
| onModelVisibility? | (event: Event) => void |
The callback to invoke when the 'model-visibility' event is triggered. Refer to model-visibility in the <model-viewer> documentation. |
| onProgress? | (event: Event) => void |
The callback to invoke when the 'progress' event is triggered. Refer to progress in the <model-viewer> documentation. |
| onArStatus? | (event: Event) => void |
The callback to invoke when the 'ar-status' event is triggered. Refer to ar-status in the <model-viewer> documentation. |
| onArTracking? | (event: Event) => void |
The callback to invoke when the 'ar-tracking' event is triggered. Refer to ar-tracking in the <model-viewer> documentation. |
| onQuickLookButtonTapped? | (event: Event) => void |
The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to quick-look-button-tapped in the <model-viewer> documentation. |
| onCameraChange? | (event: Event) => void |
The callback to invoke when the 'camera-change' event is triggered. Refer to camera-change in the <model-viewer> documentation. |
| onEnvironmentChange? | (event: Event) => void |
The callback to invoke when the 'environment-change' event is triggered. Refer to environment-change in the <model-viewer> documentation. |
| onPlay? | (event: Event) => void |
The callback to invoke when the 'play' event is triggered. Refer to play in the <model-viewer> documentation. |
| onPause? | (event: Event) => void |
The callback to invoke when the 'pause' event is triggered. Refer to pause in the <model-viewer> documentation. |
| onSceneGraphReady? | (event: Event) => void |
The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to scene-graph-ready in the <model-viewer> documentation. |
Required fields
Anchor link to section titled "Required fields"The ModelViewer component requires the following fields from the Storefront API's
Model3d object:
Component type
Anchor link to section titled "Component type"The ModelViewer component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.