Model3D

The Model3D component renders a 3D model (with the model-viewer tag) for the Storefront API's Model3d object.

Example code

Props

Name Type Description
as? ReactNode A ReactNode element.
children? ReactNode A function that takes an object return by the useMoney hook and returns a ReactNode.
model Object<Model3DType, Model3DType, Pick<Image, Pick<Model3dSource> An object with the same fields as the GraphQL fragment.
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.
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

The Model3D component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.

GraphQL fragment

The following fragment is available as a string for your GraphQL query using Model3DFragment or Model3D.Fragment. Using this fragment ensures that you have all the data necessary for rendering the Model3D component.