MENÚ

[Explicación completa] ¡Aprenda con React Three Fiber × TypeScript! Guía práctica para transformar (posición, rotación, escala) para objetos 3D

anuncio
Reaccionar tres.js
[Explicación completa] ¡Aprenda con React Three Fiber × TypeScript! Guía práctica para transformar (posición, rotación, escala) para objetos 3D

En el desarrollo de la aplicación 3D, las operaciones inevitables de objetos como "posición", "rotación" y "escala" son inevitables.
React Three Fiber (R3F) le permite construir intuitivamente escenas 3D mientras aprovecha los mecanismos basados en componentes de React.

¡En este artículo, explicaremos en profundidad cómo manipular libremente las transformaciones de los objetos 3D usando React Three Fiber X TypeScript!
Aprenderá todo, desde lo básico hasta las aplicaciones de "posición, rotación, escala" junto con el código real

¡Leer esto debería
permitirle comprender el control de los objetos 3D sin problemas y usarlos en su implementación ¡Ahora comencemos mirando los conceptos básicos de transformación 🚀

¡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

YouTube
Hack Lab. 256 Comparta sus videos con amigos, familiares y personas en todo el mundo
TypeScript x reaccione tres fibra

Si desea saber qué puede hacer React Three Fiber, ¡consulte lo siguiente!
¡Tenemos obras fáciles de usar disponibles!

Haga clic aquí para obtener obras usando React Three Fiber
Tabla de contenido

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.

También es posible que desee leer
[Super Introducción] Fácil incluso para principiantes! ¡Cree un entorno 3D para TypeScript X React Three Fiber con Vite! Recientemente, en la web, hemos visto más y más representaciones 3D interactivas y hermosas. Por ejemplo, fondos de animación 3D, diseños de estilo de juego e incluso el Internet de próxima generación ...
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.

🚀 Visualice el eje de referencia en el espacio 3D con Axeshelper

A diferencia del 2D, el punto importante es que hay tres ejes en el espacio 3D: X, Y y Z.

  • X: dirección correcta
  • Y: hacia arriba
  • z: adelante (dirección hacia mí)

Al colocar, mover o girar un objeto 3D, a menudo es difícil comprender los criterios de coordenadas.
Axeshelper útil en tales casos .

✅ ¿Qué es Axeshelper?

Axeshelper es un objeto auxiliar que muestra visualmente los ejes de coordenadas dentro de una escena 3D .
Puede comprender intuitivamente la orientación del objeto mediante el eje X codificado por colores (eje rojo), eje Y (verde) y el eje Z (azul) en el espacio 3D

¡Es útil cuando desea verificar la orientación de un objeto o cuando desea saber cómo rotarlo

🎯 ¡Cómo usarlo con React Three Fiber!

React Three Fiber hace que sea fácil de usar simplemente colocando
componente Axeshelper del lienzo También puede colocar un Axeshelper dentro de la malla 

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; // === Componente de la aplicación principal === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /> {/ * Ayudante */}<axesHelper /></Canvas></> ); }; Exportar aplicación predeterminada;

verá el eje de referencia de las coordenadas mundiales de la siguiente manera

  • Eje x (rojo) → horizontal (izquierda y derecha)
  • Eje y (verde) → vertical (arriba y abajo)
  • Eje z (azul) → Dirección de profundidad (delantera y posterior)

🚀 Mueva un objeto 3D usando la posición (coordenadas)

utiliza
la propiedad de posición para controlar la posición de un objeto Al establecer la posición puede colocar en cualquier lugar que desee en los ejes X, Y y Z.

La posición es originalmente un vector 3D, pero gracias a React Three Fiber, ahora es posible pasarlo como una variedad de números.
Internamente, reaccione tres obras de fibra convirtiendo matrices en objetos Vector3.

✅ ¿Qué es la posición

