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 atractivas y brindan una experiencia inmersiva 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.

Aprenda a 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 únicos, o vértices, que definen su estructura en tres dimensiones. La unión de estos puntos crea caras que conforman la forma del objeto en la pantalla.
• Los navegadores modernos tienen la capacidad integrada de renderizar 3D utilizando tecnologías como WebGL. Lo hacen mediante el uso de la potencia de la unidad de procesamiento de gráficos en su máquina para renderizar rápidamente modelos y escenas en 3D.
• Cualquier objeto 3D mostrado por el 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 básica 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. Finalmente, el renderizador monta y muestra la escena encima de un elemento HTML de lienzo.

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

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

El paquete react-three-fiber funciona en Three.js. Simplifique el proceso de uso de componentes Three.js para crear y renderizar objetos 3D en el navegador. Curiosamente, también proporciona ganchos de React personalizados 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 y un modelo 3D creado por Blender. Si es nuevo en Blender, aprenda cómo comenzar como principiante.

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

 npm install three @react-three/fiber @react-three/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 objetos y escenas 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 repetitivo de React y agregue lo siguiente:

 import React from "react";
import {Canvas} from "@react-three/fiber";
import {OrbitControls} from "@react-three/drei";
function Box() {
  return (
    <mesh>
      <boxBufferGeometry attach ="geometry" />
      <meshLambertMaterial attach="material" color="hotpink" />
    </mesh>
  )
}
export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas>
          <OrbitControls />
          <ambientLight intensity ={0.5} />
          <spotLight position={[10, 15,10]} angle={0.3} />
          <Box />
        </Canvas>
      </div>
    </div>
  );
} 

Este código hace lo siguiente:

• EL Caja El componente utiliza los componentes de malla de tres fibras, boxBufferGeometry y meshLambertMaterial para representar una caja 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 Orbit Controls.
• La propiedad del componente de luz ambiental agrega un brillo suave al lienzo. El componente spotLight agrega una luz enfocada desde una ubicación específica en un ángulo de 0.3. Finalmente, el componente OrbitControls le permite controlar la cámara alrededor del objeto 3D.

Importe y represente el componente app.js en el archivo index.js e inicie un servidor de desarrollo para mostrar los resultados en su navegador en http://localhost:3000.

Representación de un modelo 3D creado por 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 con el 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 de la plantilla y mueva el archivo de la plantilla al directorio público dentro de su aplicación React.

Ahora ve a tu archivo app.js y complétalo con el siguiente código.

• Importe los siguientes componentes:

   import {useGLTF, Stage, PresentationControls} from "@react-three/drei"; 

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

   function Model(props){
    const {scene} = useGLTF("/bmw.glb");
    return <primitive object={scene} {...props} /> 
  }
  export default function App() {
    return (
      <div className="App">
        <div className="App-header">
          <Canvas 
            dpr={[1,2]} 
            shadows camera={{fav: 45}}
            style={{"position": "absolute"}}
          >
            <PresentationControls 
              speed={1.5} 
              global zoom={0.5}
              polar={[-0.1, Math.PI / 4]}
            >
              <Stage environment={null}>
                <Model scale={0.01} />
              </Stage>
            </PresentationControls>
          </Canvas>
        </div> 
      </div>
    );
  }
   

• El gancho useGLTF de la biblioteca React-three-drei define una variable de escena y le asigna el valor del archivo modelo ubicado en la ruta “/bmw.glb”. Luego, el componente devuelve un objeto primitivo que prepara el escenario para el modelo 3D.
• El elemento Canvas representa los componentes principales que componen el modelo, con propiedades específicas, como la proporción de píxeles del dispositivo (DPR), las sombras, el ángulo de la cámara y el estilo.
• Luego, especifica 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.

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

Renderizació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, la representación de elementos 3D puede tener sus inconvenientes, como un impacto negativo en el rendimiento de la aplicación. Los modelos 3D requieren más recursos para renderizarse, lo que puede hacer que la aplicación se cargue más lentamente.