Explodierende 3D -Tasten!? Ich habe eine erstaunliche Benutzeroberfläche mit React x Three.js erstellt!

npx erstellen reag-app exploding-button-template typecript

CD Exploding-Button NPM installieren Sie drei @react-drei/faser @react-three/drei

Exploding-Button/ ├── Node_Modulen/ ├── public ├── ├──-Komponenten/ // Verzeichnis zum Hinzufügen anderer Komponenten │ ├──/ // für Dateien, die bei Bedarf Daten verwalten │ ├── Pagenton // Komponenten, die auf einer Basis-Basis-Basiskomponenten verwaltet werden. ExplodingButtonPage.tsx // Main page code │ │ └── ExplodingButtonPage.css // Style sheet │ ├── App.tsx // App entry points │ ├── index.tsx // React rendering process │ ├── App.css // Global Style │ ├── index.css // Global CSS ├── package.json ├── tsconfig.json // TypeScript -Einstellungen └── Readme.md // Projektübersicht

import './app.css'; Import {explodingButtonPage} aus './pages'; Funktion app () {return (<div className="App"><ExplodingButtonPage /></div> ); } standardmäßige App exportieren;

reag import, {useref, usustate} aus "react"; importieren {canvas, useFrame} aus "@react-three/faser"; Importieren {OrbitControls, Sterne, Text} aus "@react-three/drei"; Import * als drei von "drei"; // ====== // Teil 1: Konstante Definition // ===== const partikel_size = 0.1; // 1 Partikelgröße const partikel_num_width = 40; // Anzahl der Partikel (horizontal) const partikel_num_height = 20; // Anzahl der Partikel (horizontal) const partikel_num_thickness = 5; // Anzahl der Partikel (horizontal) const button_size_width = partikel_size * partikel_num_width; // Knopfgröße = 1 Partikel * Anzahl der Partikel const button_size_height = partikel_size * partikel_num_height; // Knopfgröße = 1 Partikel * Anzahl der Partikel const button_size_thickness = partikel_size * partikel_num_thickness; // Schaltfläche Größe = 1 Partikel * Anzahl der Partikel const text = "Klicken Sie mir !!"; // Text zur Anzeige const text_size = button_size_width / text.length; // Größe pro Zeichen const text_float_offset = 0,01; // die Entfernung, die es den Text ermöglicht, aus der Taste Oberfläche const Partikel_speed = 2.0 zu schweben; // Geschwindigkeit bei Explosion const partikel_time = 5 * 1000; // Dauer der Explosion in Sekunden const reset_speed = 0,05; // Geschwindigkeit zur Rückkehr zur ursprünglichen Position // ===== // Teil 2: Typdefinition // ==== Typ Partikel = {id: Nummer; // eindeutige ID -Startposition: Drei.Vector3; // Anfangspositionsposition: drei.Vektor3; // aktuelle Position: drei.Vektor3; // Explosionsgeschwindigkeit Vektorskala: Zahl; // Größe char?: String; // Zeichen für Textpartikel}; // ====== // Teil 3: Partikelerzeugungsfunktion // ===== const generateButtonPartikel = (): Partikel [] => {const Partikel: Partikel [] = []; // --- Generate button particles --- for (let x = 0; x < PARTICLE_NUM_WIDTH; x++) { for (let y = 0; y < PARTICLE_NUM_HEIGHT; y++) { for (let z = 0; z < PARTICLE_NUM_THICKNESS; z++) { const position = new THREE.Vector3( x * PARTICLE_SIZE - BUTTON_SIZE_WIDTH / 2, y * Partikel_size - button_size_height / 2, z * partikel_size); 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: PARTICLE_SIZE, }); }}} //. 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, }); Partikel zurückgeben; }; // ===== // Teil 4: Partikelzeichnungskomponenten // ====== const explodingPartikel: react.fc <{Partikel: Partikel []; Zustand: String}> = ({Partikel, Zustand}) => {const GroupRef = Useref<THREE.Group> (NULL); // useFrame: Verarbeitung aller Rahmen (Explosion oder Rückkehr zur Anfangsposition) UseFrame ((_, Delta) => {GroupRef.Current? Child.Position.Add (Partikel.Verocity.Clone (). MultiPlyScalar (Delta)); }); zurückkehren (<group ref={groupRef}> {Partikel.MAP ((Partikel) => Partikel.Char? (// Textpartikel <group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {Partikel.char}</Text></group> ): (// knopfförmige Partikel <mesh key={particle.id} position={particle.position} userData={{ particle }}><boxGeometry args={[particle.scale, particle.scale, particle.scale]} /><meshStandardMaterial color={"#3498db"} /></mesh> ))}</group> ); }; // ===== // Teil 5: Hauptkomponenten // ===== Const ExplodingButtonPage: react.fc = () => {const [Partikel] = Usestate<Particle[]> (generateButtonParticles ()); const [state, setState] = useSestate <"idle" | "Explode"> ("Idle"); const handleclick = () => {if (state === "idle") {setState ("explode"); setTimeout (() => setState ("idle"), partikel_time); }}; zurückkehren ( <div style={{ width: "100vw", height: "100vh", background: "black" }}><Canvas camera={{ position: [0, 0, 8] }}> {/ * Hintergrundeffekt */} <Stars radius={100} depth={50} count={1000} factor={4} fade /><ambientLight intensity={0.8} /><spotLight position={[10, 10, 10]} intensity={2} castShadow /> {/ * Partikelanzeige */}<group onClick={handleClick}><ExplodingParticles particles={particles} state={state} /></group> {/ * Kameraoperation */}<OrbitControls /></Canvas></div> ); }; Exportieren Sie Standard ExplodingButtonPage;

