I tried making bears walk with React x Three.js! Easy 3D modeling with Meshy AI!

npx create-react-app meshy-3d-model-animation --template typescript

cd meshy-3d-model-animathion npm install three @react-three/fiber @react-three/drei

meshy-3d-model-animation/ ├── node_modules/ ├── public/ ├── models/ // 3D models and related files │ ├── cuddly_bear/ // Bear's 3D model folder │ │ ├── Animation_Walking_withSkin.fbx // FBX files with walking animation │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ThreeDModelAnimation/ // FBX files for other purposes │ │ │ │ │ │ │ ThreeDModelAnimation/ // 3D animation page │ │ │ │ │ │ │ │ │ │ │ │ │ │ ThreeDModelAnimation.tsx // Main React component │ │ │ │ │ ThreeDModelAnimation.css // Page style sheet │ │ │ │── index.ts // Index file for exporting pages │ │── App.tsx // App entry points │ │── index.ts x // React rendering processing │ │── App.css // Global style │ │── index.css // Global CSS │── package.json // Project settings │── tsconfig.json // TypeScript settings └── README.md // Project overview

import './App.css'; import { ThreeDModelAnimation } from './pages'; function App() { return (<div className="App"><ThreeDModelAnimation /></div> ); } export default App;

import ExplodingButtonPage from "./ExplodingButtonPage/ExplodingButtonPage"; import GamingRoomLogin from "./GamingRoomLogin/GamingRoomLogin"; import Meshy3DModel from "./Meshy3DModel/Meshy3DModel"; import ThreeDModelAnimation from "./ThreeDModelAnimation/ThreeDModelAnimation"; export {ExplodingButtonPage, GamingRoomLogin, Meshy3DModel, ThreeDModelAnimation}

// 3DModelAnimation.tsx // ==== // PART 1: Generate a model with Meshy // ==== // Generate a 3D model using Meshy AI // ==== // PART 2: Constant definition // ==== import React, { useRef, useEffect, useState } from 'react'; import { Canvas, useFrame } from '@react-three/fiber'; import { OrbitControls } from '@react-three/drei'; import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'; import { AnimationMixer, Clock, DoubleSide, Vector3 } from 'three'; import './ThreeDModelAnimation.css'; // Constant definition // Model related settings const MODEL_SCALE = 0.1; // Model scale const MODEL_INITIAL_POSITION = new Vector3(0, 0.5, 0); // Initial position of the model const MODEL_ROTATION_X = -0.3; // X-axis rotation of the model // Ground setting const GROUND_COLOR = 'green'; const GROUND_POSITION = new Vector3(0, 0, 0); const GROUND_SIZE = 200; // Ground size const GROUND_SEGMENTS = 50; // Ground divisions // Stone setting const STONE_COUNT = 50; // Number of stones const STONE_SCALE_MIN = 0.1; // Minimum Scale const STONE_SCALE_MAX = 0.6; // Maximum Scale // Camera and Light Settings const CAMERA_POSITION = new Vector3(0, 20, 50); const AMBIENT_LIGHT_INTENSITY = 0.7; // Ambient Light Intensity const POINT_LIGHT_POSITION = new Vector3(10, 20, 10); const POINT_LIGHT_INTENSITY = 1; // Point light source strength // Background setting const BACKGROUND_COLOR = 'skyblue'; // Background color interface AnimatedFBXModelProps { path: string; isPlaying?: boolean; } // ==== // PART 3: Animated Model // ===== const AnimatedFBXModel: React.FC<AnimatedFBXModelProps> = ({ path, isPlaying = false }) => { const mixer = useRef<AnimationMixer | null> (null); const clock = useRef(new Clock()); const [model, setModel] = useState<any> (null); const [action, setAction] = useState<any> (null); // Update the model position and animation for each frame useFrame(() => { if (model && isPlaying) { model.position.z += 0.05; // Move the model forward } if (mixer.current && isPlaying) { const delta = clock.current.getDelta(); mixer.current.update(delta); // Update the animation } }); // Load FBX model useEffect(() => { const loader = new FBXLoader(); loader.load( path, (fbx) => { if (!model) { fbx.scale.set(MODEL_SCALE, MODEL_SCALE, MODEL_SCALE); fbx.position.copy(MODEL_INITIAL_POSITION); fbx.rotateX(MODEL_ROTATION_X); } mixer.current = new AnimationMixer(fbx); // Set if animation if (fbx.animations.length > 0) { const newAction = mixer.current.clipAction(fbx.animations[0]); newAction.paused = !isPlaying; setAction(newAction); } setModel(fbx); }, undefined, (error) => { console.error('Error loading FBX model:', error); } ); }, [path]); // Toggle playback/stop animation useEffect(() => { if (action) { action.paused = !isPlaying; if (isPlaying) { action.play(); } else { action.stop(); } } }, [isPlaying, action]); return model ?<primitive object={model} /> : null; }; // ==== // PART 4: Ground settings // ===== const Ground: React.FC = () => { 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> ); }; // ==== // PART 5: Random Stone Arrangement // ===== const RandomStones: React.FC = () => { // Generate stones at random positions and scales on first rendering const [stones] = useState(() => { return Array.from({ length: STONE_COUNT }, () => { const x = Math.random() * GROUND_SIZE - GROUND_SIZE / 2; const y = GROUND_POSITION.y; const z = Math.random() * GROUND_SIZE - GROUND_SIZE / 2; const scale = Math.random() * (STONE_SCALE_MAX - STONE_SCALE_MIN) + STONE_SCALE_MIN; return ( <mesh key={`${x}-${z}`} position={[x, y, z]} scale={[scale, scale, scale]}><sphereGeometry args={[1, 8, 8]} /><meshStandardMaterial color="gray" /></mesh> ); }); return <>{stones}</> ; }; // ==== // PART 6: Main Components // ===== const ThreeDModelAnimation: React.FC = () => { const [isPlaying, setIsPlaying] = useState(false); return (<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setIsPlaying(!isPlaying)} > {isPlaying ? 'Pause Animation' : '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 display */}<Ground /> {/* Random stone arrangement */}<RandomStones /> {/* Background color setting */}<color attach="background" args={[BACKGROUND_COLOR]} /> {/* Animation model */}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> ); }; export default ThreeDModelAnimation;

/* 3DModelAnimation.css */ .canvas-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000; }
  

// ==== // PART 2: Constant definition // ==== import React, { useRef, useEffect, useState } from 'react'; import { Canvas, useFrame } from '@react-three/fiber'; import { OrbitControls } from '@react-three/drei'; import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'; import { AnimationMixer, Clock, DoubleSide, Vector3 } from 'three'; import './ThreeDModelAnimation.css'; // Constant definition // Model related settings const MODEL_SCALE = 0.1; // Model scale const MODEL_INITIAL_POSITION = new Vector3(0, 0.5, 0); // Initial position of model const MODEL_ROTATION_X = -0.3; // Model X-axis rotation // Ground setting const GROUND_COLOR = 'green'; const GROUND_POSITION = new Vector3(0, 0, 0); const GROUND_SIZE = 200; // Ground size const GROUND_SEGMENTS = 50; // Number of ground divisions // Stone settings const STONE_COUNT = 50; // Number of stones const STONE_SCALE_MIN = 0.1; // Minimum scale of stones const STONE_SCALE_MAX = 0.6; // Maximum scale of stones // Camera and light settings const CAMERA_POSITION = new Vector3(0, 20, 50); const AMBIENT_LIGHT_INTENSITY = 0.7; // Ambient light intensity const POINT_LIGHT_POSITION = new Vector3(10, 20, 10); const POINT_LIGHT_INTENSITY = 1; // Point light source strength // Background setting const BACKGROUND_COLOR = 'skyblue'; // Background color interface AnimatedFBXModelProps { path: string; isPlaying?: boolean; }

// ==== // PART 3: Animated Model // ===== const AnimatedFBXModel: React.FC<AnimatedFBXModelProps> = ({ path, isPlaying = false }) => { const mixer = useRef<AnimationMixer | null> (null); const clock = useRef(new Clock()); const [model, setModel] = useState<any> (null); const [action, setAction] = useState<any> (null); // Update the model position and animation for each frame useFrame(() => { if (model && isPlaying) { model.position.z += 0.05; // Move the model forward } if (mixer.current && isPlaying) { const delta = clock.current.getDelta(); mixer.current.update(delta); // Update the animation } }); // Load FBX model useEffect(() => { const loader = new FBXLoader(); loader.load( path, (fbx) => { if (!model) { fbx.scale.set(MODEL_SCALE, MODEL_SCALE, MODEL_SCALE); fbx.position.copy(MODEL_INITIAL_POSITION); fbx.rotateX(MODEL_ROTATION_X); } mixer.current = new AnimationMixer(fbx); // Set if animation if (fbx.animations.length > 0) { const newAction = mixer.current.clipAction(fbx.animations[0]); newAction.paused = !isPlaying; setAction(newAction); } setModel(fbx); }, undefined, (error) => { console.error('Error loading FBX model:', error); } ); }, [path]); // Toggle playback/stop animation useEffect(() => { if (action) { action.paused = !isPlaying; if (isPlaying) { action.play(); } else { action.stop(); } } }, [isPlaying, action]); return model ?<primitive object={model} /> : null; };

// ==== // PART 4: Ground settings // ===== const Ground: React.FC = () => { 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> ); };

// ===== // PART 5: Random Stone Arrangement // ===== const RandomStones: React.FC = () => { // Generate stones at random positions and scales on first rendering const [stones] = useState(() => { return Array.from({ length: STONE_COUNT }, () => { const x = Math.random() * GROUND_SIZE - GROUND_SIZE / 2; const y = GROUND_POSITION.y; const z = Math.random() * GROUND_SIZE - GROUND_SIZE / 2; const scale = Math.random() * (STONE_SCALE_MAX - STONE_SCALE_MIN) + STONE_SCALE_MIN; return ( <mesh key={`${x}-${z}`} position={[x, y, z]} scale={[scale, scale, scale]}><sphereGeometry args={[1, 8, 8]} /><meshStandardMaterial color="gray" /></mesh> ); }); return <>{stones}</> ; };

// ==== // PART 6: Main Component // ===== const ThreeDModelAnimation: React.FC = () => { const [isPlaying, setIsPlaying] = useState(false); return (<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setIsPlaying(!isPlaying)} > {isPlaying ? 'Pause Animation' : '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 display */}<Ground /> {/* Random stone arrangement */}<RandomStones /> {/* Background color setting */}<color attach="background" args={[BACKGROUND_COLOR]} /> {/* Animation model */}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> ); }; export default ThreeDModelAnimation;