¡Controle los modelos 3D en formato GLB generado utilizando IA Meshy usando React y Three.js! Cómo administrar múltiples animaciones

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

CD Meshy-3D-Model-Animathion NPM Instale tres @React-Three/Fiber @React-Three/Drei

Meshy-3D-Model-Animation/ ├── node_modules/ ├── públicos/ ├── modelos/ // modelos 3D y archivos relacionados ├── Tío_glb/ // Carpeta de modelos 3D ├── Animation_gangnam_groove_withskin.glb // Glb Archivos con Animación de baile ├─ Animation_pod_baby_groove_withskin.glb. // archivos GLB con animación de baile ├── animation_superlove_pop_dance_withskin.glb // archivos glb con animación de baile ├iqute └── ThreedDancingUncle.tsx // páginas de animación 3D │ │ └── index.ts // archivo de índice para exportar páginas │ ├── aplup.tsx // puntos de entrada de aplicaciones │ ├ ├iqu. paquete.json // Configuración del proyecto ├── tsconfig.json // Configuración de mecanografiado └── Readme.md // Descripción general del proyecto

Meshy-3D-Model-Animation/ ├── node_modules/ └── públicos/ └── modelos/ // modelos 3D y archivos relacionados └── Tío_glb/ // Carpeta de modelos 3D ├── Animation_gangnam_groove_withskin.glb // Glb Archivos con Animación de baile ├─ Animation_pod_baby_groove_withskin.glb. // archivos GLB con animación de baile └── animation_superlove_pop_dance_withskin.glb // archivos glb con animación de baile

import './app.css'; import {ThredDancingUncle} de './pages'; función app () {return (<div className="App"><ThreeDDancingUncle /></div> ); } Exportar aplicación predeterminada;

Importar ThreeddancingUncle de "./threeddancingunceNcle/threeddancingUncle"; Exportar {ThredDancingUncle}

// ==== // Parte 1: Importe los módulos requeridos // ==== Import React, {useState, UseeFectect} de "React"; import {Canvas, UseFrame, Usethree} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; import {gltfloader} de "tres/ejemplos/jsm/loaders/gltfloader"; import {exrLoader} de "tres/ejemplos/jsm/loaders/exrLoader"; importar * como tres de "tres"; // ==== // 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"}, {nombre: "Pop dance", ruta: "/models/undle_glb/animation_superlove_pop_dance_withskin.glb"},]; // ruta para modelar archivo const default_animation_file = animation_files [0] .path; // ruta a la imagen HDRI (para fondo) const hdri_file = "/hdri/cobblestone_street_night_4k.exr"; // Posición inicial de la cámara (x, y, z) const inicial_camera_position = new tres.vector3 (10, 4, 10); // Aumento de la escala del modelo const model_scale = 4; // ángulo de rotación del modelo inicial (sobre el eje y, en radianos) const model_rotation_y = -1; // Posición inicial del modelo (x, y, z) const model_position = new tres.vector3 (0, -2, 0); // Configuración de luz // Definir la posición ambiental, direccional y de la luz de punto y la intensidad consts const_settings = {ambient: {intensidad: 0.5}, // intensidad de luz ambiental direccional: {posición: new thre.Vector3 (10, 20, 10), intensidad: 1.5}, // // la posición e intensidad del punto de luz direccional: {posición: {New New Tres. 1.5}, // La posición e intensidad de la luz puntual}; // ===== // Parte 3: Configuración de fondo // ===== // Establecer el fondo de la escena con el fondo de la imagen HDRI constante: react.fc = () => {const {gl, escena} = usetre (); useEffect (() => {const hdrLoader = new ExrLoGer (); const PMremGenerator = new Three.pmremGenerator (GL); PMremGenerator.compileequirectangularShader (); HDLoader.Load (HDRI_FILE, (textura) => {textura.mapping = tres.equirectangularLeCtectionMapping; ConstMapeps; pmremGenerator.fromequirectangular (texture) .Texture; regresar nulo; // sin objetivo de representación}; // ==== // Parte 4: modelos y animaciones // ==== // Cargando el modelo principal y administrar el modelo de constante de animación: react.fc <{currentanimation: string}> = ({currentanimation}) => {const {cámara} = usethree (); const [modelo, setmodel] = useState<THREE.Group | null> (nulo); const [mezclador, setmixer] = useState<THREE.AnimationMixer | null> (nulo); // 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); // Establezca la rotación inicial de la rotación. 0); / Ver el centro del modelo}); // Toggle Animation UseEffect (() => {if (! Model || Action.Reset (). Fadein (0.5) .Play (); // Actualizar la animación UseFrame ((_, delta) => {if (mezcler) mezcler.update (delta);}); ¿Modelo de regreso?<primitive object={model} /> : nulo; // Show Model}; // ==== // Parte 5: Componentes principales // ===== // Configuración de toda la aplicación const ThreedDancingUncle: react.fc = () => {const [currentAnimation, setCurrentanimation] = useState (animation_files [0] .path); devolver (<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/ * Botón de selección de animación */} <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: "puntero",}}> {anim.name}</button> ))}</div><Canvas> {/ * Componente de fondo */}<Background /> {/ * Modelos y animaciones */}<Model currentAnimation={currentAnimation} /> {/ * Configuración de luz */} <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} /> {/ * Operación de la cámara */}<OrbitControls /></Canvas></div> ); }; Exportar predeterminado threeddancinguncle;

