Model Viewer
Customize Model Viewer
Width400px
Height1000px
Model X Offset0
Model Y Offset0
Default Rotation X0°
Default Rotation Y0°
Default Zoom1
Auto Rotate Speed1
Ambient Intensity0.5
Key Light Intensity1
Fill Light Intensity0.5
Rim Light Intensity0.5
Props
| Property | Type | Default | Description |
|---|---|---|---|
| url | string | required | URL of the 3D model file (supports glb, gltf, fbx, obj). |
| width | number | string | 400 | Width of the viewer container. |
| height | number | string | 400 | Height of the viewer container. |
| modelXOffset | number | 0 | Horizontal offset of the model. |
| modelYOffset | number | 0 | Vertical offset of the model. |
| defaultRotationX | number | -50 | Default rotation angle on X axis. |
| defaultRotationY | number | 20 | Default rotation angle on Y axis. |
| defaultZoom | number | 0.5 | Default zoom level. |
| minZoomDistance | number | 0.5 | Minimum zoom distance. |
| maxZoomDistance | number | 10 | Maximum zoom distance. |
| enableMouseParallax | boolean | true | Enable mouse parallax effect. |
| enableManualRotation | boolean | true | Enable manual rotation with mouse/touch. |
| enableHoverRotation | boolean | true | Enable rotation on hover. |
| enableManualZoom | boolean | true | Enable manual zoom with mouse/touch. |
| ambientIntensity | number | 0.3 | Intensity of ambient lighting. |
| keyLightIntensity | number | 1 | Intensity of key lighting. |
| fillLightIntensity | number | 0.5 | Intensity of fill lighting. |
| rimLightIntensity | number | 0.8 | Intensity of rim lighting. |
| environmentPreset | string | "forest" | Environment preset (city, sunset, night, dawn, studio, apartment, forest, park, none). |
| autoFrame | boolean | false | Auto-frame the model to fit the view. |
| placeholderSrc | string | - | URL of placeholder image to show during loading. |
| showScreenshotButton | boolean | true | Show screenshot capture button. |
| fadeIn | boolean | false | Enable fade-in animation when model loads. |
| autoRotate | boolean | false | Enable automatic rotation. |
| autoRotateSpeed | number | 0.35 | Speed of automatic rotation. |
| onModelLoaded | () => void | - | Callback function when model is loaded. |
Dependencies
three@react-three/fiber@react-three/drei
Created with ❤️ by Cybershoora