使用React和三个JS生成的GLB格式的控制3D模型！如何管理多个动画

npx create-react-app meshy-3D模型动画 -  themplate tesscript

CD Meshy-3D-Model-Animathion NPM安装三个 @react-three/fiber @react-three/drei

meshy-3d-model-animation/├-node_modules/├istar/├ispupppublic/├istry/ // 3D型号和相关文件├I-unik_glb // 3D模型文件夹├I- animation_pod_baby_groove_withskin.glb // glb files with dance Animation├I-andimation_superlove_pop_pop_dance_withskin.glb //带有舞蹈动画的GLB文件├-src/ src/ src/ src/ src/ src/ src/ components // ├──threeDdancinguncle/ // page-by-page文件夹│└│└││└│└││└││ //全局样式│ -  index.css //全局css├iscs.json.json//项目设置tsconfig.json // Typecript Settings└-

meshy-3d-model-animation/├-node_modules/└istar/└ispupppublic/└istry/ // 3D型号和相关文件└I-unik_glb // 3D模型文件夹├I- animation_pod_baby_groove_withskin.glb // with Dance Animation tance Animation└isnimation_superlove_pop_dance_withskin.glb//带有舞蹈动画的GLB文件

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

从“ ./threeddancinguncle/threeddancinguncle”进口ThreedDancinguncle；导出{threeddancinguncle}

// ===== //第1部分：导入所需的模块// ====导入react，{usestate，useffect}从“ react”;导入{canvas，useframe，usethree}，来自“@react-three/fiber”；从“@react-three/drei”中导入{orbitControls};导入{gltfloader}来自“三/示例/jsm/loaders/gltfloader”;导入{exrloader}来自“三个/示例/jsm/loaders/exrloader”;从“三”中导入 *为三个； // ==== //第2部分：定义常数// ==== //动画文件列表//存储每个动画的名称和路径const and insimation_files = [{name：“ pod baby groove”，path：“/mmodels/models/uncle_glb/animation_pod_pod_baby_baby_brove_groove_groove_with name name name name name name name nage annam gangem angal angal angal：：” “/models/uncle_glb/animation_gangnam_groove_withskin.glb”}，{name：“ pop dance”，path：“ /models/uncle_glb/animation_superlove_pop_pop_dance_dance_withs_withskin.glb”}，]; //模型文件的路径const default_animation_file = andimation_files [0] .path; //到达HDRI映像的路径（对于背景）const hdri_file =“/hdri/cobblestone_street_night_4k.exr”; //初始摄像机位置（x，y，z）const initial_camera_position = new three.vector3（10，4，10）; //型号放大量表const model_scale = 4; //初始模型旋转角度（关于y轴，在弧度中）const model_rotation_y = -1; //初始模型位置（X，Y，Z）const model_position = new Trix.Vector3（0，-2，0）; //灯光设置//定义环境，方向和点光的位置和强度const light_settings = {abirent：{强度：0.5}，//环境光强度方向：{位置：new triew.vector3（10，20，20，10），强度：1.5}，1.5}，// // // // //的位置和强度，// // // // // serive 3 extription：new triend ofters new triend：new triend：new free new 3 new triend：new freecter：new freew; 1.5}，//点光的位置和强度}; // ======= //第3部分：背景设置// ======= //用HDRI映像const背景设置场景背景：react.fc =（）=> {const {gl，scene} = usethree（）; useffect（（）=> {const hdrloader = new exrloader（）; const pmremgenerator = new trix.pmremgenerator（gl）; pmremgenerator.compileequiretectangularshader（）; PMREMGERATER。返回null; //无渲染目标}; // ==== //第4部分：模型和动画// ===== //加载主模型和管理动画const模型：react.fc <{currentAnimation：string}> =（{currentAnimation}）=> {const {const {conse {camera} = usethree（usethree（）; const [型号，setModel] = usestate<THREE.Group | null> （无效的）; const [搅拌机，setMixer] = usestate<THREE.AnimationMixer | null> （无效的）; //加载模型使用（（（）=> {const loader = new Gltfloader（）; loader.load（default_animation_file，（gltf）=> {const {const {const {cast {场景：loadedScene} = gltf; loadedscene.scale.scale.scale.set.set（model_scale，model_scale，model_scale，model_scale setece）side.s simes.y side。 //设置模型的旋转。 0）; //查看模型的中心）； //切换动画useffect（（）=> {if（！model ||！搅拌）return; const loader = new Gltfloader（）; loader.load（currentAnimation，（gltf）=> {const newAnimation = gltf.animation = gltf.animations [0]; if（newAnimation） action.reset（）。fadein（0.5）.play（）; //更新动画useframe（（（_，delta）=> {if（mixer）mixer.update（delta）;}）;返回模型？<primitive object={model} /> ： 无效的; //显示模型}; // ===== //第5部分：主组件// ===== //配置整个应用程序const threeddancinguncle：react.fc =（）=> {const [currentAnimation，setCurrentAnimation] = usestate（animation_files_files [0] .path）;返回 （<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/ *动画选择按钮 */} <div style={{ position: "absolute", top: "10px", left: "10px", zIndex: 10, // ボタンをCanvasの上に表示 }} > {animation_files.map（（（anim，index）=>（ <button key={index} onClick={() =>setCurrentAnimation（anim.path）} //切换动画样式= {{margin：“ 5px”，Padding：“ 10px”，fontsize：“ fontsize：“ fontsize：“ 14px”） “ 5px”，光标：“指针”，}}> {anim.name}</button> ）}}}</div><Canvas> {/ *背景组件 */}<Background /> {/ *模型和动画 */}<Model currentAnimation={currentAnimation} /> {/ *灯光设置 */} <ambientLight intensity={LIGHT_SETTINGS.ambient.intensity} /><directionalLight position={LIGHT_SETTINGS.directional.position} intensity={LIGHT_SETTINGS.directional.intensity} /><pointLight position={LIGHT_SETTINGS.point.position} intensity={LIGHT_SETTINGS.point.intensity} /> {/ *相机操作 */}<OrbitControls /></Canvas></div> ）； };导出默认的threeddancinguncle;