// ==== // Parte 1: Importe los módulos requeridos // ==== Import React, {useState, UseeFectect} de "React"; import {Canvas, UseFrame, Usethree} de "@react-three/fiber"; import {OrbitControls} de "@react-three/drei"; import {gltfloader} de "tres/ejemplos/jsm/loaders/gltfloader"; import {exrLoader} de "tres/ejemplos/jsm/loaders/exrLoader"; importar * como tres de "tres";

// ==== // 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"}, {nombre: "Pop dance", ruta: "/models/undle_glb/animation_superlove_pop_dance_withskin.glb"},]; // ruta al archivo modelo const default_animation_file = animation_files [0] .path; // ruta a la imagen HDRI (para fondo) const hdri_file = "/hdri/cobblestone_street_night_4k.exr"; // Posición inicial de la cámara (x, y, z) const inicial_camera_position = new tres.vector3 (10, 4, 10); // Aumento de la escala del modelo const model_scale = 4; // ángulo de rotación inicial del modelo (sobre el eje y, en radianos) const model_rotation_y = -1; // Modelo de posición inicial (x, y, z) const model_position = new tres.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}, // La posición e intensidad de la luz puntual};

// ==== // Parte 3: configurar el fondo // ==== // Establezca el fondo de la escena con el fondo de la imagen HDRI constante: react.fc = () => {const {gl, escena} = usethree (); useEffect (() => {const hdrLoader = new ExrLoGer (); const PMremGenerator = new Three.pmremGenerator (GL); PMremGenerator.compileequirectangularShader (); HDLoader.Load (HDRI_FILE, (textura) => {textura.mapping = tres.equirectangularLeCtectionMapping; ConstMapeps; pmremGenerator.fromequirectangular (texture) .Texture; regresar nulo; // sin objetivo de representación};

// ==== // Parte 4: Modelos y animación // ==== // Cargando el modelo principal y administrar el modelo de constante de animación: react.fc <{currentanimation: string}> = ({currentAnimation}) => {const {cámara} = usethree (); const [modelo, setmodel] = useState<THREE.Group | null> (nulo); const [mezclador, setmixer] = useState<THREE.AnimationMixer | null> (nulo); // 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); // Establezca la rotación inicial de la rotación. 0); / Ver el centro del modelo}); // Toggle Animation UseEffect (() => {if (! Model || Action.Reset (). Fadein (0.5) .Play (); // Actualizar la animación UseFrame ((_, delta) => {if (mezcler) mezcler.update (delta);}); ¿Modelo de regreso?<primitive object={model} /> : nulo; // Ver modelo};

// ==== // Parte 5: Componente principal // ===== // Configuración de toda la aplicación const ThreedDancingUncle: react.fc = () => {const [currentAnimation, setCurrentanimation] = useState (animation_files [0] .path); devolver (<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/ * Botón de selección de animación */} <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: "puntero",}}> {anim.name}</button> ))}</div><Canvas> {/ * Componente de fondo */}<Background /> {/ * Modelos y animaciones */}<Model currentAnimation={currentAnimation} /> {/ * Configuración de luz */} <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} /> {/ * Operación de la cámara */}<OrbitControls /></Canvas></div> ); }; Exportar predeterminado threeddancinguncle;