ModelViewer

Visor de modelos 3D con órbita e iluminación.

Código: RODD·CP·032
Familia: Componentes
Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/ModelViewer-TS-TW

Cuándo usarlo

Sustituyen a un componente estándar cuando la experiencia es parte del producto.

Props para personalizarlo

Prop	Tipo	Por defecto
url	string	-
width	number \| string	400
height	number \| string	400
modelXOffset	number	0
modelYOffset	number	0
defaultRotationX	number	-50
defaultRotationY	number	20
defaultZoom	number	0.5
minZoomDistance	number	0.5
maxZoomDistance	number	10
enableMouseParallax	boolean	true
enableManualRotation	boolean	true
enableHoverRotation	boolean	true
enableManualZoom	boolean	true
ambientIntensity	number	0.3
keyLightIntensity	number	1
fillLightIntensity	number	0.5
rimLightIntensity	number	0.8
environmentPreset	string	"forest"
autoFrame	boolean	false
fadeIn	boolean	false
autoRotate	boolean	false
autoRotateSpeed	number	0.35
showScreenshotButton	boolean	true
placeholderSrc	string	-
onModelLoaded	function	-

Otros efectos de componentes

PixelImage — Imagen que se revela píxel a píxel.
SpotlightCard — Tarjeta con foco de luz que sigue al cursor.
TiltedCard — Tarjeta 3D que se inclina hacia el puntero.
BorderGlow — Borde con brillo de malla degradada que sigue la dirección del cursor.
CardSwap — Pila de tarjetas que se intercambian solas.
CssBox — Caja 3D hecha solo con CSS que puedes rotar.