Cómo renderizar objetos 3D en una aplicación React

La introducción del renderizado 3D ha transformado la interacción del usuario con las tecnologías de Internet. Para empezar, las aplicaciones web se han vuelto más inmersivas y brindan una experiencia atractiva e interactiva a través del navegador web.

Esta tecnología ya ha sido adoptada con entusiasmo por los campos de juegos y realidad virtual/aumentada. Ofrece una forma realista e inmersiva de interactuar con elementos virtuales.

Descubra cómo renderizar objetos 3D en una aplicación React.

Los fundamentos del modelado y la programación 3D

Antes de comenzar con la renderización 3D, hay algunos puntos que debe tener en cuenta:

• Los objetos 3D contienen puntos individuales, o vértices, que definen su estructura en tres dimensiones. Unir estos puntos crea caras que forman la forma del objeto en la pantalla.
• Los navegadores modernos tienen la capacidad integrada de renderizar 3D usando tecnologías como WebGL. Lo hacen utilizando el poder de la unidad de procesamiento gráfico en su máquina para renderizar modelos y escenas 3D rápidamente.
  instagram viewer
• Cualquier objeto 3D que represente su navegador consta de tres componentes principales. Estos son la escena, la cámara y el renderizador, y todos juegan un papel crucial. La escena proporciona la plataforma base para configurar todos los elementos 3D, incluidas las luces y las cámaras. La cámara le permite ver el objeto 3D desde varios ángulos. Por último, el renderizador monta y muestra la escena sobre un elemento HTML de lienzo.

Representación 3D con Three.js y React Three Fiber

tres.js es una biblioteca de JavaScript que puede usar para representar objetos 3D en un navegador web. Usando sus componentes integrados, puede crear y renderizar fácilmente objetos 3D en su navegador junto con otras características de su aplicación React.

El paquete react-three-fiber funciona sobre Three.js. Simplifica el proceso de uso de componentes Three.js para crear y renderizar objetos 3D en el navegador. Curiosamente, también proporciona Ganchos de reacción que son útiles al crear objetos 3D en React.

Representación de objetos 3D en una aplicación React

Siga los pasos a continuación para representar una forma 3D simple en su navegador, así como un modelo 3D creado por Blender. Si no está familiarizado con Blender, aprender a empezar como un principiante.

Crear una aplicación Reaccionar, inicie su terminal para ejecutar el siguiente comando e instale las dependencias requeridas:

npm instala tres @react-tres/fibra @react-tres/drei

Instale los paquetes Three.js, react-three-fiber y react-three-drei. La biblioteca react-three-drei funciona junto con react-three-fiber para crear escenas y objetos en 3D.

Renderizar una forma 3D

Puede representar una forma de caja 3D simple en un navegador con muy poco código. Abre el src/aplicación.js archivo, elimine todo el código estándar de React y agregue lo siguiente:

importar Reaccionar de"reaccionar";
importar {Lienzo} de"@react-tres/fibra";
importar {OrbitControls} de"@react-tres/drei";
funciónCaja() {
devolver (
<malla>
<boxBufferGeometryadjuntar ="geometría" />
<mallaLambertMaterialadjuntar="material"color="Rosa caliente" />
malla>
 )
}
exportarpor defectofunciónaplicación() {
devolver (
<divisiónnombre de la clase="Aplicación">
<divisiónnombre de la clase="Encabezado de la aplicación">
<Lienzo>
<OrbitControls />
<luz ambientalintensidad ={0.5} />
<destacarposición={[10,15,10]} ángulo={0.3} />
<Caja />
Lienzo>
división>
división>
 );
}

Este código hace lo siguiente:

• El Caja El componente utiliza los componentes mesh, boxBufferGeometry y meshLambertMaterial de react-three-fiber para renderizar un cuadro 3D. Estos tres componentes trabajan de la mano para crear la forma de la caja.
• El componente boxBufferGeometry crea el cuadro y este código establece la propiedad de color del componente meshLambertMaterial en rosa fuerte.
• A continuación, representa el elemento Canvas que alberga el componente de caja con luz ambiental, un foco y el conjunto de propiedades del componente Controles de órbita.
• La propiedad del componente de luz ambiental agrega una luz suave al lienzo. El componente spotLight agrega una luz enfocada desde una posición específica con un ángulo de 0.3. Por último, el componente OrbitControls le permite controlar la cámara alrededor del objeto 3D.

Importe y renderice el componente app.js en el archivo index.js y active un servidor de desarrollo para ver los resultados en su navegador en http://localhost: 3000.

Renderizar un modelo 3D creado con Blender

Blender es una herramienta de código abierto utilizada por creativos en diferentes campos para crear modelos 3D, efectos visuales y aplicaciones 3D interactivas. Puede usar Blender para crear modelos 3D para su aplicación web.

Para este tutorial, renderizará un modelo 3D de BMW por rendimiento SRT disponible en Sketchfab.

Para comenzar, descargue el modelo de Sketchfab en GLTF (formato de transmisión GL). Este formato facilita la representación de modelos 3D en el navegador. Una vez que se complete la descarga, abra la carpeta del modelo y mueva el archivo del modelo al directorio público dentro de su aplicación React.

Ahora, dirígete a tu archivo app.js y complétalo con el código a continuación.

• Importe los siguientes componentes:

  importar {useGLTF, Stage, PresentationControls} de"@react-tres/drei";

• Cree el componente del modelo y agregue el siguiente código:

  funciónModelo(accesorios){
  constante {escena} = useGLTF("/bmw.glb");
  devolver<primitivoobjeto={escena} {...accesorios} />
  }
  exportarpor defectofunciónaplicación() {
  devolver (
  <divisiónnombre de la clase="Aplicación">
  <divisiónnombre de la clase="Encabezado de la aplicación">
   dpr={[1,2]} 
   cámara de sombras={{fav: 45}}
   estilo={{"posición": "absoluto"}}
   >
   velocidad={1.5} 
  global zoom={0.5}
   polares={[-0.1, Matemáticas.PI / 4]}
   >
  <Escenarioambiente={nulo}>
  <Modeloescala={0.01} />
  Escenario>
  Controles de presentación>
  Lienzo>
  división>
  división>
   );
  }
  

• El enlace useGLTF de la biblioteca React-three-drei define una variable de escena y le asigna el valor del archivo de modelo ubicado en la ruta "/bmw.glb". Luego, el componente devuelve un objeto primitivo que establece la escena para el modelo 3D.
• El elemento Canvas representa los componentes principales que componen el modelo, con las propiedades especificadas, como la proporción de píxeles del dispositivo (DPR), las sombras, el ángulo de la cámara y el estilo.
• A continuación, especifique las propiedades del componente PresentationControls, como la velocidad y el zoom global. Estas propiedades definen cómo controlará el modelo en pantalla.
• Finalmente, configure el componente Stage que monta el modelo en la pantalla del navegador.

Activa el servidor de desarrollo para actualizar los cambios en tu aplicación. Debería ver el modelo representado en su navegador.

Representación de modelos 3D en su aplicación web

La representación de modelos 3D en sus aplicaciones web puede ofrecer varios beneficios, como mejorar la experiencia del usuario al proporcionar una sensación 3D más realista e interactiva. Como resultado, los usuarios pueden interactuar mejor con el producto.

Sin embargo, renderizar elementos 3D puede tener sus desventajas, como afectar negativamente el rendimiento de la aplicación. Los modelos 3D requieren más recursos para renderizarse, lo que puede hacer que su aplicación se cargue más lentamente.