Tiny Online Tools
Cuatro formas de poner un modelo en una página, todas completas
Incrustar un modelo 3D es una de esas tareas en las que el código de ejemplo siempre está casi bien. El fragmento de la documentación se olvida del manejador de redimensionado. La entrada del blog omite controls.update(), así que la amortiguación no hace nada y nadie avisa. El ejemplo de React se salta el límite de Suspense y falla en el primer renderizado. Este generador emite el código entero, con los ajustes que realmente has elegido ya integrados.
<model-viewer>
El componente web de Google es el camino más corto entre no tener nada y tener un visor funcionando: una etiqueta <script type="module"> y un elemento personalizado. Se encarga por su cuenta de los controles de cámara, la rotación automática, la RA tanto en Android como en iOS, la iluminación basada en imagen y una imagen de póster. Si quieres un modelo en una página de marketing esta misma tarde, usa este.
La etiqueta generada incluye touch-action="pan-y", que es fácil pasar por alto y marca la diferencia entre un visor que se siente nativo en el móvil y otro que pelea con el desplazamiento de la página.
Three.js
Para una escena que controlas tú. El fragmento de código importa desde three/addons/* — una exportación de subruta real del paquete de three, así que funciona con cualquier empaquetador —, configura el renderizador con tone mapping ACES y tu exposición, construye un entorno de estudio neutro mediante PMREMGenerator y RoomEnvironment, añade OrbitControls con amortiguación, carga el modelo con GLTFLoader, gestiona el redimensionado y se ejecuta sobre renderer.setAnimationLoop() en lugar de un requestAnimationFrame pelado, de modo que el mismo bucle siga funcionando si la página entra más adelante en WebXR.
React Three Fiber
La versión de React: @react-three/fiber para el lienzo y @react-three/drei para useGLTF, OrbitControls, Environment y ContactShadows. useGLTF.preload() se llama fuera del componente para que la descarga empiece antes de que React renderice, y el modelo vive dentro de un límite de Suspense con un fallback de progreso real alimentado por useProgress.
Página HTML independiente
Un index.html completo: doctype, meta viewport, estilos, script de CDN y visor. Guárdalo, súbelo a cualquier alojamiento estático y listo. No es lo mismo que el primer fragmento: aquel es un trozo para una página que ya existe, este es un archivo entero.
Distancia de cámara
Adivinar la distancia de cámara es la parte más molesta de incrustar un modelo, porque depende de la escala real del modelo. Carga tu archivo en local y la herramienta mide su esfera envolvente y calcula la distancia a la que llena un frustum de 45° con un pequeño margen. El archivo nunca se sube ni aparece nunca en el código generado: solo lo hace el número.