El diseño 3D ahora está atrayendo mucha atención no solo en el desarrollo de juegos, sino también en el mundo de los sitios web e interfaces de próxima generación. ¿Alguna vez has pensado: "¡Quiero crear ese mundo encantador!"
Sin embargo, muchas personas probablemente encuentran que 3D es difícil. La realidad es que los métodos tradicionales de usar tres.js requieren directamente configuraciones complejas y código de escritura, lo cual es un poco difícil para principiantes.
Mientras tanto, React Three Fiber lo que le permite realizar de manera fácil e intuitivamente la representación 3D dentro del ecosistema React Además, mecanografiado permite un desarrollo más seguro y eficiente.
Sin embargo, todavía hay muy pocas explicaciones de que incluso los principiantes pueden aprender la combinación de React Three Fiber and TypeScript sin ningún esfuerzo.
En este artículo, explicaremos los conceptos básicos del desarrollo 3D ¡También presentamos ejemplos prácticos de la creación de fondos y animaciones de estilo de juego utilizando objetos estándar (geometría y materiales)
aquellos que son nuevos en el desarrollo 3D pueden leerlo con confianza, así que asegúrese de comenzar con él juntos.
¡Continuaremos creando lecciones y trabajos desde TypeScript X React Three Fiber en el futuro!
Haremos un anuncio en YouTube, así que suscríbase a nuestro canal de YouTube y espere notificaciones.
📺 Mira YouTube : puedes verlo desde este enlace
Si desea saber qué puede hacer React Three Fiber, ¡consulte lo siguiente!
¡Tenemos obras fáciles de usar disponibles!
- Traté de hacer que Bears caminara con React x tres.js!
- Intenté hacer que un viejo baile en React x tres.js!
- ¡Traté de mostrar un modelo 3D con React x tres.js!
- Hice un botón 3D que explota en React x tres.js!
- Reaccione tres fibra x drei x Introducción al mecanografiado! ¡Fondo 3D de estilo Poke Poke hecho con objetos estándar!
Introducción de elementos técnicos: herramientas y bibliotecas para usar en este proyecto
Puede cambiar las herramientas y las bibliotecas que usa a una que sea fácil de usar para usted, pero este proyecto explicará esta suposición.
Además, explicaremos cómo construir un entorno en " Construir un entorno 3D para TypeScript X React Three Fiber con VITE ", así que échale un vistazo.
- VCODE
-
- Un editor de código gratuito proporcionado por Microsoft.
- No necesita ser VScode, pero hay muchas extensiones, por lo que lo recomiendo.
- También se recomienda incluir Eslint o más bonito.
- Nodo.js
-
- Un tiempo de ejecución de JavaScript construido en el motor JavaScript V8 de Chrome .
- Puede ejecutar el código JavaScript fuera de su navegador.
- Esto se explica en base a la suposición de que ya está instalado, así que descargue desde
https://nodejs.org/ja *Recomendamos descargar la versión estable a largo plazo de LTS.
- Vite
-
- Una herramienta de compilación para proyectos web modernos. Se caracteriza por su rápida y liviana
- La "CRA (CRA-react-app)" utilizada anteriormente no figura en el sitio web oficial y se ha convertido en una tecnología antigua.
- De ahora en adelante, Vite debería ser la mejor opción al crear aplicaciones con React.
- Reaccionar
-
- Esta es una biblioteca JavaScript para construir una interfaz de usuario (interfaz de usuario). Fue desarrollado por Facebook y todavía se usa en muchas aplicaciones web hoy.
- Tres.js
-
- Una biblioteca JavaScript para crear fácilmente gráficos 3D. Abraza las operaciones complejas de WebGL y permite un desarrollo 3D intuitivo.
- Es fácil crear gráficos 3D y es más fácil de usar que las operaciones directas de WebGL.
- Reaccionar tres fibra
-
- Esta es una biblioteca que permite que tres.js se usen con React. Combina la estructura de componentes de React con el motor 3D de tres.js.
- Se pueden usar tres.js en el estilo de desarrollo React, lo que permite un desarrollo intuitivo y eficiente.
- Reaccionar tres drei
-
- Una colección de componentes útiles de utilidad para reaccionar tres fibra. Es fácil agregar las características de tres.js de uso común.
- Las características complejas de tres.js se pueden lograr con código corto, reduciendo los costos de aprendizaje.
Malla
Para dibujar objetos 3D, usa el componente de malla.
La malla consiste en geometrías y materiales.
Existen propiedades, como posición, rotación, escala, senchshadow y recibehadow.
También puede definir eventos como OnClick. Para obtener más información, consulte la documentación tres.js.
función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh position={[0, 1, 0]} // 位置 rotation={[Math.PI / 4, 0, 0]} // 回転（ラジアン） scale={[2, 2, 2]} // スケール（拡大） castShadow // 影を投げる receiveShadow // 影を受け取る ><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="red" /></mesh></Canvas> ); } Exportar aplicación predeterminada;Geometría
¿Qué es la geometría?
La geometría define la posición, el tamaño y la conectividad de los vértices, bordes y caras que conforman un objeto.
- Vértices (azul): son puntos individuales en el espacio 3D que definen la forma del objeto. Cada vértice tiene coordenadas (X, Y, Z) que determinan su posición en el espacio 3D. Los vértices están conectados en los bordes para formar una cara
- Borde (verde): los bordes son líneas que conectan vértices. Estos definen la forma del objeto y pueden ser rectas o curvadas. Cada borde consiste en un conjunto de índices que se refieren a los vértices.
- Cara (amarilla): las caras son polígonos formados por vértices conectados. Las caras definen la superficie de un objeto y pueden ser triángulos, cuadrados u otros polígonos. Cada cara también consiste en un conjunto de índices que se refieren a los vértices.
Tipos de geometrías
React Three Fiber (tres.js) tiene mucha geometría preparada.
A continuación se muestran algunos de los más comunes.
boxgeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><boxGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
esmereegeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><sphereGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
plangeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return (<Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><planeGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
círculo círculo
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><circleGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
cilindrogeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><cylinderGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
capsegeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><capsuleGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
conegeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><coneGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
dodecaedrengeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><dodecahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
extrudegeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><extrudeGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
icosaedrengeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><icosahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
lategeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return (<Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><latheGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
octaedrongeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><octahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
polihedrongeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); function app (): jsx.Element {const vértices = [0, 0, 1, // vértice 1 0, 1, 0, // Vértice 2 1, 0, 0, // Vértice 3 -1, 0, 0, // Vertex 4]; Índices const = [0, 1, 2, // cara 1 0, 1, 3, // cara 2 0, 2, 3, // cara 3 1, 2, 3, // cara 4]; devolver ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><polyhedronGeometry args={[vertices, indices, 1, 0]} /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
tetrahedrengeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><tetrahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
torusgeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return (<Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
torusknotgeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
tubegeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><tubeGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
ringgeometría
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><ringGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
shapegeometría
importar {forma, vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); function app (): jsx.element {const shape = new Shape (); // Definir la forma de la forma del corazón. Moveto (0, 0.5); forma.beziercurveto (0.5, 1, 1, 0.5, 0, 0); forma.beziercurveto (-1, 0.5, -0.5, 1, 0, 0.5); devolver ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><shapeGeometry args={[shape]} /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
edgeSegeometry
import {vector3, boxgeometry} de "tres"; import {Canvas} de "@react-three/fiber"; import {bordes, meshdiscarDmaterial, orbitcontrols} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return (<Canvas camera={{ position: INITIAL_CAMERA_POSITION }}> {/ * react-tres fibra solamente */} <lineSegments><edgesGeometry args={[new BoxGeometry(1)]} /><lineBasicMaterial color="blue" /></lineSegments> {/ * react-three-drii */} <mesh position={[2, 0, 0]}><boxGeometry args={[1, 1, 1]} /><MeshDiscardMaterial /><Edges color="red" /></mesh><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Si usa bordes con React-Three-Fiber solamente, deberá usar tres.js directamente para Args.
Por otro lado, React-Three-Drei le permite escribir simplemente sin usar tres.js directamente, pero React-Three-Drei’s Bords también dibuja caras, por lo que debe usar MeshDiscardMaterial
estructura de alambre
import {vector3, boxgeometry} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls, Wireframe} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return (<Canvas camera={{ position: INITIAL_CAMERA_POSITION }}> {/ * react-three-fiber */} <lineSegments><wireframeGeometry args={[new BoxGeometry(1)]} /><lineBasicMaterial color="blue" /></lineSegments> {/ * react-three-drii */}<mesh position={[2, 0, 0]}><boxGeometry args={[1, 1, 1]} /><Wireframe stroke="red" /></mesh> {/ * Otra solución para reaccionar-tres fibra */} <mesh position={[4, 0, 0]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="green" wireframe /></mesh><OrbitControls /><ambientLight /></Canvas> ); } Exportar aplicación predeterminada;
Un componente React-Three-DRII llamado Wireframe también dibuja caras.
Otra solución para reaccionar-tres fibras podría ser la más fácil de usar.
Materiales
El material define la información que determina el material que determina cómo se ve la superficie de un objeto cuando se dibuja.
Existen propiedades, como el color del objeto, la textura, la transparencia y la reflectividad.
Para verificar el material, necesita una luz. Explicaré sobre las luces en otra ocasión, así que esta vez incluye Ambientlight y DirectionAlight de la siguiente manera.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshNormalMaterial /></mesh><ambientLight intensity={0.5} /> // Agregar luz<directionalLight position={[0, 5, 5]} intensity={0.7} /> // Agregar luz<OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Tipos de materiales en React Three Fiber (tres.js)
React Three Fiber (tres.js) tiene muchos materiales prefabricados.
A continuación se muestran algunos de los más comunes.
MeshbasicMaterial
MeshbasicMaterial es un material simple que no se ve afectado por las fuentes de luz. Muestra texturas y colores como son.
A menudo se usa en wireframes, representación no real, fondos, etc.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshBasicMaterial color="red" /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
malormalmaterial
Meshnormalmaterial es un material especial que visualiza las normales de los vértices y las superficies. Esto tampoco se ve afectado por la luz.
A menudo se usa con fines de depuración para verificar si la estructura y las normales del modelo son correctas.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshNormalMaterial /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
malvado
Meshlambertmaterial es un material liviano con solo reflexión difusa. Calcula reflejos difusos y crea un aspecto mate. Es liviano, pero no realista.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshLambertMaterial color="red" /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Meshphongmaterial
Meshphongmaterial es un material con reflexión especular además de las propiedades de Lambert. Es posible expresar reflexiones especulares, pero esto tampoco es realista.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshPhongMaterial color="red" shininess={100} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Meshandardmaterial
MeshStandardMaterial es un material que admite PBR (representación física). Recrea reflejos y sombras de luz realistas. Puede establecer el metalaje y la rugosidad, creando una textura bastante realista.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshStandardMaterial color="red" metalness={1} roughness={0.5} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
MeshphysicalMaterial
MeshphysicalMaterial es una extensión de
MeshandardMaterial Se han agregado propiedades físicas avanzadas como transmisión, reflectancia y capa transparente. Es posible expresar transmisión y refracción, como gotas de vidrio o agua. Hace posible expresar más de manera realista, pero también requiere más esfuerzo computacional.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshPhysicalMaterial color="red" metalness={1} // 金属感を最大に roughness={0.5} // 表面の粗さ（滑らか） clearcoat={0.8} // 反射の強さ clearcoatRoughness={0.1} // 反射面の粗さ /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
| Características | malvado | Meshphongmaterial | Meshandardmaterial | MeshphysicalMaterial |
|---|---|---|---|---|
| Modelo de sombreado | Sombreado de Lambert | Fon sombreado | Sombreado físico (PBR) | Sombreado físico (PBR) |
| Sensación metálica | ninguno | ninguno | Expresar sensación metálica con metal Porque | Expresar sensación metálica con metal Porque |
| Aspereza | ninguno | ninguno | Expresar rugosidad de la superficie con rugosidad | Expresar rugosidad de la superficie con rugosidad |
| Reflexión | ninguno | Reflexión especular ( brillante ) | Reflejo simple posible | Agregue una capa reflectante con ClearCoat |
| Transparencia y refracción | ninguno | ninguno | ninguno | Expresado usando transparencia y refractarratio |
| actuación | alta velocidad | Es un poco tarde | Un poco pesado | El más pesado (intensivo en gestión) |
| Propósito de uso | Escenas simples, orientadas al rendimiento | Superficies brillantes (plástico, metal) | Escenas que requieren expresión física realista | Escenas que requieren reflexión realista, refracción, sensación metálica y transparencia |
| Características | Reflexión difusa simple | Reflexiones difusas y especulares (reflejos) | Reflexión físicamente precisa, reflexión difusa, sensación metálica, aspereza | Reflexión físicamente precisa, transparencia, refracción, sensación metálica |
MeshtoonMaterial
MeshtoonMaterial es un material con un sombreado escalonado al estilo de animación. En lugar de ser realista, a menudo se usa para expresar estilos de dibujos animados.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshToonMaterial color="red" /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
malvado
Meshdepthmaterial es un material especial que cambia el color según la profundidad. La distancia desde el objeto a la cámara se expresa en color. Este tampoco se ve afectado por la luz.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshDepthMaterial /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Meshmatcapmaterial
MeshmatCapmaterial es un material que utiliza texturas 2D (MATCAP) para reproducir el sombreado realista sin considerar la fuente de luz.
La imagen contiene información de luz, lo que permite crear expresiones realistas.
import {vector3} de "tres"; import {Canvas, useLoader} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; import {textureLoader} de "tres"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); function app (): jsx.Element {// Cargue la textura de matcap con textureLoader const matcaptexture = useLoader (textureLoader, "https://threejs.org/examples/textures/matcaps/matcap-porchain-white.jpg"); devolver ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshMatcapMaterial matcap={matcapTexture} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Tipos de materiales en React Three Drei
React Three Drei ofrece materiales aún más avanzados.
Meshdiscardmaterial
MeshDiscardMaterial es un material que no representa nada. Puede ocultar objetos de la escena mientras muestra sombras e hijos.
import {Canvas} de "@react-three/fiber"; import {MeshDiscardMaterial, OrbitControls} de "@react-three/drei"; import {vector3} de "tres"; const inicial_camera_position = new Vector3 (3, 3, 3); función app (): jsx.element {return (<Canvas shadows camera={{ position: INITIAL_CAMERA_POSITION }} style={{ background: "lightblue" }} ><mesh castShadow receiveShadow><torusKnotGeometry /><MeshDiscardMaterial /></mesh> {/ * Ground (Sharp Shadow) */} <mesh receiveShadow position={[0, -1.8, 0]} rotation={[-Math.PI / 2, 0, 0]} ><planeGeometry args={[5, 5]} /><meshStandardMaterial color="lightgray" /></mesh> {/ * Configuración de iluminación */} <ambientLight intensity={0.3} /><directionalLight position={[5, 5, 5]} intensity={0.7} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} /> {/ * Operación de la cámara */}<OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Meshdistortmaterial
MeshDistortMaterial es un material que puede distorsionar la geometría. Se caracteriza no solo por color y textura, sino también de movimiento.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {MeshDistortMaterial, OrbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><MeshDistortMaterial distort={1} speed={10} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;Meshreflectormaterial
Meshreflectormaterial es un material que le permite agregar fácilmente reflejos y difuminar a su malla. La expansión de MeshandardMaterial hace que sea más fácil crear una expresión similar a un espejo.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {MeshDistortMaterial, Meshreflectormaterial, OrbitControls,} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><MeshDistortMaterial distort={1} speed={10} /></mesh> {/ * Superficie reflectante (tierra) */} <mesh rotation-x={-Math.PI / 2} position={[0, -3, 0]}><planeGeometry args={[10, 10]} /><MeshReflectorMaterial blur={[200, 100]} // X, Y方向のぼかしを設定 mixBlur={0.5} // ぼかしの強さを調整 mixStrength={0.7} // 反射の強さ mixContrast={1} // 反射のコントラストを調整 resolution={512} // 解像度、値を上げるほどきれいになるがパフォーマンスに影響 mirror={1} // 環境から反射を取得 depthScale={0.1} // 深さのスケール reflectorOffset={0.2} // 反射面のオフセット /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Maltratransmisión
MeshtransmissionMaterial es un material que es una versión mejorada de MeshphysicalMaterial. Está diseñado para facilitar el manejo de la transmisión y la refracción. importante es que es fácil establecer el IOR
IOR (índice de refracción) : este es un número que representa la relación entre la velocidad a la que la luz viaja a través del material y la velocidad a la que viaja a través del aire, y cuando esto se puede establecer fácilmente, se vuelve muy fácil describir vidrio, diamante, agua, etc.
- Air Ior: 1.0
- Glass Ior: 1.5
- Diamond IOR: 2.42
- Agua Ior: 1.33
import {Canvas} de "@react-three/fiber"; import {cáustico, maltransmissmissionMaterial, OrbitControls,} de "@react-three/drei"; import {vector3} de "tres"; // Posición inicial de la cámara const inicial_camera_position = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas shadows camera={{ position: INITIAL_CAMERA_POSITION, fov: 45 }}><color attach="background" args={["#f0f0f0"]} /><Caustics color="#FF8F20" position={[0, -0.5, 0]} lightSource={[5, 5, -10]} worldRadius={0.01} ior={1.2} intensity={0.005} causticsOnly={false} backside={false} ><mesh castShadow receiveShadow position={[-2, 0.5, -1]} scale={0.5}><sphereGeometry args={[1, 64, 64]} /><MeshTransmissionMaterial resolution={1024} distortion={0.25} color="#FF8F20" thickness={1} anisotropy={1} /></mesh></Caustics><mesh><boxGeometry /><meshNormalMaterial /></mesh> {/ * Configuración de iluminación */}<ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /> {/ * Operación de la cámara */}<OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Meshwobblematerial
Meshwobblematerial es un material que puede sacudir y geometría ondulada. Este también es un material que se puede aplicar al movimiento.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {meshwobblematerial, orbitControls} de "@react-three/drei"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><MeshWobbleMaterial factor={1} speed={10} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Softshadows
Softshadows es un componente que hace que sea más fácil agregar sombras más realistas, aunque esto no es un material. Podrá expresar fácilmente los tonos de las sombras.
import {Canvas} de "@react-three/fiber"; import {SoftShadows, OrbitControls} de "@react-three/drei"; import {vector3} de "tres"; const inicial_camera_position = new Vector3 (3, 3, 3); función app (): jsx.element {return (<Canvas shadows camera={{ position: INITIAL_CAMERA_POSITION }} style={{ background: "lightblue" }} >{/ * Habilitar SoftShadows */} <SoftShadows /><mesh castShadow receiveShadow><torusKnotGeometry /><meshStandardMaterial color="red" /></mesh> {/ * Ground (Sharp Shadow) */} <mesh receiveShadow position={[0, -1.8, 0]} rotation={[-Math.PI / 2, 0, 0]} ><planeGeometry args={[5, 5]} /><meshStandardMaterial color="lightgray" /></mesh> {/ * Configuración de iluminación */} <ambientLight intensity={0.3} /><directionalLight position={[5, 5, 5]} intensity={0.7} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} /> {/ * Operación de la cámara */}<OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;Es un poco confuso, pero puede ser más fácil de entender en comparación con las sombras de MeshDiscardMaterial mencionada anteriormente.
Sobre el frente y la parte posterior del material
Un material tiene un lado que define qué lado para renderizar.
Por defecto, está en la parte delantera, pero también puede representar la parte posterior al configurar la parte posterior.
import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; importar * como tres de "tres"; // constante const inicial_camera_position: vector3 = new Vector3 (3, 3, 3); función app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh position={[0, 0, 0]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="red" side={THREE.FrontSide} // Optional as it's the default /></mesh><mesh position={[2, 0, 0]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="red" side={THREE.BackSide} // Optional as it's the default /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 3, 3]} intensity={0.7} /><OrbitControls /></Canvas> ); } Exportar aplicación predeterminada;
Creación de contenido 3D utilizando geometría y materiales estándar
Cree contenido 3D interactivo simple, entretenido e interactivo utilizando geometría estándar y materiales de React Three Fiber y React Three Drei.
Pantalla de inicio de sesión (estilo de juego)
¡He reproducido la pantalla para seleccionar un Poke Poke Pack y lo personalicé un poco!
El fondo 3D que estoy creando es
📺 Mire la demostración en YouTube : puede verlo desde este enlace
Si lo encontró útil, ¡suscríbase a nuestro canal!
¡Continuaremos creando lecciones y trabajos desde TypeScript X React Three Fiber en el futuro!
Haremos un anuncio en YouTube, así que suscríbase a nuestro canal de YouTube y espere notificaciones.
📺 Mira YouTube : puedes verlo desde este enlace
Si desea saber qué puede hacer React Three Fiber, ¡consulte lo siguiente!
¡Tenemos obras fáciles de usar disponibles!
- Traté de hacer que Bears caminara con React x tres.js!
- Intenté hacer que un viejo baile en React x tres.js!
- ¡Traté de mostrar un modelo 3D con React x tres.js!
- Hice un botón 3D que explota en React x tres.js!
- Reaccione tres fibra x drei x Introducción al mecanografiado! ¡Fondo 3D de estilo Poke Poke hecho con objetos estándar!
![[Para principiantes] Introducción a React Three Fiber X Drei X TypeScript! Crear arte de píxel y animaciones dinámicas a partir de imágenes](https://hack-lab-256.com/wp-content/uploads/2025/02/hack-lab-256-samnail-16-300x169.jpg)
![[Explicación completa] ¡Aprenda con React Three Fiber × TypeScript! Guía práctica para transformar (posición, rotación, escala) para objetos 3D](https://hack-lab-256.com/wp-content/uploads/2025/02/hack-lab-256-samnail-15-300x169.png)