posición = {[x, y, z]} le
permite especificar las coordenadas mundiales del objeto Esta coordenada se basa en tres.js, por lo que es el siguiente:

Sistema de coordenadas básicas

  • Eje x (rojo) → izquierdo (-) / derecho (+)
  • Eje y (verde) → inferior (-) / top (+)
  • Eje z (azul) → front (+) / retroceso (-)

🎯 ¡Cómo usarlo con React Three Fiber!

Moverse en el eje x

Por ejemplo, si establece la posición como se muestra a continuación, los objetos se alinearán uno al lado del otro.
" x-eje (rojo) → izquierdo (-) / derecho (+)" verá rojo a la izquierda y verde a la derecha.

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; // === Componente de la aplicación principal === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Ayudante */} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[-3, 0, 0]}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[3, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> ); }; Exportar aplicación predeterminada;

Moverse en el eje Y

Establecer la posición como se muestra a continuación hará que los objetos se organicen verticalmente.
" eje y (verde) → inferior (-)/top (+)" verá rojo en la parte inferior y verde en la parte superior.

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; // === Componente de la aplicación principal === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Ayudante */} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[0, -3, 0]}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[0, 3, 0]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> ); }; Exportar aplicación predeterminada;

Moverse en el eje z

Si establece la posición como se muestra a continuación, el objeto se mostrará en la parte posterior.
" z-eje (azul) → frontal (+) / retrospectiva (-)", debe ver el verde en el frente y el rojo en la parte posterior.

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; // === Componente de la aplicación principal === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Ayudante */} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[0, 0, -3]}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[0, 0, 3]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> ); }; Exportar aplicación predeterminada;

🚀Risizar objetos 3D utilizando escala

Si desea cambiar el tamaño de un objeto 3D, use
la propiedad de escala Especificar escala = {[x, y, z]}

✅ ¿ Qué es la escala

La escala es una propiedad que establece la relación de escala para cada eje de un objeto .
El valor inicial es [1, 1, 1] , que es el tamaño predeterminado del objeto.

  • escala = {[1, 1, 1]} → Tamaño igual (tamaño predeterminado)
  • escala = {[2, 2, 2]} → magnificar dos veces
  • escala = {[0.5, 0.5, 0.5]} → medio tamaño
  • escala = {[1, 2, 1]} → Ampliar el doble que el eje y (alargándose verticalmente)

🎯 ¡Cómo usarlo con React Three Fiber!

Cambiar tamaño con escala = {[x, y, z]}

El código a continuación coloca cuadros con diferentes
escalas Debe ser rojo = tamaño azul/2. El tamaño es verde = azul *2.

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; // === Componente de la aplicación principal === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Ayudante */} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]} scale={[1, 1, 1]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[-3, 0, 0]} scale={[0.5, 0.5, 0.5]}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[3, 0, 0]} scale={[2, 2, 2]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> ); }; Exportar aplicación predeterminada;

Cambie el tamaño con escala- [x, y, z]

React Three Fiber se puede cambiar de tamaño, como Scale-X.
Intente cambiar el ancho de azul, la altura para el rojo y la profundidad para el verde.

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; // === Componente de la aplicación principal === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Ayudante */} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]} scale-x={2}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[-3, 0, 0]} scale-y={2}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[3, 0, 0]} scale-z={2}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> ); }; Exportar aplicación predeterminada;

🚀 Rotación para rotar un objeto 3D

En el espacio 3D, los objetos se pueden girar para mostrar desde varios ángulos y agregar una presentación dinámica.
En React Three Fiber, puede establecer el ángulo de rotación de los ejes X, Y y Z del objeto especificando rotación = {[x, y, z]}

✅ ¿Qué es la rotación

