我尝试与React X 3.JS进行熊行走！轻松使用Meshy AI建模！

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

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

meshy-3d-model-ainimation/├-node_modules/├istim/├ispupl/ //型号/ // 3D型号和相关的文件│││─Cuddly_bear// bear的3D模型文件夹文件夹wallage_walking_walking_walking_walking_walking_walkingskin.fbx/ fbx│用于其他目的的threedmodelanimation //////////3d│││││││││││││││││││││││threedmodelanimation ////////fbx文件用于其他用途│ threedmodelanimation.tsx // main React组件│││││threedmodelanimation.css //页面样式表││││││││││I-index.ts.ts // index文件，用于导出页面，用于导出页面，用于导出页面│ app.css //全局样式│ -  index.css //全局css│istry.json.json//项目设置││││││j

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

从“ ./ ExplodingButtonPage/ExplodingButtonPage”导入爆炸buttonpage;从“ ./gamingroomlogin/gamingroomlogin”中进口gamingRoomlogin;从“ ./meshy3dmodel/meshy3dmodel”导入MESHY3DMODEL;从“ ./threedmodelanimation/threedmodelanimation”中导入threedmodelanimation；导出{ExplodingButtonPage，gamingRoomLogin，meshy3dmodel，threedmodelanimation}

// 3Dmodelanimation.tsx // ================================= //使用Meshy AI // ========================================= import from'useref，usesteff，usestate} from'react'react''导入{canvas，useframe}来自'@react-three/fiber';从'@react-three/drei'导入{orbitControls};导入{fbxloader}来自'三/示例/jsm/loaders/fbxloader';导入{AnimationMixer，Clock，Dubleside，vector3}从“三”;导入'./threedmodelanimation.css'; //常数定义//与模型相关的设置const moder_scale = 0.1; //模型量表const moder_initial_position = new vector3（0，0.5，0）; //模型const Model_rotation_x = -0.3的初始位置; //模型的X轴旋转//接地设置const grount_color ='green'; const ground_position = new vector3（0，0，0）; const ground_size = 200; //地面尺寸const ground_segments = 50; //地面部门//石材设置const stone_count = 50; //石头数量const stone_scale_min = 0.1; //最小量表const stone_scale_max = 0.6; //最大比例//相机和灯设置cont conter camera_position = new vector3（0，20，50）; const abient_light_intsente = 0.7; //环境光强度const point_light_position = new vector3（10，20，10）; const point_light_intsenty = 1; //点灯源强度//背景设置const background_color ='skyblue'; //背景颜色接口AnimateFbxModelProps {路径：String; iSplay？：布尔; } // ===== //第3部分：动画模型// ========<AnimatedFBXModelProps> =（{path，iSplaying = false}）=> {const mixer = useref<AnimationMixer | null> （无效的）; const clock = useref（new clock（））; const [型号，setModel] = usestate<any> （无效的）; const [动作，设定] = usestate<any> （无效的）; //更新每个帧useframe（（）=> {if（model && isplaying）{model.position.z += 0.05; //移动模型向前} if（mixer.current && isplaying）{const delta = conte.current.current.getDelta（conterrent.geteRent.uprent.updata）（// //加载FBX模型使用（（（）=> {const loader = new Fbxloader（）; loader.load（路径，（fbx）=> {if（！model）{fbx.scale.set（fbx.scale.set（model_scale，model_scale，model_scale，model_scale，model_scale）; fbx.popy.copy.copy.copy（mode_initial_initial_initial_initial_initial_initial_initial; fbxosition） Mixer.current =新的动画仪（FBX）; Console.Error（'错误加载FBX模型：'，错误）; // toggle播放/停止动画usefect（（）=> {if（action）{action.paused =！isplaying; if（isPlaying）{action.play（）;} else {action.stop（）;}}}}}，[iSplaying，action]）;返回模型？<primitive object={model} /> ： 无效的; }; // ===== //第4部分：地面设置// ======== const地面：react.fc =（）=> {return（return（ <mesh rotation={[-Math.PI / 2, 0, 0]} position={GROUND_POSITION}><planeGeometry args={[GROUND_SIZE, GROUND_SIZE, GROUND_SEGMENTS, GROUND_SEGMENTS]} /><meshStandardMaterial color={GROUND_COLOR} side={DoubleSide} /></mesh> ）； }; // ===== //第5部分：随机石安排// ============ const Randomstones：react.fc =（）=> {//在随机位置下生成石头，并在第一个呈现const [stones] = usestate（usestate] = usestate（（）=> => => {return.from（return.from）（{retange fluns：stone_count：stone_count} contrane = usestate（） 2; const y = tobl_position.y; const z = math.random（） <mesh key={`${x}-${z}`} position={[x, y, z]} scale={[scale, scale, scale]}><sphereGeometry args={[1, 8, 8]} /><meshStandardMaterial color="gray" /></mesh> ）； }）;返回<> {stones}</> ; }; // ==== //第6部分：主组件// ========== const threedmodelanimation：react.fc =（）=> {const [isPlaying，setIsplaying] = usestate（usestate（false）;返回 （<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setIsplaying（！iSplaying）}> {iSplaying？ '暂停动画'：'Play Animation'}</button> <Canvas camera={{ position: CAMERA_POSITION.toArray() }}><ambientLight intensity={AMBIENT_LIGHT_INTENSITY} /><pointLight position={POINT_LIGHT_POSITION.toArray()} intensity={POINT_LIGHT_INTENSITY} /><OrbitControls /> {/ *地面显示 */}<Ground /> {/ *随机石布 */}<RandomStones /> {/ *背景颜色设置 */}<color attach="background" args={[BACKGROUND_COLOR]} /> {/ *动画模型 */}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> ）； };导出默认的threedmodelanimation；

/ * 3dmodelanimation.css */ .CANVAS-CONTAINER {width：100VW;身高：100VH；显示：Flex; Jusify-content：中心；准项目：中心；背景色：＃000; }
  

// ====== //第2部分：常数定义// ====导入react，{useref，usefeft，usestate}来自'react';导入{canvas，useframe}来自'@react-three/fiber';从'@react-three/drei'导入{orbitControls};导入{fbxloader}来自'三/示例/jsm/loaders/fbxloader';导入{AnimationMixer，Clock，Dubleside，vector3}来自“三”；导入'./threedmodelanimation.css'; //常数定义//与模型相关的设置const moder_scale = 0.1; //模型量表const moder_initial_position = new vector3（0，0.5，0）; //模型const Model_rotation_x = -0.3的初始位置; // X-Axis旋转模型//接地设置const grount_color ='green'; const ground_position = new vector3（0，0，0）; const ground_size = 200; //地面尺寸const ground_segments = 50; //地面分区的数量//石材设置const stone_count = 50; //石头数量const stone_scale_min = 0.1; //石头的最小尺度const stone_scale_max = 0.6; //石头的最大比例//相机和灯设置cont conts camera_position = new vector3（0，20，50）; const abient_light_intsente = 0.7; //环境光强度const point_light_position = new vector3（10，20，10）; const point_light_intsenty = 1; //点灯源强度//背景设置const background_color ='skyblue'; //背景颜色接口AnimateFbxModelProps {路径：String; iSplay？：布尔; }

// ===== //第3部分：动画模型// =======<AnimatedFBXModelProps> =（{path，iSplaying = false}）=> {const mixer = useref<AnimationMixer | null> （无效的）; const clock = useref（new clock（））; const [型号，setModel] = usestate<any> （无效的）; const [动作，设定] = usestate<any> （无效的）; //更新每个帧useframe（（）=> {if（model && isplaying）{model.position.z += 0.05; //移动模型向前} if（mixer.current && isplaying）{const delta = conte.current.current.getDelta（conterrent.geteRent.uprent.updata）（// //加载FBX模型使用（（（）=> {const loader = new Fbxloader（）; loader.load（路径，（fbx）=> {if（！model）{fbx.scale.set（fbx.scale.set（model_scale，model_scale，model_scale，model_scale，model_scale）; fbx.popy.copy.copy.copy（mode_initial_initial_initial_initial_initial_initial_initial; fbxosition） Mixer.current =新的动画仪（FBX）; Console.Error（'错误加载FBX模型：'，错误）; // toggle播放/停止动画usefect（（）=> {if（action）{action.paused =！isplaying; if（isPlaying）{action.play（）;} else {action.stop（）;}}}}}，[iSplaying，action]）;返回模型？<primitive object={model} /> ： 无效的; };

// ===== //第4部分：地面设置// ======== const地面：react.fc =（）=> {return（return（ <mesh rotation={[-Math.PI / 2, 0, 0]} position={GROUND_POSITION}><planeGeometry args={[GROUND_SIZE, GROUND_SIZE, GROUND_SEGMENTS, GROUND_SEGMENTS]} /><meshStandardMaterial color={GROUND_COLOR} side={DoubleSide} /></mesh> ）； };

// ======= //第5部分：随机石安排// ======================= cont.fc =（）=> {// {//在随机位置下生成石头，并在首先呈现const [stones] = usestate（stones] = usestate（usestate）（（）=> {（）=> {return.from（return.from（rethere and and and）） 2; const y = tobl_position.y; const z = math.random（） <mesh key={`${x}-${z}`} position={[x, y, z]} scale={[scale, scale, scale]}><sphereGeometry args={[1, 8, 8]} /><meshStandardMaterial color="gray" /></mesh> ）； }）;返回<> {stones}</> ; };

// ===== //第6部分：主组件// ======== const threedmodelanimation：react.fc =（）=> {const [isPlaying，setIsplaying] = usestate（usestate（false）;返回 （<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setIsplaying（！iSplaying）}> {iSplaying？ '暂停动画'：'Play Animation'}</button> <Canvas camera={{ position: CAMERA_POSITION.toArray() }}><ambientLight intensity={AMBIENT_LIGHT_INTENSITY} /><pointLight position={POINT_LIGHT_POSITION.toArray()} intensity={POINT_LIGHT_INTENSITY} /><OrbitControls /> {/ *地面显示 */}<Ground /> {/ *随机石布 */}<RandomStones /> {/ *背景颜色设置 */}<color attach="background" args={[BACKGROUND_COLOR]} /> {/ *动画模型 */}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> ）； };导出默认的threedmodelanimation；