Cómo renderizar un modelo 3D en una aplicación React JS

Hola 👋,

Hoy en día, los navegadores se están volviendo más poderosos que en el pasado y ahora pueden generar diferentes animaciones complejas con facilidad. Es posible que haya visto muchos sitios web que renderizan modelos 3D sin problemas de rendimiento. En este artículo vamos a utilizar Three.js para renderizar un modelo de iPhone en una aplicación React.

Antes de comenzar este tutorial, déjame mostrarte un sitio web de demostración que representa este modelo. Aquí está el enlace de demostración: https://apple-iphone14.netlify.app/

Para este sitio web, he usado Three.JS junto con GSAP para agregar animaciones de desplazamiento suave. Si quieres aprender a hacer esta landing page responsive en 3D puedes ver el siguiente tutorial👇.

Rendericemos un impresionante modelo 3D en nuestra aplicación React.

Configuración e instalación

Para este tutorial usaremos la plantilla CRA (create-react-app). Abra la carpeta de su proyecto y use el siguiente comando para instalar la plantilla CRA.

 npx create-react-app 3d-model-in-reactjs

Puede nombrar su aplicación como desee para este tutorial. Lo he mantenido como "3d-mode-in-reactjs".

Aquí, npx es una utilidad que viene cuando instala npm. Nos ayuda a ejecutar cualquier paquete npm disponible en el registro npm sin instalar ese paquete.

Instalemos las bibliotecas necesarias para renderizar el modelo 3D. Cambie el directorio a "3d-mode-in-reactjs" usando el siguiente comando.

 cd 3d-mode-in-reactjs

Use el siguiente comando para instalar dos bibliotecas, @react-three/fiber y @react-three/drei .

 npm install @react-three/fiber @react-three/drei

• @react-three/fiber : es un renderizador React para threejs.

• @react-three/drei : es una colección de ayudantes útiles y abstracciones totalmente funcionales y listas para usar para @react-three/fiber.

  
  

Para este tutorial vamos a utilizar un modelo 3D de Apple iPhone 13 Pro Max. Puedes conseguir este modelo desde el siguiente enlace👇.

• "Apple iPhone 13 Pro Max" de DatSketch tiene licencia de Creative Commons Attribution . Antes de usar este modelo en cualquier proyecto, asegúrese de verificar su licencia.

  
  

Abra el enlace proporcionado y descargue el modelo en formato gltf . ¿Por qué GLTF? Según la documentación de threejs, glTF se centra en la entrega de activos en tiempo de ejecución, es compacto para transmitir y rápido para cargar.

Una vez que descargue el archivo, cree una carpeta llamada activos dentro de la carpeta src y extraiga todo el archivo del modelo en la carpeta llamada Modelo 3D .

Abra el archivo App.css y reemplace todo el código con el siguiente css.

 .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }

Ahora estamos listos para renderizar el modelo.

Comprendamos los conceptos básicos de renderizar un modelo 3D

Ahora hay 3 cosas que debe tener en cuenta al renderizar un modelo.

1. escena: aquí puede configurar todos los objetos, luces y cámaras.

2. cámara: Se utiliza para ver el modelo 3D a través de diferentes ángeles.

3. renderer: se utiliza para mostrar/renderizar una escena en un elemento HTML llamado canvas .

   
   

Si está utilizando directamente threejs en un proyecto de JavaScript simple, es posible que deba configurar todas estas cosas desde lo básico, pero en este tutorial estamos usando @react-three/fiber y @react-three/drei , por lo que no tenemos para hacer todas las cosas desde cero.

Abra el archivo App.js , limpie el código predeterminado e importemos el elemento canvas desde @react-three/fiber . Echa un vistazo al siguiente fragmento de código.

 import "./App.css"; import { Canvas } from "@react-three/fiber"; function App() { return ( <div className="App"> <Canvas>{/* Here we will render out model */}</Canvas> </div> ); } export default App;

Aquí, el componente Canvas configura la scene y la camera y representa la scene cada cuadro.

Ahora copie el siguiente código dentro del componente <Canvas /> .

 <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas>

Entendamos cada uno de estos elementos.

• <mesh> : Una malla es una clase que hereda de Object3d y representa objetos poligonales. En la malla, puede instanciar el objeto poligonal usando Geometry y Material .

• <boxGeometry /> : Es una clase de geometría para un cuboide rectangular con un 'ancho', 'alto' y 'profundidad' dados

• <meshStandardMaterial /> : Es un material estándar de base física.

  
  

Por ahora, es posible que vea un cuadrado negro en el medio que no parece un objeto 3D.

Agreguemos controles para que podamos mover el ángulo de la cámara alrededor de este objeto 3D. Importe <OrbitControls /> desde @react-three/drei usando la siguiente línea.

 import { OrbitControls } from "@react-three/drei";

Ahora represente este <OrbitControls /> dentro de los componentes <Canvas> y después de <mesh> . Actualice la página del servidor de desarrollo e intente obtener el objeto. Ahora es posible que pueda ver este cuadrado como un objeto 3D. Estos <OrbitControls /> permiten que la cámara orbite alrededor de un objetivo.

Ahora el objeto es totalmente negro porque no hay fuente de luz. Así que agreguemos luces en nuestra escena. Dentro del componente <Canvas /> agregue la siguiente línea antes de <mesh> .

 <ambientLight />