rotación = {[x, y, z]} es una propiedad que especifica el ángulo de rotación de un objeto en radianes .
La rotación son los ejes de coordenadas locales del objeto .

  • Rotación del eje x ( rotación = {[math.pi / 4, 0, 0]} ) → inclinar de un lado a otro
  • Rotación del eje y ( rotación = {[0, math.pi / 4, 0]} ) → gire a la izquierda y a la derecha
  • Rotación del eje z ( rotación = {[0, 0, math.pi / 4]} ) → inclinar en sentido horario / antihorario

👉 El ángulo de rotación debe especificarse en radianes de forma predeterminada.
1 radian = aproximadamente 57.3 grados ( math.pi = 180 grados)

Además de Math.pi , React Three Fiber se puede definir usando tres.mathutils.degtorad

  • Math.pi/4 → 45°
  • Tres.mathutils.degtorad (45) → 45°

🎯 ¡Cómo usarlo con React Three Fiber!

Sin rotación

Primero, muestre el estado sin rotación.
Si establece [0, 0, 0], se establecerá el estado predeterminado.

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; importar * como tres de "tres"; // === Componente de la aplicación principal === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><mesh position={[0, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></Canvas></> ); }; Exportar aplicación predeterminada;

Girar en el eje X

Por ejemplo, si establece la rotación como se muestra a continuación, el objeto se inclinará hacia adelante y hacia atrás.

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; importar * como tres de "tres"; // === Componente de la aplicación principal === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><mesh position={[0, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} rotation={[THREE.MathUtils.degToRad(45), 0, 0]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} rotation={[Math.PI / 4, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></Canvas></> ); }; Exportar aplicación predeterminada;

Girar en el eje Y

Por ejemplo, si establece la rotación como se muestra a continuación, el objeto girará a la izquierda y a la derecha.

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; importar * como tres de "tres"; // === Componente de la aplicación principal === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><mesh position={[0, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} rotation={[0, THREE.MathUtils.degToRad(45), 0]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} rotation={[0, Math.PI / 4, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></Canvas></> ); }; Exportar aplicación predeterminada;

Girar en el eje z

Por ejemplo, si establece la rotación como se muestra a continuación, el objeto girará en sentido horario.

import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; importar * como tres de "tres"; // === Componente de la aplicación principal === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><mesh position={[0, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} rotation={[0, 0, THREE.MathUtils.degToRad(45)]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} rotation={[0, 0, Math.PI / 4]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></Canvas></> ); }; Exportar aplicación predeterminada;

🚀 Use el grupo para controlar múltiples objetos a la vez

Al crear una escena 3D, es posible
que desee agrupar varios objetos y moverlos, rotar o escalarlos todos a la vez En react tres fibra, Los componentes le permiten administrar múltiples objetos como una sola unidad .

✅ ¿Qué es un grupo

es un componente que envuelve tres. Group en tres.js que posición , la rotación y la escala de elementos infantiles a la vez .

📌 Características del grupo

  • Posición de configuración para cambiar el punto de referencia para todos los elementos infantiles
  • Establecer rotación para
  • Establecer escala para

🎯 ¡Cómo usarlo con React Three Fiber!

Estado predeterminado

El grupo se usa para establecer la escala en [1, 1, 1]. Esto seguirá siendo el valor predeterminado para los elementos infantiles.

  • Azul
    • Posición: [0, 0, 0]
    • Escala: [1, 1, 1]
    • Rotación: [0, 0, 0]
  • rojo
    • Posición: [-3, 0, 0]
    • Escala: [0.5, 0.5, 0.5]
    • Rotación: [0, 0, 0]
  • verde
    • Posición: [3, 0, 0]
    • Escala: [2, 2, 2]
    • Rotación: [0, 0, 0]
import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; // === Componente de la aplicación principal === const app = () => {return (<> <Canvas><ambientLight intensity={1} rotation={[0, 0, 0]} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><group scale={[1, 1, 1]}><mesh position={[0, 0, 0]} scale={[1, 1, 1]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} scale={[0.5, 0.5, 0.5]} rotation={[0, 0, 0]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} scale={[2, 2, 2]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></group></Canvas></> ); }; Exportar aplicación predeterminada;

