Una inmersión en React y el uso de Three.jsreact-three-fiber

1. Empezar conreact-three-fiber #
2. Cómo utilizarreact-three-fiber #
   1. MNP #
   2. HILO #
3. Creación de un proyecto de animación y modelo de dados Ludo 3D de React #
4. Construyendo el Boxcomponente #
5. Representación de caja de dados Ludo 3D #
6. Conclusión #
   1. Recursos Relacionados #

react-three-fiberes un potente renderizador Three.js que ayuda a renderizar modelos y animaciones 3D para React y sus aplicaciones nativas. En este tutorial, aprenderá cómo configurar y construir modelos 3D en una aplicación React.

Hoy, aprenderemos cómo configurar y usar react-three-fiberpara construir y mostrar animaciones y modelos 3D en aplicaciones React y React Native.

Este tutorial es para desarrolladores que desean aprender más sobre animaciones de modelos 3D en la web usando React y para cualquiera que haya tenido limitaciones con Three.js, como la incapacidad de crear lienzos, vincular eventos de usuario como clickeventos e iniciar un bucle de renderizado, react-three-fiberviene con estos métodos. . Construiremos un modelo 3D para comprender mejor cómo construir modelos 3D de Three.js usando react-three-fiber.

Empezar conreact-three-fiber #

Three.js es una biblioteca que facilita la creación de gráficos 3D en el navegador, utiliza un lienzo + WebGL para mostrar los modelos y animaciones 3D, puede obtener más información aquí .

reaccionar-tres-fibra es un renderizador de React para Three.js en la web y reaccionar-nativo, es un impulso a la velocidad a la que creas modelos y animaciones 3D con Three.js, algunos ejemplos de sitios con modelos y animaciones 3D se puede encontrar aquí. react-three-fiber reduce el tiempo dedicado a las animaciones debido a sus componentes reutilizables, eventos vinculantes y bucles de renderizado. Primero, echemos un vistazo a qué es Three.js.

react-three-fibernos permite construir componentes de threeJScódigo usando el estado, ganchos y accesorios de React, también viene con los siguientes elementos:

Cómo utilizarreact-three-fiber #

Para usar react-three-fiber, comience usando los siguientes comandos:

MNP #

npm i three react-three-fiber

HILO #

yarn add three react-three-fiber 

Nota : Para react-three-fiberque funcione, deberá instalar three(Three.js) como hicimos anteriormente.

Creación de un proyecto de animación y modelo de dados Ludo 3D de React #

Aquí vamos a construir un modelo de dados de ludo en 3D usando react-three-fibercomo lo tenemos en el video a continuación.

Construyendo el Boxcomponente #

El Boxcomponente contendrá la forma de nuestros dados de ludo, una imagen de un dado de ludo y un estado para mantenerlo siempre en rotación. Primero, importemos todos los paquetes que necesitamos para nuestro Boxcomponente a continuación.

import React, { useRef, useState, useMemo } from "react";import { Canvas, useFrame } from "react-three-fiber";import * as THREE from "three";import five from "./assets/five.png";

En el código anterior, estamos importando useRefy useState. useMemoUsaremos el useRefgancho para acceder a la malla de los dados y el useStategancho para verificar el estado activo de los dados de ludo. useMemoEl gancho se utilizará para devolver el número en los dados. A continuación, estamos importando Canvasy useFramedesde react-three-fiber, se canvasutiliza para dibujar los gráficos en el navegador, mientras que useFramepermite que los componentes se conecten al bucle de renderizado, lo que hace posible que un componente se renderice sobre el contenido de otro. A continuación, importamos el threepaquete y luego importamos una imagen estática de un dado de parchís.

Lo siguiente que debemos hacer es escribir lógica para nuestro Boxcomponente. Primero, comenzaremos construyendo un componente funcional y agregaremos estado a nuestro componente; hagámoslo a continuación.

const Box = (props) = { const mesh = useRef(); const [active, setActive] = useState(false); useFrame(() = { mesh.current.rotation.x = mesh.current.rotation.y += 0.01; }); const texture = useMemo(() = new THREE.TextureLoader().load(five), []); return ( Box / );}

En el código anterior, estamos creando un Boxcomponente con accesorios, luego creamos una referencia llamada meshusando el useRefgancho, hicimos esto para que siempre podamos devolver la misma malla cada vez. Tramites en Ecuador

Una malla es un elemento visual en una escena, es un objeto 3D que forma un polígono triangular, generalmente se construye usando una Geometría, que se usa para definir la forma del modelo y un Material que define la apariencia del modelo, puedes Obtenga más información sobre una malla aquí . También puede obtener más información sobre el useRefgancho aquí .

Después de inicializar a mesh, necesitamos inicializar un estado para nuestra aplicación usando el useStategancho, aquí configuramos el estado activo y suspendido de la aplicación en falso.

A continuación, usamos el useFramegancho para react-three-fiberrotar la malla (dados ludo), usando el siguiente código

mesh.current.rotation.x = mesh.current.rotation.y += 0.01;

Aquí, estamos rotando la posición actual de la malla cada 0,01 segundos, esto se hace para darle a la rotación una buena animación.

const texture = useMemo(() = new THREE.TextureLoader().load(five), []);

