[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 interfaces de próxima generación. A primera vista, estas cosas pueden parecer que requieren tecnología avanzada, pero React Three Fiber , puede crear un mundo 3D con sorprendente facilidad con solo saber Reaccionar.

Sin embargo, todavía hay pocos materiales de enseñanza que se pueden aprender fácilmente sobre el desarrollo 3D utilizando React Three Fiber and TypeScript.

• React Three Fiber es totalmente compatible con el ecosistema React y es una biblioteca que le permite maximizar la potencia de tres.js con React. Sin embargo, incluso leer la documentación oficial es un obstáculo para principiantes.
• TypeScript se está convirtiendo en una herramienta esencial para aumentar la seguridad y la eficiencia, pero se pueden encontrar pocos artículos de comentarios específicos junto con React Three Fiber.

cuidadosamente la combinación de reaccionando tres fibras y mecanografiados para que incluso los principiantes puedan entenderlo sin ninguna dificultad

¡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

• Cree un entorno 3D para TypeScript X React Three Fiber con VITE
• Reaccione tres fibra × drei × mecanografiado! Conceptos básicos de expresiones 3D hechas con objetos estándar
• ¡Aprenda con React Three Fiber × TypeScript! Transformar (posición, rotación, escala) de objetos 3D
• *En preparación

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

• 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.

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.

Cree un entorno 3D para TypeScript X React Three Fiber con VITE

Cree un nuevo proyecto React y cree un entorno 3D para React Threefiber.
El código que crearé esta vez se publica en GitHub, así que eche un vistazo si lo necesita.

💾 Repositorio de GitHub : ¡verifique el código fuente en este enlace

Github

GitHub: Aazutaku/React-Three-Fiber-Typescript en el desarrollo de TypeScript-X-React-Three-Fiber-Setup contribuye al desarrollo de Aazutaku/React-Three-Fiber-Typescript al crear una cuenta en GitHub.

Construyendo un entorno de mecanografiado react X con VITE

Esta vez usaré Vite. Si ha estado usando mucho CRA (Create-React-App), le recomendamos que aproveche esta oportunidad para cambiar a VITE.

Es fácil de hacer. Ejecute lo siguiente en el directorio donde desea crear el proyecto.

npm crea vite@último

Se le pedirá que ingrese y seleccione el nombre y el marco del proyecto, así que haga lo siguiente:

Nombre del proyecto:… React-tres-fibra-app Seleccione un marco: ›React Seleccione una variante:› TypeScript + SWC

Esta es la única forma de construir un entorno TypeScript React X.
Intente lanzar la aplicación.

CD react-tres fibra-fibra-app npm install npm ejecute dev

Creo que ahora puede iniciar la aplicación VITE + React.

Cree un entorno 3D para TypeScript X React Three Fiber

Instale React Three Fiber en la aplicación que creó con VITE.
Use el comando a continuación para instalar las bibliotecas requeridas.

NPM instalar tres @react-three/fiber npm instalación --save-dev @tipos/tres

Esto solo le permitirá usar React Three Fiber, así que intentaré mostrar la caja.
Modificemos App.tsx de la siguiente manera:

import {Canvas} de "@react-three/fiber"; función app (): jsx.element {return (<Canvas><mesh><boxGeometry /><meshNormalMaterial /></mesh></Canvas> )} Exportar aplicación predeterminada

Verás una pequeña caja en el lado izquierdo.

Quiero hacer el lienzo toda la pantalla, así que eliminaré App.css y reescribiré index.css con lo siguiente.

#root {ancho: 100vw; Altura: 100 VH; } cuerpo {margen: 0; }

Ahora toda la pantalla ahora es lienzo.

Sin embargo, si continúa así, no se verá como 3D. . .
Intentemos modificar la posición de la cámara.

La cámara dispara una escena 3D desde la perspectiva de la cámara virtual y muestra los resultados en la pantalla. Al igual que con una cámara real, puede establecer la posición , la orientación , el ángulo de visión

import {vector3} de "tres"; import {Canvas} de "@react-three/fiber"; // 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></Canvas> ); } Exportar aplicación predeterminada;

¿Entiendes que esto hace posible la representación 3D?

Introducir React Three Drei

Introducir React Three Drei, una colección útil de componentes de utilidad para React Three Fiber.
Es una biblioteca de uso común porque le permite agregar fácilmente las funciones de tres.js comúnmente utilizadas.

NPM install @react-three/drei

Esa es la única introducción.
Intentaré usar "OrbitControls". Este es un componente que le permite moverse y acercar fácilmente a la cámara.

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;

¡Ahora debería poder ver el cuadro desde un punto de vista gratuito como este!

El código que creé esta vez se publica en GitHub, ¡así que por favor, échale un vistazo también!

💾 Repositorio de GitHub : ¡verifique el código fuente en este enlace

Github

GitHub: Aazutaku/React-Three-Fiber-Typescript en el desarrollo de TypeScript-X-React-Three-Fiber-Setup contribuye al desarrollo de Aazutaku/React-Three-Fiber-Typescript al crear una cuenta en GitHub.

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

• Cree un entorno 3D para TypeScript X React Three Fiber con VITE
• Reaccione tres fibra × drei × mecanografiado! Conceptos básicos de expresiones 3D hechas con objetos estándar
• ¡Aprenda con React Three Fiber × TypeScript! Transformar (posición, rotación, escala) de objetos 3D
• *En preparación

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

• 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!