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   para renderizar un modelo de iPhone en una aplicación React. Three.js  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👇.   https://youtu.be/cT160dOzpGY  Rendericemos un impresionante modelo 3D en nuestra aplicación React.  Configuración e instalación  Para este tutorial usaremos la plantilla   (create-react-app). Abra la carpeta de su proyecto y use el siguiente comando para instalar la plantilla CRA. 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,   y   . @react-three/fiber @react-three/drei   npm install @react-three/fiber @react-three/drei    : es un renderizador React para threejs. @react-three/fiber    : es una colección de ayudantes útiles y abstracciones totalmente funcionales y listas para usar para @react-three/fiber. @react-three/drei  Para este tutorial vamos a utilizar un modelo 3D de Apple iPhone 13 Pro Max. Puedes conseguir este modelo desde el siguiente enlace👇.    de DatSketch tiene licencia de   . Antes de usar este modelo en cualquier proyecto, asegúrese de verificar su licencia. "Apple iPhone 13 Pro Max" Creative Commons Attribution  Abra el enlace proporcionado y descargue el modelo en formato   . ¿Por qué GLTF? Según la   de threejs,  gltf documentación 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   dentro de la carpeta   y extraiga todo el archivo del modelo en la carpeta llamada   . activos src Modelo 3D  Abra el archivo   y reemplace todo el código con el siguiente css. App.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.  escena: aquí puede configurar todos los objetos, luces y cámaras.  cámara: Se utiliza para ver el modelo 3D a través de diferentes ángeles.  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   y   , por lo que no tenemos para hacer todas las cosas desde cero. @react-three/fiber @react-three/drei  Abra el archivo   , limpie el código predeterminado e importemos el elemento   desde   . Echa un vistazo al siguiente fragmento de código. App.js canvas @react-three/fiber   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   configura la   y la   y representa la   cada cuadro. Canvas scene camera scene  Ahora copie el siguiente código dentro del componente   . <Canvas />   <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas>  Entendamos cada uno de estos elementos.    : Una   es una clase que hereda de Object3d y representa objetos poligonales. En la malla, puede instanciar el objeto poligonal usando   y   . <mesh> malla Geometry Material    : Es una clase de geometría para un cuboide rectangular con un 'ancho', 'alto' y 'profundidad' dados <boxGeometry />    : Es un material estándar de base física. <meshStandardMaterial />  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   desde   usando la siguiente línea. <OrbitControls /> @react-three/drei   import { OrbitControls } from "@react-three/drei";  Ahora represente este   dentro de los componentes   y después de   . 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   permiten que la cámara orbite alrededor de un objetivo. <OrbitControls /> <Canvas> <mesh> <OrbitControls />  Ahora el objeto es totalmente negro porque no hay fuente de luz. Así que agreguemos luces en nuestra escena. Dentro del componente   agregue la siguiente línea antes de   . <Canvas /> <mesh>   <ambientLight />  Aquí, este   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   <ambientLight intensity={1.25} />  También puede cambiar el color de un objeto 3D usando   prop en   . consulta la siguiente línea. color <meshStandardMaterial />   <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   . Eso es todo por lo básico, no rendericemos nuestro iPhone. threejs  Conversión de modelo a componente JSX  Abra los archivos del modelo y verá diferentes archivos como   ,   ,   , etc. Convertiremos   en un componente JSX para que podamos renderizarlo fácilmente en nuestra aplicación React. texturas scene.gltf scene.bin scene.gltf  Ahora, para convertir cualquier archivo GLTF a un componente JSX, usaremos una herramienta de línea de comando simple llamada   . Según la documentación,   es una pequeña herramienta de línea de comandos que convierte los activos GLTF en componentes JSX de tres fibras declarativos y reutilizables. gltfjsx gltfjsx  Ahora abra el terminal/cmd y vaya al directorio donde almacenó todos los archivos del modelo, en mi caso está dentro de la carpeta   que se encuentra en la carpeta de   . Así que usaré el siguiente comando para cambiar el directorio. 3D-Model activos   cd src/assets/3D-Model  Ahora usa el siguiente comando.   npx gltfjsx scene.gltf  Este comando tardará unos segundos y devolverá el archivo   , que es el componente JSX. Scene.js  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   para usar diferentes versiones de NodeJs. nvm  ¡Importante!  Antes de renderizar el modelo del archivo   , tenemos que copiar los archivos del modelo en el directorio   , ya que si observa el archivo   , utiliza el   que carga nodos y materiales del archivo   . Así que copie   ,   y   en la carpeta   de su proyecto. Scene.js público Scene.js useGLTF /scene.gltf texturas scene.bin scene.gltf pública  Renderizar el modelo 3D  Abra el archivo   y elimine   . Importemos el   del archivo   . App.js <mesh> Model Scene.js   import Model from "./assets/3D-Model/Scene";  Ahora represente el   dentro del componente   , antes de   . <Model /> <Canvas /> <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   representa el "campo de visión". Después de configurar el   actualice la página para ver el resultado. Por ahora, hemos establecido el   en 18. Puede probar diferentes números y ver el resultado. fov fov fov  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     de la biblioteca   . componente <Environment /> @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   de React para que pueda cargarse de forma asíncrona. Suspense   <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   para leer la documentación de   y   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. https://docs.pmnd.rs/ @react-three/fiber @react-three/drei  Si te gusta este tutorial, deberías revisar los increíbles tutoriales que tengo en mi canal de YouTube llamado   . Puedes consultarlo desde   . CodeBucks 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!  También publicado   . aquí

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Polygon

Apple

Target

YouTube

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps