Contrôler les modèles 3D au format GLB généré à l'aide de Meshy AI en utilisant React et Three.js! Comment gérer plusieurs animations

NPX CREATE-REACT-APP MESHY-3D-MODEL-ANIMation - Template TypeScript

CD Meshy-3D-Model-Animathion NPM Installer trois @ React-Three / Fiber @ React-Three / Drei

Meshy-3d-model-animation / ├── node_modules / ├── Modèles publiques / ├fique // // modèles 3D et fichiers connexes ├séLa_Glb / // Folder des modèles 3D ├── Animation_gangnam_groove_withskin.glb // fichiers GLB avec animation de danse ├fique Animation_pod_baby_groove_withskin.glb // fichiers glb avec animation de danse ├fique ├── THREEDDANCHINGUNCLE / // Dossier Page-by-Page │ │ └── ThreeddancingUcle.TSX // Pages d'animation 3D │ │ └── Index.ts // Fichier d'index pour les pages d'exportation │ ├fique ├fiques index.css // Global CSS ├fique

Meshy-3d-model-animation / ├── node_modules / └── Modèles publiques / └fique // // modèles 3D et fichiers connexes └séLa_Glb / // Folder des modèles 3D ├── Animation_gangnam_groove_withskin.glb // fichiers GLB avec animation de danse ├fique Animation_pod_baby_groove_withskin.glb // fichiers glb avec animation de danse └sémer

import './app.css'; import {threeddancinguncle} de './pages'; fonction app () {return (<div className="App"><ThreeDDancingUncle /></div> )); } Exporter l'application par défaut;

import threeddancinguncle de "./threeddancinguncle/threeddancinguncle"; export {threeddancinguncle}

// ==== // Partie 1: Importez les modules requis // ==== Importer React, {UseState, UseEffected} de "React"; import {canvas, useFrame, useThree} de "@ react-trois / fibre"; import {orbitControls} de "@ react-trois / drei"; import {gltfloader} à partir de "trois / exemples / jsm / chargeurs / gltfloader"; import {exrloader} à partir de "trois / exemples / jsm / chargeurs / exrloadher"; import * comme trois de "trois"; // ==== // Partie 2: Définir les constantes // ==== // Liste des fichiers d'animation // Stockez le nom et le chemin de chaque animation Const Animation_files = [{name: "pod baby groove", chemin: "/models/uncle_glb/animation_pod_baby_groove_withskin.glb"}, {name: "gangny", path :glb "}, {name:" gangny ", path :glb"}, {name: "Gangny", Pathskin " "/models/uncle_glb/animation_gangnam_groove_withskin.glb"}, {name: "pop danse", chemin: "/models/uncle_glb/animation_superlove_pop_dance_withskin.glb"},]; // Chemin vers le modèle de modèle const default_animation_file = animation_files [0] .path; // Chemin d'image HDRI (pour l'arrière-plan) const hdri_file = "/hdri/cobblestone_street_night_4k.exr"; // Position initiale de la caméra (x, y, z) const initial_camera_position = new Three.vector3 (10, 4, 10); // Modèle de grossissement de l'échelle const Model_Scale = 4; // Angle de rotation du modèle initial (à propos de l'axe y, dans Radians) const Model_Rotation_y = -1; // Position du modèle initial (x, y, z) const Model_Position = new Three.vector3 (0, -2, 0); // Paramètres lumineux // Définir la position et l'intensité de la lumière et de l'intensité de la lumière ponctuelle et de la direction 0), intensité: 1,5}, // la position et l'intensité de la lumière ponctuelle}; // ===== // Partie 3: Paramètres d'arrière-plan // ===== // Définissez l'arrière-plan de la scène avec HDRI Image const Background: react.fc = () => {const {gl, scage} = usethree (); useEffect (() => {const hdrloader = new ExrLoader (); const pmremGenerator = new Three.PmRemGenerator (GL); pmremGenerator ........ pmremGenerator.fromequirectangular (texture) .Texture; retourner null; // pas de rendu cible}; // ==== // Partie 4: Modèles et animations // === // Chargement du modèle principal et gestion de l'animation CONS Modèle: react.fc <{CurrentAranimation: String}> = ({currentArAnimation}) => {const {caméra} = useThree (); const [modèle, setModel] = UseState<THREE.Group | null> (nul); const [mélangeur, setMixer] = Usestate<THREE.AnimationMixer | null> (nul); // Charger le modèle useEffecte (() => {const Loader = new Gltfloader (); Loader.Load (default_animation_file, (Gltf) => {const {Scene: LoadEdScene} = Gltf; LoadEdScene.Scale.Set (Model_Scale, Model_Scale, Model_SCale); // Définir la rotation initiale du modèle Loadscène.Position.copie (Model_Position); 0); // Toggle Animation UseEFFECT (() => {if (! Model ||! Mixer) return; const loder = new GlTFOLODOFer (); Loder.Load (CurrentAnimation, (Gltf) => {const NewAnimation = Gltf.animations [0]; if (newanimation) {Constopall (stopage.clipaction (newanimation); mixer. Action.Reset (). Fadein (0,5) .Play (); // Mise à jour de l'animation useframe ((_, delta) => {if (mixer) mixer.update (delta);}); modèle de retour?<primitive object={model} /> : nul; // montre le modèle}; // ==== // Partie 5: Composants principaux // ==== // Configuration de l'application entière const threeddancinguncle: react.fc = () => {const [currentAranimation, setCurrentAnimation] = useState (animation_files [0] .Path); retour (<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/ * Bouton de sélection d'animation * /} <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", arrière "5px", curseur: "pointeur",}}> {anim.name}</button> ))}</div><Canvas> {/ * Composant d'arrière-plan * /}<Background /> {/ * Modèles et animations * /}<Model currentAnimation={currentAnimation} /> {/ * Paramètres légers * /} <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} /> {/ * Fonctionnement de la caméra * /}<OrbitControls /></Canvas></div> )); }; Exporter par défaut Threeddancinguncle;