// ===== //第1部分：导入所需的模块// ====导入react，{usestate，useffect}从“ react”;导入{canvas，useframe，usethree}，来自“@react-three/fiber”；从“@react-three/drei”中导入{orbitControls};导入{gltfloader}来自“三/示例/jsm/loaders/gltfloader”;导入{exrloader}来自“三个/示例/jsm/loaders/exrloader”;从“三”中导入 *为三个；

// ==== //第2部分：定义常数// ==== //动画文件列表//存储每个动画的名称和路径const and insimation_files = [{name：“ pod baby groove”，path：“/mmodels/models/uncle_glb/animation_pod_pod_baby_baby_brove_groove_groove_with name name name name name name name nage annam gangem angal angal angal：：” “/models/uncle_glb/animation_gangnam_groove_withskin.glb”}，{name：“ pop dance”，path：“ /models/uncle_glb/animation_superlove_pop_pop_dance_dance_withs_withskin.glb”}，]; //模型文件的路径const default_animation_file = andimation_files [0] .path; //通往HDRI映像的路径（对于背景）const hdri_file =“/hdri/cobblestone_street_night_4k.exr”; //初始摄像机位置（x，y，z）const initial_camera_position = new three.vector3（10，4，10）; //型号放大量表const model_scale = 4; //模型的初始旋转角度（大约是y轴，在弧度中）const model_rotation_y = -1; //模型初始位置（X，Y，Z）const model_position = new Trix.Vector3（0，-2，0）; //灯光设置//定义环境，方向和点光const light_settings = {abirent：{强度：0.5}，//环境光强度方向的位置和强度：{0.5}：{位置：new triew.vector3（10，20，20，10），强度：1.5}，1.5}，// // //的位置和强度。 1.5}，//点光的位置和强度};

// ===== //第3部分：设置背景// ===== //使用HDRI映像const背景设置场景背景：react.fc =（）=> {const {gl，scene} = usethree（）; useffect（（）=> {const hdrloader = new exrloader（）; const pmremgenerator = new trix.pmremgenerator（gl）; pmremgenerator.compileequiretectangularshader（）; PMREMGERATER。返回null; //无渲染目标};

// ==== //第4部分：模型和动画// ===== //加载主模型和管理动画const模型：react.fc <{currentAnimation：string}> =（{currentAnimation}）=> {const {const {carter {camera} = usethree（usethree（）; const [型号，setModel] = usestate<THREE.Group | null> （无效的）; const [搅拌机，setMixer] = usestate<THREE.AnimationMixer | null> （无效的）; //加载模型使用（（（）=> {const Loader = new Gltfloader（）; loader.load（default_animation_file，（gltf）=> {const {const {const {cast {caste {caste：loadedScene} = gltf; loadedScene.scale.scale.scale.set.set（model_scale，model_scale，model_scale，model_scale secene; set.secene; //设置模型的旋转。 0）; //查看模型的中心）； //切换动画useffect（（）=> {if（！model ||！搅拌）return; const loader = new Gltfloader（）; loader.load（currentAnimation，（gltf）=> {const newAnimation = gltf.animation = gltf.animations [0]; if（newAnimation） action.reset（）。fadein（0.5）.play（）; //更新动画useframe（（（_，delta）=> {if（mixer）mixer.update（delta）;}）;返回模型？<primitive object={model} /> ： 无效的; //查看模型};

// ===== //第5部分：主组件// ===== //配置整个应用程序const threeddancinguncle：react.fc =（）=> {const [CurrentAnimation，setCurrentAnimation，setCurrentAnimation] = usestate（animation_files_files [0] .path）;返回 （<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/ *动画选择按钮 */} <div style={{ position: "absolute", top: "10px", left: "10px", zIndex: 10, // ボタンをCanvasの上に表示 }} > {animation_files.map（（（anim，index）=>（ <button key={index} onClick={() =>setCurrentAnimation（anim.path）} //切换动画样式= {{margin：“ 5px”，Padding：“ 10px”，fontsize：“ fontsize：“ fontsize：“ 14px”） “ 5px”，光标：“指针”，}}> {anim.name}</button> ）}}}</div><Canvas> {/ *背景组件 */}<Background /> {/ *模型和动画 */}<Model currentAnimation={currentAnimation} /> {/ *灯光设置 */} <ambientLight intensity={LIGHT_SETTINGS.ambient.intensity} /><directionalLight position={LIGHT_SETTINGS.directional.position} intensity={LIGHT_SETTINGS.directional.intensity} /><pointLight position={LIGHT_SETTINGS.point.position} intensity={LIGHT_SETTINGS.point.intensity} /> {/ *相机操作 */}<OrbitControls /></Canvas></div> ）； };导出默认的threeddancinguncle;