Aquí, este ambientLight ilumina globalmente todos los objetos en la escena por igual. Ahora puede ver el color blanquecino del material de malla. También podemos cambiar la intensidad de la luz ambiental a través de accesorios como se muestra en el siguiente código.

 <ambientLight intensity={1.25} />

También puede cambiar el color de un objeto 3D usando color prop en <meshStandardMaterial /> . consulta la siguiente línea.

 <meshStandardMaterial color="green"/>

Ahora el color del objeto 3D es verde. Hay muchas luces y elementos diferentes disponibles que puede usar para crear un modelo completo. Para eso, puede consultar la documentación de threejs . Eso es todo por lo básico, no rendericemos nuestro iPhone.

Conversión de modelo a componente JSX

Abra los archivos del modelo y verá diferentes archivos como texturas , scene.gltf , scene.bin , etc. Convertiremos scene.gltf en un componente JSX para que podamos renderizarlo fácilmente en nuestra aplicación React.

Ahora, para convertir cualquier archivo GLTF a un componente JSX, usaremos una herramienta de línea de comando simple llamada gltfjsx . Según la documentación, gltfjsx es una pequeña herramienta de línea de comandos que convierte los activos GLTF en componentes JSX de tres fibras declarativos y reutilizables.

Ahora abra el terminal/cmd y vaya al directorio donde almacenó todos los archivos del modelo, en mi caso está dentro de la carpeta 3D-Model que se encuentra en la carpeta de activos . Así que usaré el siguiente comando para cambiar el directorio.

 cd src/assets/3D-Model

Ahora usa el siguiente comando.

 npx gltfjsx scene.gltf

Este comando tardará unos segundos y devolverá el archivo Scene.js , que es el componente JSX.

NOTA: Este comando gltfjsx puede generar un error si está utilizando la última versión de NodeJS. Actualmente estoy usando 17.2.0 y este comando funciona bien. Si se encuentra con algún error, baje la versión de NodeJs e intente este código nuevamente. Puede usar herramientas como nvm para usar diferentes versiones de NodeJs.

¡Importante!

Antes de renderizar el modelo del archivo Scene.js , tenemos que copiar los archivos del modelo en el directorio público , ya que si observa el archivo Scene.js , utiliza el useGLTF que carga nodos y materiales del archivo /scene.gltf . Así que copie texturas , scene.bin y scene.gltf en la carpeta pública de su proyecto.

Renderizar el modelo 3D

Abra el archivo App.js y elimine <mesh> . Importemos el Model del archivo Scene.js .

 import Model from "./assets/3D-Model/Scene";

Ahora represente el <Model /> dentro del componente <Canvas /> , antes de <OrbitControls /> .

 <Canvas> <ambientLight intensity={1.25} /> <Model /> <OrbitControls /> </Canvas>

Actualizar la página de salida. Ahora debería poder ver la representación del iPhone en la pantalla, puede acercar y alejar y mover el modelo. Vamos a aumentar la vista del modelo. Puede acceder directamente a la cámara desde el elemento del lienzo. Agregue la cámara dentro del lienzo como el siguiente fragmento de código.

<Canvas camera={{fov: 18}}>

Aquí, el fov representa el "campo de visión". Después de configurar el fov actualice la página para ver el resultado. Por ahora, hemos establecido el fov en 18. Puede probar diferentes números y ver el resultado.

Por ahora no hay reflexión sobre el modelo. Para agregar reflejos en el modelo, debe establecer imágenes alrededor de este modelo para que estas imágenes puedan reflejarse en la superficie de este modelo. En lugar de agregar estas imágenes, usemos el componente <Environment /> de la biblioteca @react-three/drei .

Importemos el <Environment /> ,

 import { Environment, OrbitControls } from "@react-three/drei";

Ahora, después del modelo, agreguemos el entorno.

 <Environment preset="sunset" />

Aquí, el ajuste preestablecido establece diferentes tipos de entorno que rodean al modelo. Por ahora lo hemos puesto en "puesta de sol". Puede consultar los diferentes ajustes preestablecidos disponibles desde aquí .

Después de agregar este entorno, debería ver el hermoso reflejo en nuestro iPhone. Rendericemos el modelo dentro del componente Suspense de React para que pueda cargarse de forma asíncrona.

 <Suspense fallback={null}> <Model /> </Suspense>

Aquí está el código final.

https://gist.github.com/codebucks27/6defde4db7e290d95d7ff1ae39078a06

Pensamientos finales

Ese es el final de este tutorial. Puede usar https://docs.pmnd.rs/ para leer la documentación de @react-three/fiber y @react-three/drei y probar diferentes elementos. Si desea crear un sitio web completo utilizando el modelo 3D y animar sus colores, puede seguir el video tutorial que se proporciona al comienzo de esta lección.

Si te gusta este tutorial, deberías revisar los increíbles tutoriales que tengo en mi canal de YouTube llamado CodeBucks . Puedes consultarlo desde aquí .

También te pueden gustar estas plantillas de sitios web:

• Una hermosa plantilla de portafolio en ReactJS => aquí

• Página de destino de la colección NFT en ReactJS => [aquí] (- Una hermosa plantilla de cartera en ReactJS => aquí )

  
  

Gracias por leer este tutorial. ¡Qué tengas un lindo día!