Control 3D models in glb format generated using Meshy AI using React and Three.js! How to manage multiple animations

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 ├── uncle_glb/ // 3D model folder ├── Animation_Gangnam_Groove_withSkin.glb // GLB files with dance animation ├── Animation_Pod_Baby_Groove_withSkin.glb // GLB files with dance animation ├── Animation_Superlove_Pop_Dance_withSkin.glb // GLB files with dance animation ├── src/ ├── components/ // Store common components if necessary │ ├── pages/ // Components managed on a page-by-page basis │ ├── ThreeDDancingUncle/ // Page-by-page folder │ │ └── ThreeDDancingUncle.tsx // 3D animation pages │ │ └── index.ts // Index file for exporting pages │ ├── App.tsx // App entry points │ ├── index.tsx // React rendering process │ ├── App.css // Global style │ ├── index.css // Global CSS ├── package.json // Project settings ├── tsconfig.json // TypeScript Settings └── README.md // Project Overview

meshy-3d-model-animation/ ├── node_modules/ └── public/ └── models/ // 3D models and related files └── uncle_glb/ // 3D model folder ├── Animation_Gangnam_Groove_withSkin.glb // GLB files with dance animation ├── Animation_Pod_Baby_Groove_withSkin.glb // GLB files with dance animation └── Animation_Superlove_Pop_Dance_withSkin.glb // GLB files with dance animation

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

import ThreeDDancingUncle from "./ThreeDDancingUncle/ThreeDDancingUncle"; export {ThreeDDancingUncle}

// ==== // PART 1: Import the required modules // ==== import React, { useState, useEffect } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader"; import * as THREE from "three"; // ==== // PART 2: Defining constants // ==== // List of animation files // Store the name and path of each animation const ANIMATION_FILES = [ { name: "Pod Baby Groove", path: "/models/uncle_glb/Animation_Pod_Baby_Groove_withSkin.glb" }, { name: "Gangnam Groove", path: "/models/uncle_glb/Animation_Gangnam_Groove_withSkin.glb" }, { name: "Pop Dance", path: "/models/uncle_glb/Animation_Superlove_Pop_Dance_withSkin.glb" }, ]; // Path to model file const DEFAULT_ANIMATION_FILE = ANIMATION_FILES[0].path; // Path to HDRI image (for background) const HDRI_FILE = "/hdri/cobblestone_street_night_4k.exr"; // Initial camera position (x, y, z) const INITIAL_CAMERA_POSITION = new THREE.Vector3(10, 4, 10); // Model scale magnification const MODEL_SCALE = 4; // Initial model rotation angle (about the y-axis, in radians) const MODEL_ROTATION_Y = -1; // Initial model position (x, y, z) const MODEL_POSITION = new THREE.Vector3(0, -2, 0); // Light settings // Define the ambient, directional, and point light position and intensity const LIGHT_SETTINGS = { ambient: { intensity: 0.5 }, // Ambient light intensity directional: { position: new THREE.Vector3(10, 20, 10), intensity: 1.5 }, // // The position and intensity of the directional light point: { position: new THREE.Vector3(0, 10, 0), intensity: 1.5 }, // The position and intensity of the point light }; // ===== // PART 3: Background settings // ===== // Set the scene background with HDRI image const Background: React.FC = () => { const { gl, scene } = useThree(); useEffect(() => { const hdrLoader = new EXRLoader(); const pmremGenerator = new THREE.PMREMGenerator(gl); pmremGenerator.compileEquirectangularShader(); hdrLoader.load(HDRI_FILE, (texture) => { texture.mapping = THREE.EquirectangularReflectionMapping; const envMap = pmremGenerator.fromEquirectangular(texture).texture; scene.background = envMap; // Set the entire scene background scene.environment = envMap; // Set the environment map // Free memory texture.dispose(); pmremGenerator.dispose(); }); }, [gl, scene]); return null; // No rendering target }; // ==== // PART 4: Models and animations // ==== // Loading the main model and managing animation const Model: React.FC<{ currentAnimation: string }> = ({ currentAnimation }) => { const { camera } = useThree(); const [model, setModel] = useState<THREE.Group | null> (null); const [mixer, setMixer] = useState<THREE.AnimationMixer | null> (null); // Load model useEffect(() => { const loader = new GLTFLoader(); loader.load(DEFAULT_ANIMATION_FILE, (gltf) => { const { scene: loadedScene } = gltf; loadedScene.scale.set(MODEL_SCALE, MODEL_SCALE, MODEL_SCALE); // Set the model size loadedScene.rotateY(MODEL_ROTATION_Y); // Set the model's initial rotation loadedScene.position.copy(MODEL_POSITION); // Set the initial position of the model setModel(loadedScene); const animationMixer = new THREE.AnimationMixer(loadedScene); setMixer(animationMixer); // Set the initial position of the camera camera.position.copy(INITIAL_CAMERA_POSITION); camera.lookAt(0, 4, 0); // View the center of the model }); }, [camera]); // Toggle animation useEffect(() => { if (!model || !mixer) return; const loader = new GLTFLoader(); loader.load(currentAnimation, (gltf) => { const newAnimation = gltf.animations[0]; if (newAnimation) { const action = mixer.clipAction(newAnimation); mixer.stopAllAction(); // Stop existing action action.reset().fadeIn(0.5).play(); // Play new action } }); }, [currentAnimation, model, mixer]); // Update animation useFrame((_, delta) => { if (mixer) mixer.update(delta); }); return model ?<primitive object={model} /> : null; // Show model }; // ==== // PART 5: Main Components // ==== // Configuring the entire application const ThreeDDancingUncle: React.FC = () => { const [currentAnimation, setCurrentAnimation] = useState(ANIMATION_FILES[0].path); return (<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/* Animation Select Button */} <div style={{ position: "absolute", top: "10px", left: "10px", zIndex: 10, // ボタンをCanvasの上に表示 }} > {ANIMATION_FILES.map((anim, index) => ( <button key={index} onClick={() =>setCurrentAnimation(anim.path)} // Toggle animation style={{ margin: "5px", padding: "10px", fontSize: "14px", background: "rgba(255, 255, 255, 0.8)", border: "1px solid #ccc", borderRadius: "5px", cursor: "pointer", }} > {anim.name}</button> ))}</div><Canvas> {/* Background Component */}<Background /> {/* Models and Animations */}<Model currentAnimation={currentAnimation} /> {/* Light Settings */} <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} /> {/* Camera operation */}<OrbitControls /></Canvas></div> ); }; export default ThreeDDancingUncle;

// ==== // PART 1: Import the required modules // ==== import React, { useState, useEffect } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader"; import * as THREE from "three";

// ==== // PART 2: Defining constants // ==== // List of animation files // Store the name and path of each animation const ANIMATION_FILES = [ { name: "Pod Baby Groove", path: "/models/uncle_glb/Animation_Pod_Baby_Groove_withSkin.glb" }, { name: "Gangnam Groove", path: "/models/uncle_glb/Animation_Gangnam_Groove_withSkin.glb" }, { name: "Pop Dance", path: "/models/uncle_glb/Animation_Superlove_Pop_Dance_withSkin.glb" }, ]; // Path to the model file const DEFAULT_ANIMATION_FILE = ANIMATION_FILES[0].path; // Path to the HDRI image (for background) const HDRI_FILE = "/hdri/cobblestone_street_night_4k.exr"; // Initial camera position (x, y, z) const INITIAL_CAMERA_POSITION = new THREE.Vector3(10, 4, 10); // Model scale magnification const MODEL_SCALE = 4; // Initial rotation angle of the model (about the y-axis, in radians) const MODEL_ROTATION_Y = -1; // Model initial position (x, y, z) const MODEL_POSITION = new THREE.Vector3(0, -2, 0); // Light settings // Define the position and intensity of ambient, directional, and point light const LIGHT_SETTINGS = { ambient: { intensity: 0.5 }, // Ambient light intensity directional: { position: new THREE.Vector3(10, 20, 10), intensity: 1.5 }, // / The position and intensity of the directional light point: { position: new THREE.Vector3(0, 10, 0), intensity: 1.5 }, // The position and intensity of the point light };

// ==== // PART 3: Setting the background // ==== // Set the scene background with HDRI image const Background: React.FC = () => { const { gl, scene } = useThree(); useEffect(() => { const hdrLoader = new EXRLoader(); const pmremGenerator = new THREE.PMREMGenerator(gl); pmremGenerator.compileEquirectangularShader(); hdrLoader.load(HDRI_FILE, (texture) => { texture.mapping = THREE.EquirectangularReflectionMapping; const envMap = pmremGenerator.fromEquirectangular(texture).texture; scene.background = envMap; // Set the entire scene background scene.environment = envMap; // Set the environment map // Free memory texture.dispose(); pmremGenerator.dispose(); }); }, [gl, scene]); return null; // No rendering target };

// ==== // PART 4: Models and Animation // ==== // Loading the main model and managing animation const Model: React.FC<{ currentAnimation: string }> = ({ currentAnimation }) => { const { camera } = useThree(); const [model, setModel] = useState<THREE.Group | null> (null); const [mixer, setMixer] = useState<THREE.AnimationMixer | null> (null); // Load model useEffect(() => { const loader = new GLTFLoader(); loader.load(DEFAULT_ANIMATION_FILE, (gltf) => { const { scene: loadedScene } = gltf; loadedScene.scale.set(MODEL_SCALE, MODEL_SCALE, MODEL_SCALE); // Set the model size loadedScene.rotateY(MODEL_ROTATION_Y); // Set the model's initial rotation loadedScene.position.copy(MODEL_POSITION); // Set the initial position of the model setModel(loadedScene); const animationMixer = new THREE.AnimationMixer(loadedScene); setMixer(animationMixer); // Set the initial position of the camera camera.position.copy(INITIAL_CAMERA_POSITION); camera.lookAt(0, 4, 0); // View the center of the model }); }, [camera]); // Toggle animation useEffect(() => { if (!model || !mixer) return; const loader = new GLTFLoader(); loader.load(currentAnimation, (gltf) => { const newAnimation = gltf.animations[0]; if (newAnimation) { const action = mixer.clipAction(newAnimation); mixer.stopAllAction(); // Stop existing action action.reset().fadeIn(0.5).play(); // Play new action } }); }, [currentAnimation, model, mixer]); // Update animation useFrame((_, delta) => { if (mixer) mixer.update(delta); }); return model ?<primitive object={model} /> : null; // View model };

// ==== // PART 5: Main Component // ==== // Configuring the entire application const ThreeDDancingUncle: React.FC = () => { const [currentAnimation, setCurrentAnimation] = useState(ANIMATION_FILES[0].path); return (<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/* Animation Select Button */} <div style={{ position: "absolute", top: "10px", left: "10px", zIndex: 10, // ボタンをCanvasの上に表示 }} > {ANIMATION_FILES.map((anim, index) => ( <button key={index} onClick={() =>setCurrentAnimation(anim.path)} // Toggle animation style={{ margin: "5px", padding: "10px", fontSize: "14px", background: "rgba(255, 255, 255, 0.8)", border: "1px solid #ccc", borderRadius: "5px", cursor: "pointer", }} > {anim.name}</button> ))}</div><Canvas> {/* Background Component */}<Background /> {/* Models and Animations */}<Model currentAnimation={currentAnimation} /> {/* Light Settings */} <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} /> {/* Camera operation */}<OrbitControls /></Canvas></div> ); }; export default ThreeDDancingUncle;