ModelViewer
The ModelViewer component renders a 3D model (with the model-viewer tag) for
the Storefront API's Model3d object.
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. |
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.
Storefront API data
Anchor link to section titled "Storefront API data"The data prop is an object with fields that correspond to the Storefront API's Model3D object: