¿Explotando botones 3D? ¡Creé una interfaz de usuario increíble usando React x tres.js!

NPX CREATE-APP EXPLOTING-BUTTON -EPLAPLATE TypeScript

CD Exploting-Button NPM Instale tres @React-Three/Fiber @React-Three/Drei

explosión-botton/ ├─omo node_modules/ ├── pública/ ├── src/ ├── componentes// directorio para agregar otros componentes │ ├ ├ ├/ // para archivos que administran datos si es necesario │ ├ ├─ Pages/ // componentes administrados en una página de página by-bypage │ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ ├ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ExplodingButtonPage.tsx // Código de página principal │ │ └── ExplodingButtonPage.css // Hoja de estilo │ ├── APP.TSX // Puntos de entrada de aplicaciones │ ├iqu. ├── tsconfig.json // Configuración de mecanografiado └── Readme.md // Descripción general del proyecto

import './app.css'; import {explotarButtonPage} de './pages'; función app () {return (<div className="App"><ExplodingButtonPage /></div> ); } Exportar aplicación predeterminada;

importar react, {useref, useState} de "react"; import {Canvas, UseFrame} de "@react-three/fiber"; import {orbitcontrols, estrellas, texto} de "@react-three/drei"; importar * como tres de "tres"; // ===== // Parte 1: Definición constante // ===== const partícula_size = 0.1; // 1 Tamaño de partícula const partticle_num_width = 40; // Número de partículas (horizontal) const partículas_num_height = 20; // Número de partículas (horizontal) const partículas_num_thickness = 5; // Número de partículas (horizontal) const button_size_width = partícula_size * partícula_num_width; // tamaño de botón = 1 partícula * Número de partículas const button_size_height = partícula_size * partícula_num_height; // tamaño de botón = 1 partícula * Número de partículas const button_size_thickness = partícula_size * partícula_num_thickness; // tamaño del botón = 1 partícula * Número de partículas const text = "¡Haz clic en mí!"; // Texto para mostrar const text_size = button_size_width / text.length; // tamaño por caracteres const text_float_offset = 0.01; // la distancia que permite que el texto flote desde la superficie del botón const part sarticle_speed = 2.0; // velocidad en explosion const partícule_time = 5 * 1000; // Duración de la explosión en segundos const reset_speed = 0.05; // velocidad para volver a la posición original // ===== // Parte 2: Tipo Definición // ==== Tipo de partícula = {id: número; // Posición de inicio de identificación única: tres.vector3; // Posición inicial de posición: tres.vector3; // posición actual: tres.vector3; // Escala de vector de velocidad de explosión: número; // tamaño char?: Cadena; // caracteres para partículas de texto}; // ===== // Parte 3: Función de generación de partículas // ===== const generateButtonParticles = (): partícula [] => {const partículas: partícula [] = []; // --- Generar partículas de botón --- para (LET x = 0; x <partticle_num_width; x ++) {for (let y = 0; y <partícula_num_height; y ++) {para (let z = 0; z <partícula_num_thickness; z ++) {constante = nueva tres.vector3 (x * partícula_ssize-button-button-booth / 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2. Partícula_size - button_size_height / 2, z * partícula_size); partículas.push ({id: partículas.length, startPosition: posicion.clone (), posición: posicion.clone (), velocidad: new Three.vector3 ((math.random () - 0.5) * partícula_speed, (math.random () - 0.5) * partícula_speed, (math.random () - 0.5) * partícula_speed), scale,}); }}} // --- Generar partículas de texto --- text.split (""). Foreach ((char, i) => {const posicion = new tres.vector3 (i * text_size-button_size_width / 2 + text_size / 2, 0, // y-oxis Center Button_size_thickness + text_floats // Z-x-axs: LITTURY FLOATS DEL SUFFIE); particles.push({ id: particles.length, startPosition: position.clone(), position: position.clone(), velocity: new THREE.Vector3( (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED, (Math.random() - 0.5) * PARTICLE_SPEED ), scale: TEXT_SIZE, char, }); partículas de retorno; }; // ==== // Parte 4: Componentes de dibujo de partículas // ====== const explotingparticles: react.fc <{partículas: partícula []; estado: string}> = ({partículas, estado}) => {const groupRef = useref<THREE.Group> (nulo); // useFrame: procesar cada cuadro (explosión o retorno a la posición inicial) UseFrame (((_, delta) => {groupref.Current? Child.Position.Add (partícula.velocity.clone (). MultiplyScalar (delta)); }); devolver (<group ref={groupRef}> {partículas.map ((partícula) => partícula.char? (// Text Partencle <group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {partícula.char}</Text></group> ): (// partículas en forma de botón <mesh key={particle.id} position={particle.position} userData={{ particle }}><boxGeometry args={[particle.scale, particle.scale, particle.scale]} /><meshStandardMaterial color={"#3498db"} /></mesh> ))}</group> ); }; // ==== // Parte 5: Componentes principales // ===== Const ExplodingButtonPage: react.fc = () => {const [partículas] = useState<Particle[]> (GenerateButtonParticles ()); const [state, setState] = useState <"inactivo" | "explotar"> ("inactivo"); const handLecLick = () => {if (state === "inactivo") {setState ("explotar"); setTimeOut (() => setState ("inactivo"), partícula_time); }}; devolver ( <div style={{ width: "100vw", height: "100vh", background: "black" }}><Canvas camera={{ position: [0, 0, 8] }}> {/ * Efecto de fondo */} <Stars radius={100} depth={50} count={1000} factor={4} fade /><ambientLight intensity={0.8} /><spotLight position={[10, 10, 10]} intensity={2} castShadow /> {/ * Pantalla de partículas */}<group onClick={handleClick}><ExplodingParticles particles={particles} state={state} /></group> {/ * Operación de la cámara */}<OrbitControls /></Canvas></div> ); }; Exportar Predeterminado ExplodingButtonPage;

