Boutons 3D explosifs !? J'ai créé une interface utilisateur incroyable en utilisant React x Three.js!

NPX Create-REACT-APP EXPLODING-BUTTON - Template TypeScript

CD Explose-bouton NPM Installez trois @ React-Three / Fiber @ React-Three / Drei

Button explosif / ├── node_modules / ├── public / ├── Src / ├── Composants // répertoire pour ajouter d'autres composants │ ├sé ExplosedingButtonPage.TSX // Code de page principale │ │ └── Explosebuttonpage.css // Feuille de style │ ├fiquement app.tsx // Points de saisie de l'application │ ├fique Tsconfig.json // Paramètres de type TypeScript └fique

import './app.css'; import {ExplosedingButtonPage} de './pages'; fonction app () {return (<div className="App"><ExplodingButtonPage /></div> )); } Exporter l'application par défaut;

Importer React, {Useref, UseState} de "React"; import {canvas, useFrame} de "@ react-trois / fibre"; import {orbitControls, étoiles, texte} de "@ react-trois / drei"; import * comme trois de "trois"; // ===== // Partie 1: Définition constante // ==== CONS PARTICLE_SIZE = 0,1; // 1 taille de particule const particule_num_width = 40; // Nombre de particules (horizontal) const particule_num_height = 20; // Nombre de particules (horizontal) const particule_num_thickness = 5; // Nombre de particules (horizontal) const Button_size_width = particule_size * particule_num_width; // Button Size = 1 Particle * Nombre de particules const Button_Size_Height = particule_size * particule_num_height; // Button Size = 1 Particle * Nombre de particules const Button_size_thickness = particule_size * particule_num_thickness; // Size du bouton = 1 particule * Nombre de particules const text = "cliquez sur moi !!"; // Texte pour afficher const text_size = Button_size_width / text.length; // taille par caractère const ixt_float_offset = 0,01; // la distance qui permet au texte de flotter à partir de la surface du bouton const particule_speed = 2.0; // vitesse à l'explosion const particule_time = 5 * 1000; // Durée de l'explosion en secondes const-reset_speed = 0,05; // Vitesse pour revenir à la position d'origine // ===== // Partie 2: Définition de type // ==== Type particule = {id: numéro; // ID unique StartPosition: Three.Vector3; // position de position initiale: trois.vector3; // Position actuelle: trois.vector3; // Échelle de vecteur de vitesse d'explosion: numéro; // taille char ?: String; // caractères pour les particules de texte}; // ===== // Partie 3: Fonction de génération de particules // ==== Const GenerateButtonParticules = (): Particule [] => {const les particules: particule [] = []; // --- générer des particules de bouton --- pour (que x = 0; x <particule_num_width; x ++) {pour (laissez y = 0; y <particule_num_hickness; y ++) {pour (laissez z = 0; z <particule_num_thickness; z ++) {const position = new, yevect Particule_size - Button_size_height / 2, z * particule_size); Particles.push ({id: particles.length, startPosition: position.clone (), position: position.clone (), Velocity: new Three.vector3 ((math.random () - 0,5) * particule_speed, (math.random () - 0,5) * particule_peed, (math.random () - 0,5) * Particle_peed), échelle: (Math.Random () - 0,5) * Particle_peed), Scale: (Math.Random () - 0,5) * Particle_Speed), Scale: Untice_Size,;); }}} // --- Générer une particule de texte --- text.split (""). Foreach ((char, i) => {const position = new Three.Vector3 (i * text_size - Button_size_width / 2 + text_size / 2, 0, // y-axis Center Button_size_thickness + text_float_offset // z-axis: lift de la surface); 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) * particule_peed, (math.random () - 0,5) * Particle_peed), échelle: (Math.RandoM () - 0,5) * Particle_peed), Scale: CHART_TY); }); les particules de retour; }; // ==== // Partie 4: Composants de dessin de particules // ====== Const Explosedingparticules: react.fc <{particules: particule []; état: String}> = ({Particles, état}) => {const GroupRef = useref<THREE.Group> (nul); // useFrame: Traitement de chaque trame (explosion ou retour à la position initiale) useFrame ((_, delta) => {groupRef.current? .children.Foreach ((child) => {const particule = child.userdata.Particle comme particule; if (state === "Exploder") {// Explosion: Moving basée sur Velocity Vector Child.Position.Add (Particle.Velocity.Clone (). MultiplyScalar (Delta);} Else {// Retour à la position initiale Child.Position.LERP (Particle.StartPosition, Reset_Speed); }); retour (<group ref={groupRef}> {particles.map ((particule) => particule.char? (// Particule de texte <group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {particule.char}</Text></group> ): (// particules en forme de bouton <mesh key={particle.id} position={particle.position} userData={{ particle }}><boxGeometry args={[particle.scale, particle.scale, particle.scale]} /><meshStandardMaterial color={"#3498db"} /></mesh> ))}</group> )); }; // ==== // Partie 5: Composants principaux // ===== const ExpllodingButtonPage: react.fc = () => {const [particules] = UseState<Particle[]> (generateButtonParticles ()); const [état, setState] = UseState <"Idle" | "exploser"> ("inactif"); const handleclick = () => {if (state === "idle") {setState ("explosage"); setTimeout (() => setState ("Idle"), particule_time); }}; retour ( <div style={{ width: "100vw", height: "100vh", background: "black" }}><Canvas camera={{ position: [0, 0, 8] }}> {/ * Effet de fond * /} <Stars radius={100} depth={50} count={1000} factor={4} fade /><ambientLight intensity={0.8} /><spotLight position={[10, 10, 10]} intensity={2} castShadow /> {/ * Affichage des particules * /}<group onClick={handleClick}><ExplodingParticles particles={particles} state={state} /></group> {/ * Fonctionnement de la caméra * /}<OrbitControls /></Canvas></div> )); }; Exporter par défaut ExpllodingButtonPage;