// ==== // Partie 1: Importez les modules requis // ==== Importer React, {UseState, UseEffected} de "React"; import {canvas, useFrame, useThree} de "@ react-trois / fibre"; import {orbitControls} de "@ react-trois / drei"; import {gltfloader} à partir de "trois / exemples / jsm / chargeurs / gltfloader"; import {exrloader} à partir de "trois / exemples / jsm / chargeurs / exrloadher"; import * comme trois de "trois";

// ==== // Partie 2: Définir les constantes // ==== // Liste des fichiers d'animation // Stockez le nom et le chemin de chaque animation Const Animation_files = [{name: "pod baby groove", chemin: "/models/uncle_glb/animation_pod_baby_groove_withskin.glb"}, {name: "gangny", path :glb "}, {name:" gangny ", path :glb"}, {name: "Gangny", Pathskin " "/models/uncle_glb/animation_gangnam_groove_withskin.glb"}, {name: "pop danse", chemin: "/models/uncle_glb/animation_superlove_pop_dance_withskin.glb"},]; // Chemin vers le fichier modèle const default_animation_file = Animation_Files [0] .path; // Chemin vers l'image HDRI (pour l'arrière-plan) const hdri_file = "/hdri/cobblestone_street_night_4k.exr"; // Position initiale de la caméra (x, y, z) const initial_camera_position = new Three.vector3 (10, 4, 10); // Modèle de grossissement de l'échelle const Model_Scale = 4; // angle de rotation initial du modèle (autour de l'axe y, dans les radians) const Model_Rotation_y = -1; // Position initiale du modèle (x, y, z) const Model_Position = new Three.vector3 (0, -2, 0); // Paramètres lumineux // Définir la position et l'intensité de la lumière ambiante, directionnelle et ponctuelle const Light_settings = {ambient: {l'intensité: 0,5}, // Intensité de lumière ambiante Direction: {position: new Three.Vector3 (10, 20, 10), Intensity: 1,5}, // / la position et l'intensité du point de lumière directionnelle: {position: Position: Nouveau. 0), intensité: 1,5}, // la position et l'intensité de la lumière ponctuelle};

// ==== // Partie 3: Définition de l'arrière-plan // ==== // Définissez l'arrière-plan de la scène avec HDRI Image const Background: react.fc = () => {const {gl, scage} = usethree (); useEffect (() => {const hdrloader = new ExrLoader (); const pmremGenerator = new Three.PmRemGenerator (GL); pmremGenerator ........ pmremGenerator.fromequirectangular (texture) .Texture; retourner null; // pas de rendu cible};

// ==== // Partie 4: Modèles et animation // ==== // Chargement du modèle principal et gestion de l'animation CONS Modèle: react.fc <{CurrentAranimation: String}> = ({currentArAnimation}) => {const {caméra} = useThree (); const [modèle, setModel] = UseState<THREE.Group | null> (nul); const [mélangeur, setMixer] = Usestate<THREE.AnimationMixer | null> (nul); // Charger le modèle useEffecte (() => {const Loader = new Gltfloader (); Loader.Load (default_animation_file, (Gltf) => {const {Scene: LoadEdScene} = Gltf; LoadEdScene.Scale.Set (Model_Scale, Model_Scale, Model_SCale); // Définir la rotation initiale du modèle Loadscène.Position.copie (Model_Position); 0); // Toggle Animation UseEFFECT (() => {if (! Model ||! Mixer) return; const loder = new GlTFOLODOFer (); Loder.Load (CurrentAnimation, (Gltf) => {const NewAnimation = Gltf.animations [0]; if (newanimation) {Constopall (stopage.clipaction (newanimation); mixer. Action.Reset (). Fadein (0,5) .Play (); // Mise à jour de l'animation useframe ((_, delta) => {if (mixer) mixer.update (delta);}); modèle de retour?<primitive object={model} /> : nul; // Affichage du modèle};

// ==== // Partie 5: Composant principal // ==== // Configuration de l'application entière const threeddancinguncle: react.fc = () => {const [currentAnimation, setCurrentanimation] = useState (animation_files [0] .Path); retour (<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/ * Bouton de sélection d'animation * /} <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", arrière "5px", curseur: "pointeur",}}> {anim.name}</button> ))}</div><Canvas> {/ * Composant d'arrière-plan * /}<Background /> {/ * Modèles et animations * /}<Model currentAnimation={currentAnimation} /> {/ * Paramètres légers * /} <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} /> {/ * Fonctionnement de la caméra * /}<OrbitControls /></Canvas></div> )); }; Exporter par défaut Threeddancinguncle;