reag import, {useref, usustate} aus "react"; importieren {canvas, useFrame} aus "@react-three/faser"; Importieren {OrbitControls, Sterne, Text} aus "@react-three/drei"; Import * als drei von "drei"; // ====== // Teil 1: Konstante Definition // ===== const partikel_size = 0.1; // 1 Partikelgröße const partikel_num_width = 40; // Anzahl der Partikel (horizontal) const partikel_num_height = 20; // Anzahl der Partikel (horizontal) const partikel_num_thickness = 5; // Anzahl der Partikel (horizontal) const button_size_width = partikel_size * partikel_num_width; // Knopfgröße = 1 Partikel * Anzahl der Partikel const button_size_height = partikel_size * partikel_num_height; // Knopfgröße = 1 Partikel * Anzahl der Partikel const button_size_thickness = partikel_size * partikel_num_thickness; // Schaltfläche Größe = 1 Partikel * Anzahl der Partikel const text = "Klicken Sie mir !!"; // Text zur Anzeige const text_size = button_size_width / text.length; // Größe pro Zeichen const text_float_offset = 0,01; // die Entfernung, die es den Text ermöglicht, aus der Taste Oberfläche const Partikel_speed = 2.0 zu schweben; // Geschwindigkeit bei Explosion const partikel_time = 5 * 1000; // Dauer der Explosion (Sekunden) const reset_speed = 0,05; // Geschwindigkeit, um in die ursprüngliche Position zurückzukehren

Typ Partikel = {ID: Nummer; // Eindeutige Kennung für jede Partikelstartposition: drei.Vektor3; // Anfangspositionsposition: drei.Vektor3; // Strompositionsgeschwindigkeit: drei.Vektor3; // Bewegungsgeschwindigkeitsskala: Zahl; // Größe char?: String; // Zeichen für Textpartikel};

const generateButtonPartikel = (): partikel [] => {const Partikel: Partikel [] = []; // Würfelpartikel für Taste erzeugen (sei x = 0; x <partikel_num_width; x ++) {für (lass y = 0; y <partikel_num_height; y ++) {für (let z = 0; z <Partikel_Num_Thickness; z ++) {const Position = new / vector3 (x * partikel_size_size_size_size_size- Partikel_size - button_size_height / 2, z * partikel_size); 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: PARTICLE_SIZE, }); }}} // Textpartikel text erstellen. Position.clone (), Geschwindigkeit: Neue drei.Vektor3 ((math.random () - 0.5) * partikel_speed, (math.random () - 0.5) * partikel_speed, (math.random () - 0.5) * Partikel_speed), skala: text_size, char,}); Partikel zurückgeben; };

const explodingPartikel: react.fc <{Partikel: Partikel []; Zustand: String}> = ({Partikel, Zustand}) => {const GroupRef = Useref<THREE.Group> (NULL); useFrame ((_, delta) => {GroupRef.Current? child.position.lerp (Partikel.StartPosition, reset_speed); zurückkehren (<group ref={groupRef}> {Partikel.MAP ((Partikel) => Partikel.char? ( <group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {Partikel.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 explodingbuttonpage: react.fc = () => {const [Partikel] = Usestate<Particle[]> (generateButtonParticles ()); const [state, setState] = useSestate <"idle" | "Explode"> ("Idle"); const handleclick = () => {if (state === "idle") {setState ("explode"); setTimeout (() => setState ("idle"), partikel_time); }}; zurückkehren ( <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> ); };