importar react, {useref, useState} de "react"; import {Canvas, UseFrame} de "@react-three/fiber"; import {orbitcontrols, estrellas, texto} de "@react-three/drei"; importar * como tres de "tres"; // ===== // Parte 1: Definición constante // ===== const partícula_size = 0.1; // 1 Tamaño de partícula const partticle_num_width = 40; // Número de partículas (horizontal) const partículas_num_height = 20; // Número de partículas (horizontal) const partículas_num_thickness = 5; // Número de partículas (horizontal) const button_size_width = partícula_size * partícula_num_width; // tamaño de botón = 1 partícula * Número de partículas const button_size_height = partícula_size * partícula_num_height; // tamaño de botón = 1 partícula * Número de partículas const button_size_thickness = partícula_size * partícula_num_thickness; // tamaño del botón = 1 partícula * Número de partículas const text = "¡Haz clic en mí!"; // Texto para mostrar const text_size = button_size_width / text.length; // tamaño por caracteres const text_float_offset = 0.01; // la distancia que permite que el texto flote desde la superficie del botón const part sarticle_speed = 2.0; // velocidad en explosion const partícule_time = 5 * 1000; // Duración de explosión (segundos) const reset_speed = 0.05; // velocidad para volver a la posición original

Tipo de partícula = {id: número; // Identificador único para cada posición de inicio de partículas: tres.vector3; // Posición inicial de posición: tres.vector3; // Velocidad de posición actual: tres.vector3; // Escala de velocidad de movimiento: número; // tamaño char?: Cadena; // Carácter para partículas de texto};

const GenerateButtonParticles = (): partícula [] => {const partículas: partícula [] = []; // Generar partículas de cubos para el botón para (LET x = 0; x <partícula_num_width; x ++) {para (let y = 0; y <partícula_num_height; y ++) {para (let z = 0; z <partícula_num_thickness; z ++) {constante = new tres.vector3 (X * partícula_size - button_size_size; Partícula_size - button_size_height / 2, z * partícula_size); partículas.push ({id: partículas.length, startPosition: posicion.clone (), posición: posicion.clone (), velocidad: new Three.vector3 ((math.random () - 0.5) * partícula_speed, (math.random () - 0.5) * partícula_speed, (math.random () - 0.5) * partícula_speed), scale,}); }}} // Crear partícula de texto text.split (""). Foreach ((char, i) => {const posicion = new tres.vector3 (i * text_size - button_size_width / 2 + text_size / 2, 0, button_size_thickness + text_float_offset); partícula.push ({{‘Id: Id: longitud de startposition, startposser (start. Posición: Position.Clone (), Velocity: New Three.vector3 ((Math.random () - 0.5) * Partartle_speed, (Math.random () - 0.5) * Partencle_speed, (Math.random () - 0.5) * partícula_speed), escala: text_size, char,}); partículas de retorno; };

const explosiones explosiones: react.fc <{partículas: partícula []; estado: string}> = ({partículas, estado}) => {const groupRef = useref<THREE.Group> (nulo); useFrame (((_, delta) => {groupRef.Current? Child.Position.lerp (partícula.StartPosition, reset_speed); devolver (<group ref={groupRef}> {partículas.map ((partícula) => partícula.char? ( <group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {partícula.char}</Text></group> ): ( <mesh key={particle.id} position={particle.position} userData={{ particle }}><boxGeometry args={[particle.scale, particle.scale, particle.scale]} /><meshStandardMaterial color={"#3498db"} /></mesh> ))}</group> ); };

const explotingbuttonPage: react.fc = () => {const [partículas] = useState<Particle[]> (GenerateButtonParticles ()); const [state, setState] = useState <"inactivo" | "explotar"> ("inactivo"); const handLecLick = () => {if (state === "inactivo") {setState ("explotar"); setTimeOut (() => setState ("inactivo"), partícula_time); }}; devolver ( <div style={{ width: "100vw", height: "100vh", background: "black" }}><Canvas camera={{ position: [0, 0, 8] }}><Stars radius={100} depth={50} count={1000} factor={4} fade /><ambientLight intensity={0.8} /><spotLight position={[10, 10, 10]} intensity={2} castShadow /><group onClick={handleClick}><ExplodingParticles particles={particles} state={state} /></group><OrbitControls /></Canvas></div> ); };