[Súper fácil] Introducción para reaccionar tres tipos mecanografiados de fibra x drei x! ¡Fondo 3D de estilo Poke Poke hecho con objetos estándar!
¡La URL ha sido copiada!
Recientemente, se utilizan gráficos 3D En particular, React Three Fiber (R3F) le permite manejar fácilmente tres.js como un componente React.
Esta vez, también utilizaremos drei implementaremos coloridos fondos 3D "Pokepoke" usando React + TypeScript
📌 ¡Qué es más, esta vez no usaremos modelos 3D especiales! ¡Así es como expresarlo se puede hacer usando solo los objetos básicos (caja, plano, etc.) proporcionados como estándar en tres.js Te haremos experimentar esto.
💡 Imagen completa 👇 Crear un fondo 3D 👇
📺 Mire la demostración en YouTube : puede verlo desde este enlace
✅ con tarjetas coloridas colocadas en forma circular✅ que utiliza reflexiones especulares✅una interfaz de usuario que combina HTML/CSS
🚀 Echemos un vistazo al punto de que "¡No se requieren modelos 3D especiales! ¡Puedes hacerlo con solo objetos estándar!"
¡Ahora escribamos algún código!
¡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.
🚀 Introducción a 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 "fondo 3D de estilo Pokepoke" con React Three Fiber × Drei × TypeScript!
📌 La construcción del medio ambiente se explica en este artículo
📌 Esta vez, no utilizaremos ningún modelo 3D especial, sino que solo usaremos objetos estándar que estén disponibles en React Three Fiber y React Three DREI. Si desea obtener más información sobre los objetos estándar, consulte también este artículo
A continuación, coloque un objeto que parece un paquete de tarjeta Poke Poke en el fondo. Con esto solo, ¿no se parece a la pantalla para seleccionar un Poke Poke Pack? (jajaja)
import {Canvas} de "@react-three/fiber"; import {MeshReflectMaterial, OrbitControls,} de "@react-three/drei"; // === Coloque un cuadro inspirado en un paquete de tarjeta en un círculo, centrado alrededor [0,0,0] === const CircularCardPack = ({Radius = 5, Count = 10, CardSize = [1, 1.5, 0.1], // width, altura, profundidad}: {radio ?: número; // radio del círculo de recuento; }) => {const tarjetas = array.from ({longitud: count}); // Crear retorno de matriz (<group> {cards.map (((_, i) => {const ángulo = (i / count) * Math.pi * 2; // ángulo en la circunferencia const x = radius * math.cos (ángulo); // x coordenada const z = radius * math.sin (ángulo); // z coordinada const rotationy = anglego + math.pi / 2; // rotate la carta de la card (ángulo (ángulo) <mesh key={i} position={[x, -1, z]} // カードの位置 rotation={[0, rotationY, 0]} // カードの向き ><boxGeometry args={cardSize} /><meshStandardMaterial color={`hsl(${(i / count) * 360}, 70%, 50%)`} /></mesh> ); })}</group> ); }; // === Componente de la aplicación principal === const LoginScreen = () => {return (<> {/ * Canvas en tres.js */}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/* Escribiendo */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Operación de la cámara */} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /> {/ * Objeto de tarjeta */}<CircularCardPack /></Canvas> {/ * Formulario de inicio de sesión creado usando html/css */} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Acceso </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Acceso</button></form></div></> ); }; Exportar Loginscreen predeterminado;
💡 ¡Coloque una superficie de espejo debajo del paquete!
Cuando revisé dónde elegí los paquetes de Poke Poke, los paquetes parecían ser reflectantes, así que intenté agregar una superficie de espejo debajo del paquete de la misma manera.
import {Canvas} de "@react-three/fiber"; import {MeshReflectMaterial, OrbitControls,} de "@react-three/drei"; // === Componentes de espejo === const reflectivePlane = () => {return (<><mesh rotation-x={-Math.PI / 2} position={[0, -2, 0]}><planeGeometry args={[100, 100]} /> {/ * Espejo más grande para cubrir todo el fondo */} <MeshReflectorMaterial blur={[200, 100]} mixBlur={0.7} mixStrength={1} mixContrast={1} resolution={1024} mirror={1} depthScale={0.1} reflectorOffset={0.2} /></mesh></> ); }; // === Coloque un cuadro inspirado en un paquete de tarjeta en un círculo con el centro de [[0,0,0] === const CircularCardPack = ({Radius = 5, Count = 10, CardSize = [1, 1.5, 0.1], // width, altura, profundidad}: {Radius ?: número; // Radio del círculo Count ?: Número; }) => {const tarjetas = array.from ({longitud: count}); // Crear un retorno de matriz (<group> {cards.map (((_, i) => {const ángulo = (i / count) * Math.pi * 2; // ángulo en la circunferencia const x = radius * math.cos (ángulo); // x coordenada const z = radius * math.sin (ángulo); // z coordinada const rotationy = anglego + math.pi / 2; // rotate la carta de la card (ángulo (ángulo) <mesh key={i} position={[x, -1, z]} // カードの位置 rotation={[0, rotationY, 0]} // カードの向き ><boxGeometry args={cardSize} /><meshStandardMaterial color={`hsl(${(i / count) * 360}, 70%, 50%)`} /></mesh> ); })}</group> ); }; // === Componente de la aplicación principal === const LoginScreen = () => {return (<> {/ * Canvas en tres.js */}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/* Escribiendo */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Operación de la cámara */} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /> {/ * Cardpack Object */}<CircularCardPack /> {/ * Objeto espejo */}<ReflectivePlane /></Canvas> {/ * Formulario de inicio de sesión creado usando html/css */} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Acceso </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Acceso</button></form></div></> ); }; Exportar Loginscreen predeterminado;
💡 💡 💡 💡 💡 Antecedentes!
Esto no lo necesita, pero estaba un poco solo, así que también agregaré un fondo. El fondo también es estándar de React Three Drei.
import {Canvas} de "@react-three/fiber"; importar {entorno, meshreflectormaterial, orbitcontrols,} de "@react-three/drei"; // === const reflectivePlane = () => {return (<><mesh rotation-x={-Math.PI / 2} position={[0, -2, 0]}><planeGeometry args={[100, 100]} /> {/ * Espejo más grande para cubrir todo el fondo */} <MeshReflectorMaterial blur={[200, 100]} mixBlur={0.7} mixStrength={1} mixContrast={1} resolution={1024} mirror={1} depthScale={0.1} reflectorOffset={0.2} /></mesh></> ); }; // === Coloque un cuadro inspirado en un paquete de tarjeta en un círculo con el centro de [[0,0,0] === const CircularCardPack = ({Radius = 5, Count = 10, CardSize = [1, 1.5, 0.1], // width, altura, profundidad}: {Radius ?: número; // Radio del círculo Count ?: Número; }) => {const tarjetas = array.from ({longitud: count}); // Crear un retorno de matriz (<group> {cards.map (((_, i) => {const ángulo = (i / count) * Math.pi * 2; // ángulo en la circunferencia const x = radius * math.cos (ángulo); // x coordenada const z = radius * math.sin (ángulo); // z coordinada const rotationy = anglego + math.pi / 2; // rotate la carta de la card (ángulo (ángulo) <mesh key={i} position={[x, -1, z]} // カードの位置 rotation={[0, rotationY, 0]} // カードの向き ><boxGeometry args={cardSize} /><meshStandardMaterial color={`hsl(${(i / count) * 360}, 70%, 50%)`} /></mesh> ); })}</group> ); }; // === Componente de la aplicación principal === const LoginScreen = () => {return (<> {/ * Canvas en tres.js */}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/* Escribiendo */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Operación de la cámara */} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /> {/ * Cardpack Object */}<CircularCardPack /> {/ * Objeto espejo */}<ReflectivePlane /> {/* Fondo */}<Environment preset="night" background /></Canvas> {/ * Formulario de inicio de sesión creado usando html/css */} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Acceso </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Acceso</button></form></div></> ); }; Exportar Loginscreen predeterminado;
por último
Esta vez, hemos reproducido la pantalla de selección de Pokepoke Pack utilizando solo objetos estándar, como un "fondo 3D de estilo Pokepoke hecho de objetos estándar!"
📌 ¡Puede obtener una comprensión detallada de los movimientos reales viendo el YouTube a continuación!
📺 Mire la demostración en YouTube : puede verlo desde este enlace
¡Si usa malla y reemplace con un objeto 3D, incluso puede acercarse a su ideal!
Meshy es un servicio que le permite generar fácilmente objetos 3D usando AI. Al usar esto, puede crear fácilmente su objeto 3D ideal, ¡así que creo que puede acercarse aún más a su ideal!
📺 Verifique la malla : puede verificarlo en la página oficial desde este enlace
¡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.
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!
![[Súper fácil] Introducción para reaccionar tres tipos mecanografiados de fibra x drei x! ¡Fondo 3D de estilo Poke Poke hecho con objetos estándar!](https://hack-lab-256.com/wp-content/uploads/2025/02/hack-lab-256-samnail-14.jpg)
![[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)
