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

Demasiado Largo; Para Leer

People Mentioned

Companies Mentioned

Coin Mentioned

CodeBucks

STORY’S CREDIBILITY

DYOR

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...