Importer React, {Useref, UseState} de "React"; import {canvas, useFrame} de "@ react-trois / fibre"; import {orbitControls, étoiles, texte} de "@ react-trois / drei"; import * comme trois de "trois"; // ===== // Partie 1: Définition constante // ==== CONS PARTICLE_SIZE = 0,1; // 1 taille de particule const particule_num_width = 40; // Nombre de particules (horizontal) const particule_num_height = 20; // Nombre de particules (horizontal) const particule_num_thickness = 5; // Nombre de particules (horizontal) const Button_size_width = particule_size * particule_num_width; // Button Size = 1 Particle * Nombre de particules const Button_Size_Height = particule_size * particule_num_height; // Button Size = 1 Particle * Nombre de particules const Button_size_thickness = particule_size * particule_num_thickness; // Size du bouton = 1 particule * Nombre de particules const text = "cliquez sur moi !!"; // Texte pour afficher const text_size = Button_size_width / text.length; // taille par caractère const ixt_float_offset = 0,01; // la distance qui permet au texte de flotter à partir de la surface du bouton const particule_speed = 2.0; // vitesse à l'explosion const particule_time = 5 * 1000; // Durée de l'explosion (secondes) const-reset_speed = 0,05; // vitesse pour revenir à la position d'origine

type particule = {id: numéro; // Identifiant unique pour chaque position de démarrage des particules: trois.vector3; // position de position initiale: trois.vector3; // Vitesse de position de courant: trois.vector3; // Échelle de vitesse de déplacement: numéro; // taille char ?: String; // Caractère pour les particules de texte};

const generateButtonParticules = (): particule [] => {const les particules: particule [] = []; // générer des particules de cube pour le bouton pour (Soit x = 0; x <particule_num_width; x ++) {pour (que y = 0; y <particule_num_height; y ++) {pour (laissez z = 0; z <particulaire_num_thickness; z ++) {const position = new, newVect Particule_size - Button_size_height / 2, z * particule_size); Particles.push ({id: particles.length, startPosition: position.clone (), position: position.clone (), Velocity: new Three.vector3 ((math.random () - 0,5) * particule_speed, (math.random () - 0,5) * particule_peed, (math.random () - 0,5) * Particle_peed), échelle: (Math.Random () - 0,5) * Particle_peed), Scale: (Math.Random () - 0,5) * Particle_Speed), Scale: Untice_Size,;); }}} // Créer un texte de particules de texte. position: position.clone (), Velocity: new Three.Vector3 ((math.random () - 0,5) * Particle_speed, (math.random () - 0,5) * Particle_speed, (math.random () - 0,5) * particule_speed), échelle: text_size, char,});}); les particules de retour; };

const Explosedingparticules: react.fc <{particules: particule []; état: String}> = ({Particles, état}) => {const GroupRef = useref<THREE.Group> (nul); useFrame ((_, delta) => {groupRef.current? .children.ForEach ((child) => {const particule = child.userdata.Particle as Particle; if (state === "explose") {child.posposition.add (particule.velocity.clone (). child.position.lerp (particule.startPosition, reset_speed);}});}); retour (<group ref={groupRef}> {particules.map ((particule) => particule.char? ( <group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {particule.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 ExplosedingButtonPage: react.fc = () => {const [particules] = UseState<Particle[]> (generateButtonParticles ()); const [état, setState] = UseState <"Idle" | "exploser"> ("inactif"); const handleclick = () => {if (state === "idle") {setState ("explosage"); setTimeout (() => setState ("Idle"), particule_time); }}; retour ( <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> )); };