Cambiar escala = {[3, 3, 3]}

Aplicar escala = {[3, 3, 3]} a un grupo

  1. escala 3x
  2. La posición de cada objeto también se multiplica por tres (aumenta la distancia relativa)

En otras palabras, tiene la misma imagen que a continuación.

  • Azul
    • Posición: [0, 0, 0] * 3 = [0, 0, 0]
    • Escala: [1, 1, 1] * 3 = [3, 3, 3]
    • Rotación: [0, 0, 0] * 3 = [0, 0, 0]
  • rojo
    • Posición: [-3, 0, 0] * 3 = [-9, 0, 0]
    • Escala: [0.5, 0.5, 0.5] * 3 = [1.5, 1.5, 1.5]
    • Rotación: [0, 0, 0] * 3 = [0, 0, 0]
  • verde
    • Posición: [3, 0, 0] * 3 = [9, 0, 0]
    • Escala: [2, 2, 2] * 3 = [6, 6, 6]
    • Rotación: [0, 0, 0] * 3 = [0, 0, 0]
import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; // === Componente de la aplicación principal === const app = () => {return (<> <Canvas><ambientLight intensity={1} rotation={[0, 0, 0]} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><group scale={[3, 3, 3]}><mesh position={[0, 0, 0]} scale={[1, 1, 1]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} scale={[0.5, 0.5, 0.5]} rotation={[0, 0, 0]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} scale={[2, 2, 2]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></group></Canvas></> ); }; Exportar aplicación predeterminada;

Cambiar rotación = {[0, tres.mathutils.degtorad (45), 0]}

Aplicando rotación = {[0, tres.mathutils.degtorad (45), 0]} a un grupo hace que todos los objetos en el grupo gire 45 grados alrededor del eje y . La posición también se mueve de acuerdo con la rotación .

  • Todos los objetos que pertenecen a un grupo
  • La posición de cada objeto está dispuesta a lo largo del sistema de coordenadas rotadas
  • Cada rotación de malla se aplica como está, pero la apariencia se ve afectada por el grupo 
import {OrbitControls} de "@react-three/drei"; import {Canvas} de "@react-three/fiber"; importar * como tres de "tres"; // === Componente de la aplicación principal === const app = () => {return (<> <Canvas><ambientLight intensity={1} rotation={[0, 0, 0]} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><group scale={[1, 1, 1]} rotation={[0, THREE.MathUtils.degToRad(45), 0]} ><axesHelper /><mesh position={[0, 0, 0]} scale={[1, 1, 1]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[-3, 0, 0]} scale={[0.5, 0.5, 0.5]} rotation={[0, 0, 0]} ><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[3, 0, 0]} scale={[2, 2, 2]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></group></Canvas></> ); }; Exportar aplicación predeterminada;

Creación de contenido 3D usando transformación (posición, rotación, escala)

Cree contenido 3D interactivo simple, entretenido e interactivo usando React Three Fiber y React Three Drei's Transform (posición, rotación, escala).

*En preparación

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

YouTube
Hack Lab. 256 Comparta sus videos con amigos, familiares y personas en todo el mundo
TypeScript x reaccione tres fibra

Si desea saber qué puede hacer React Three Fiber, ¡consulte lo siguiente!
¡Tenemos obras fáciles de usar disponibles!

Haga clic aquí para obtener obras usando React Three Fiber
Reaccionar tres.js
¡Comparte si quieres!

Quien escribió este artículo

Avatar de Taku Taku

Este es un blog que comencé a estudiar la seguridad de la información. Como nuevo empleado, sería feliz si pudieras mirar con un corazón amplio.
También está Teech Lab, que es una oportunidad para estudiar diversión de programación, por lo que si está interesado en el desarrollo de software, ¡asegúrese de echar un vistazo!

Artículos relacionados

Tabla de contenido