React Three Fiber para visualizar un modelo 3D glTF

React Three Fiber es un wrapper de React para la librería Three.js, facilitando la integración de objetos 3D en aplicaciones React. Reivindica una velocidad y capacidades similares a las de Three.js directamente. En este artículo, te muestro mediante una aplicación de demostración cómo mostrar un modelo glTF en el navegador.

glTF

GlTF es un formato de archivo para escenas y modelos tridimensionales. Es un estándar abierto gestionado por el Grupo Khronos. GlTF existe en dos variantes, .gltf como formato de texto y .glb como formato binario. Muchas aplicaciones de software 3D pueden exportar directamente en glTF, por ejemplo Blender o Autodesk 3D Max.

React Three Fiber

React Three Fiber es básicamente una envoltura React alrededor de la biblioteca Three.js. Three.js es una popular librería de código abierto para crear y mostrar objetos 3D en el navegador. Así, aprovechando React Three Fiber puedes usar objetos 3D en tu aplicación React más fácilmente que yendo directamente a Three.js. Hace que Three.js esté disponible de forma idiomática para React. Afirma ser tan rápido como usar Three.js directamente. Además, ofrece tantas funcionalidades como Three.js.

Aplicación de ejemplo

Para demostrar cómo mostrar un modelo 3D glTF usando React Three Fiber primero crearemos una aplicación React Three Fiber usando una de las formas indicadas en la documentación de React Three Fiber bajo: https://docs.pmnd.rs/react-three-fiber/getting-started/installation

A continuación, descargamos un modelo de dominio público de Smithsonian here. Se trata de un modelo del módulo de mando del Apolo 11.

Tienes que llamar a una aplicación llamada gltfjsx que convierte el archivo .glb en un componente React, así: `

npx gltfjsx apollo_exterior-150k-4096.glb 

Copia el archivo .jsx resultante del componente React en tu aplicación React. En tu App.css tienes que adaptar el tamaño disponible así:

html, body { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
} 

Ahora modifica el App.tsx de tu aplicación para que muestre el módulo Apollo:

import { Suspense } from 'react'
import './App.css'
import { Canvas } from '@react-three/fiber'
import { Model } from './Apollo';
import { OrbitControls } from '@react-three/drei';

function App() {

  return (
    <>
    <Canvas>
      <ambientLight intensity={0.5} />
      <OrbitControls />
      <Suspense>
        <Model position={[0, -500, 0]} />
      </Suspense>
    </Canvas>
    </>
  )
}

export default App

En mi caso, he llamado al componente React Apollo y he usado el componente modelo dentro de un componente React Suspense. Todo se muestra en un canvas y también hay unas luces para que se pueda ver el modelo.

El componente OrbitControls gestiona la rotación del modelo con el ratón en el navegador. Si no lo has hecho, también necesitarás instalar la librería React @react-three/drei porque también es necesaria.

Inicia tu aplicación con npm run dev y si todo ha ido bien, deberías ver el modelo 3D de Apollo. Si no ves el modelo al principio, prueba a rotar el modelo en la ventana gráfica.

Debería verse así:

Casos de uso

Los casos de uso para esta aplicación serían, por ejemplo, sitios web de comercio electrónico en los que quieras integrar modelos 3D de productos en tu tienda.

Si el sitio de comercio electrónico está escrito en React, por ejemplo con Next.js, el uso de React Three Fiber con modelos glTF sería una gran solución. Puedes aprovechar los modelos 3D de una manera React.

También, por ejemplo, los museos que tienen sus sitios escritos en React y quieren mostrar algunos de sus artefactos en 3D se beneficiarían del uso de React Three Fiber. Estoy seguro de que se te ocurrirán más casos de uso. Escríbeme si has usado React Three Fiber en tu proyecto

Conclusión

React Three Fiber ofrece un camino fácil para empezar con 3D cuando ya tienes conocimientos de React. Aprovecha la potencia de Three.js y permite a los programadores integrar modelos 3D en sus sitios web. Este artículo sólo ha arañado la superficie, y hay mucho más por explorar.

Referencias

• Kronos glTF: https://www.khronos.org/gltf
• React Three Fiber: https://docs.pmnd.rs/react-three-fiber
• gltfjsx: https://github.com/pmndrs/gltfjsx
• Command Module Apollo 11 glTF from Smothsonian (CC0): https://3d.si.edu/object/3d/command-module-apollo-11:d8c6457e-4ebc-11ea-b77f-2e728ce88125

Foto de portada por Mehdi MeSSrro en Unsplash