爆炸3D按钮！？我使用react x 3.js创建了一个惊人的UI！

npx create-react-app爆炸式按钮-Template打字稿

CD爆炸按钮NPM安装三个 @react-three/fiber @react-three/drei

爆炸按钮/├──node_modules/├-公共/├istrc/ src/ src/├istrents/ //目录，用于添加其他组件的目录thing-data /// data// //对于必要时管理数据的文件///页面//页面/ //页面上的组件，page-by-by-page基础上的组件and-by-page基础│- deckodingbuttonpage.tsx //主页代码││││││││└││││││││ ├ - ─tsconfig.json //打字稿设置└ -  readme.md // project概述

导入'./app.css';从'./pages'import {explodingButtonPage};功能应用程序（）{返回（<div className="App"><ExplodingButtonPage /></div> ）； }导出默认应用程序;

导入react，{useref，usestate}来自“反应”；从“@react-three/fiber”中导入{canvas，useframe};导入{orbitControls，start，text}来自“@react-three/drei”；从“三”中导入 *为三个； // ====== //第1部分：常数定义// ======== const restry_size = 0.1; // 1个粒度const restry_num_width = 40; //粒子数（水平）const restry_num_height = 20; //粒子数（水平）const restry_num_thickness = 5; //粒子的数量（水平）const buttor_size_width = restric_size * erention_num_width; //按钮尺寸= 1个粒子 *粒子const butt_size_height = restric_size * earth_num_height; //按钮尺寸= 1个粒子 *粒子数量const butt_size_thickness = rentary_size * erention_num_thickness; //按钮大小= 1个粒子 *粒子const text =“单击我！”; // text显示const text_size = button_size_width / text.length; //大小每个字符const text_float_offset = 0.01; //允许文本从按钮表面const const restry_speed = 2.0浮动的距离; //爆炸式const粒子= 5 * 1000的速度; //爆炸的持续时间在秒内const reset_speed = 0.05; //返回原始位置的速度// ========= //第2部分：键入定义// ====键入type present = {id：numbers; //唯一的ID启动位置：trix.vector3; //初始位置：三。vector3; //当前位置：三。vector3; //爆炸速度量表：数字； //大小char？：string; //文本粒子的字符}; // ====== //第3部分：粒子生成函数// ===== const const generateButtonparticles =（）：粒子[] => {const粒子：粒子[] = []; // ---生成按钮粒子--- for（令x = 0; x <arther_num_width; x ++）{for（令y = 0; y <arther_num_height; y ++）{for（let z = 0; z = 0; z <arther_num_thickness; z ++ s+z ++） button_size_height / 2，z * ernation_size）; preamles.push（{id {id：promentles.length，startPosition：position.clone（），位置：position.clone（），速度：new trix trix.vector3（（Math.random（） -  0.5） * ernation_speed * erention_speed，（Math.random（Math.random（） -  0.5） * arth.random（） }}} // ---生成文本的粒子---- text.split（“”）。颗粒。push（{id：promentles.length，startPosition：position.clone（），位置：position.clone（），速度：new Trix trix vector3（（Math.random（） -  0.5） * erenth_speed * erention_speed，（atmation_random（Math.random（） -  0.5） }）;返回颗粒； }; // ===== //第4部分：粒子绘图组件// ========== const爆炸粒子：react.fc <{粒子：粒子[];状态：字符串}> =（{{粒子，状态}）=> {const groupRef = useref<THREE.Group> （无效的）; // USEFRAME：处理每个帧（爆炸或返回初始位置）useFrame（（（_，delta）=> {groupRef.current？.children..children.foreach（（child）=> {const restry.userdata.particle作为粒子; child.position.Add（粒子。 }）;返回 （<group ref={groupRef}> {extremles.map（（粒子）=>粒子.char？（//文本粒子<group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {prones.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> ）； }; // ===== //第5部分：主组件// ======= const deckdodingbuttonpage：react.fc =（）=> {const [presentes [ematerles] = usestate<Particle[]> （生成Buttonparticles（））; const [state，setState] = usestate <“ idle” | “爆炸”>（“ idle”）; const handleclick =（）=> {if（state ===“ idle”）{setState（“ explode”）; settimeout（（）=> setState（“ idle”），erenth_time）; }};返回 （ <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> ）； };导出默认爆炸ButtonPage;

导入react，{useref，usestate}来自“反应”；从“@react-three/fiber”中导入{canvas，useframe};导入{orbitControls，start，text}来自“@react-three/drei”；从“三”中导入 *为三个； // ====== //第1部分：常数定义// ======== const restry_size = 0.1; // 1个粒度const restry_num_width = 40; //粒子数（水平）const restry_num_height = 20; //粒子数（水平）const restry_num_thickness = 5; //粒子的数量（水平）const button_size_width = rentary_size * erention_num_width; //按钮尺寸= 1个粒子 *粒子const butt_size_height = restric_size * earth_num_height; //按钮尺寸= 1个粒子 *粒子数量const butt_size_thickness = rentary_size * erention_num_thickness; //按钮大小= 1个粒子 *粒子const text =“单击我！”; // text显示const text_size = button_size_width / text.length; //大小每个字符const text_float_offset = 0.01; //允许文本从按钮表面const const restry_speed = 2.0浮动的距离; //爆炸式const粒子= 5 * 1000的速度; //爆炸持续时间（秒）const reset_speed = 0.05; //恢复原始位置的速度

类型粒子= {id：number; //每个粒子起始位置的唯一标识符：trix.vector3; //初始位置：三。vector3; //当前位置速度：三。vector3; //运动速度量表：数字； //大小char？：string; //文本粒子的字符};

const generatebuttonparticles =（）：粒子[] => {const粒子：粒子[] = []; //生成用于按钮的立方体粒子（令x = 0; x <arther_num_width; x ++）{for（令y = 0; y <arthen_num_height; y ++）{for（令z = 0; z = 0; z <arther_num_thickness; z ++ s+z ++） button_size_height / 2，z * ernation_size）; preamles.push（{id {id：promentles.length，startPosition：position.clone（），位置：position.clone（），速度：new trix trix.vector3（（Math.random（） -  0.5） * ernation_speed * erention_speed，（Math.random（Math.random（） -  0.5） * arth.random（） }}} //创建文本粒子text.split（“”）。位置。Clone（），速度：新的三。返回颗粒； };

const爆炸粒子：react.fc <{粒子：粒子[];状态：字符串}> =（{{粒子，状态}）=> {const groupRef = useref<THREE.Group> （无效的）; useframe（（（（_，delta）=> {groupRef.current？.children.foreach（（（child）=> {const restry.contry.userdata.particle作为粒子; if（state ===“爆炸”） child.position.lerp（reset.startposition，reset_speed）;}}）;返回 （<group ref={groupRef}> {preachles.map（（（粒子）=>粒子.char？） <group key={particle.id} position={particle.position} userData={{ particle }}><Text fontSize={particle.scale} color="white"> {prones.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 [粒子] = usestate<Particle[]> （生成Buttonparticles（））; const [state，setState] = usestate <“ idle” | “爆炸”>（“ idle”）; const handleclick =（）=> {if（state ===“ idle”）{setState（“ explode”）; settimeout（（）=> setState（“ idle”），erenth_time）; }};返回 （ <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> ）； };