En el código anterior, estamos creando una constante llamada texturey pasando un useMemogancho de reacción como función para cargar una nueva tirada de dados, aquí para useMemomemorizar la imagen del dado y su número. Puedes aprender sobre el useMemoanzuelo aquí.

A continuación, queremos representar el Boxcomponente en el navegador y agregar nuestros eventos, lo hacemos a continuación

const Box = (props) = {return ( mesh {...props} ref={mesh} scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]} onClick={(e) = setActive(!active)} boxBufferGeometry args={[1, 1, 1]} / meshBasicMaterial attach="material" transparent side={THREE.DoubleSide} primitive attach="map" object={texture} / /meshBasicMaterial /mesh );}

En el código anterior, devolvemos nuestro Boxcomponente y lo envolvemos. Pasamos meshtodas las propiedades del Boxcomponente usando el operador de extensión y luego hacemos referencia a la malla usando el useRefgancho. A continuación, usamos la scalepropiedad de Three.js para establecer el tamaño del cuadro de dados cuando está activo en 2 y 1,5 cuando no lo está. Por último, pero no menos importante, agregamos un onClickevento para configurar statesi activeno está configurado de forma predeterminada.

boxBufferGeometry args={[1, 1, 1]} /

Para renderizar el cuadro de dados, renderizamos el boxBufferGeometrycomponente de Three.js, que boxBufferGeometrynos ayuda a dibujar líneas y puntos como cuadros, usamos el argsargumento para pasar constructores como el tamaño de la geometría del cuadro.

meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}

El meshBasicMaterialde Three.js, se utiliza para dibujar geometrías de forma sencilla. Aquí pasamos el attachatributo y le pasamos THREE.DoubleSideaccesorios al sideatributo. Define THREE.DoubleSidelos lados o espacios que deben representarse react-three-fiber.

primitive attach="map" object={texture} /

El primitivecomponente de Three.js se utiliza para dibujar gráficos 3D. Adjuntamos la propiedad del mapa para mantener la forma original de los dados de ludo. A continuación, renderizaremos nuestro Boxcomponente en el App.jsarchivo y completaremos nuestra caja de dados de ludo 3D. Su componente debería verse similar a la imagen a continuación.

Representación de caja de dados Ludo 3D #

En esta sección, vamos a renderizar nuestro Boxcomponente App.jsy completaremos nuestro cuadro de ludo 3D. Para hacerlo primero, creemos un Appcomponente y lo envolveremos con una Canvasetiqueta, esto es para renderizar nuestros modelos 3D, hagámoslo a continuación.

const App = () = { return ( Canvas /Canvas );}export default App;

A continuación vamos a agregar una luz a las cajas, react-three-fibernos proporciona tres componentes para iluminar nuestros modelos, son los siguientes

• ambientLight
  Esto se usa para iluminar todos los objetos en una escena o modelo por igual, acepta accesorios como la intensidad de la luz, esto iluminará el cuerpo del dado del parchís.
• spotLight
  Esta luz se emite desde una única dirección y aumenta a medida que aumenta el tamaño del objeto, esto iluminará las puntas del dado del ludo.
• pointLight
  Esto funciona similar a la luz de una bombilla, la luz se emite desde un solo punto hacia todas las direcciones, esto será necesario para el estado activo de nuestra aplicación.

Implementemos lo anterior en nuestra aplicación a continuación.

const App = () = { return ( Canvas ambientLight intensity={0.5} / spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} / pointLight position={[-10, -10, -10]} / /Canvas );}export default App;

En el código anterior, importamos el ambientLightcomponente react-three-fibery le agregamos una intensidad de 0.5, luego agregamos una posición y un ángulo a nuestro spotLightcomponente pointLight. El paso final de nuestra aplicación es renderizar nuestro componente de caja y agregar una posición a las cajas de dados de ludo, lo haríamos en el siguiente código.

Box position={[-1.2, 0, 0]} /Box position={[2.5, 0, 0]} /

Cuando termines, tus dados de ludo 3D deberían verse similares a la imagen a continuación:

Hay una demostración funcional disponible en CodeSandbox.

Conclusión #

react-three-fiberha facilitado la creación de animaciones y modelos 3D para las aplicaciones React y React Native. Al construir nuestra caja de dados de ludo 3D, aprendimos los conceptos básicos de Three.js junto con sus componentes y beneficios, react-three-fiberademás de cómo usarlo.

Puede llevar esto más allá creando modelos y animaciones 3D en sus aplicaciones React y Native utilizándolos react-three-fiberpor su cuenta. ¡Me encantaría ver qué cosas nuevas se te ocurren!

Puede leer más en Three.js y react-three-fiberen las referencias a continuación.

Recursos Relacionados #

• Documentación de Three.js
• Fundamentos de Three.js
• Repositorio GitHub React-Three-fiber de Poimandres
• documentación de reacción de tres fibras
• Documentación oficial de React Hooks (useState, useMemo, etc.)

(ks, ra, il)Explora más en

• Aplicaciones
• Reaccionar
• javascript

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Una inmersión en React y el uso de Three.jsreact-three-fiber

Empezar conreact-three-fiber #Cómo utilizarreact-three-fiber #Creación de un proyecto de animación y modelo de dados Ludo 3D de React #Construyendo el Boxco

programar

es

https://aprendeprogramando.es/static/images/programar-una-inmersion-en-react-y-el-uso-de-three-1071-0.jpg

2025-01-15