Steuerung 3D -Modelle im GLB -Format, das mit Meshy AI unter Verwendung von React und Three.js erzeugt wird! So verwalten Sie mehrere Animationen

npx erstellen reag-app meshy-3d-model-Animation-Template TypeScript

CD MESHY-3D-MODEL-ANIMATHION NPM TREI @react-three/faser @react-three/drei

meshy-3d-model-animation/ ├── node_modules/ ├── öffentlich/ ├── Modelle// 3D-Modelle und verwandte Dateien 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 │ ├── DreeddancingUncle/ // Page-mal-by-Page-Ordner │ │ └── └ └ └── Index.tsx // 3D-Animationsseiten │ │ └── │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │tsx //s ├── INDEX.CSS // Globale CSS ├── Paket.json // Projekteinstellungen ├── tconfig.json // Typecript -Einstellungen └── Readme.md // Projektübersicht

meshy-3d-model-animation/ ├── node_modules/ └── öffentlich/ └── Modelle// 3D-Modelle und verwandte Dateien Animation_Pod_Baby_Groove_withskin.glb // GLB -Dateien mit Tanzanimation └── Animation_Superlove_Pop_dance_withskin.glb // GLB -Dateien mit Tanzanimation

import './app.css'; importieren {threddancingUncle} aus './pages'; Funktion app () {return (<div className="App"><ThreeDDancingUncle /></div> ); } standardmäßige App exportieren;

Dreidlerkapsel von ". exportieren {threddancingUncle}

// ==== // Teil 1: Importieren Sie die erforderlichen Module // ==== reagieren, {usestate, useEffect} aus "react"; importieren {canvas, useFrame, useThree} aus "@react-three/faser"; Import {OrbitControls} aus "@react-three/drei"; importieren {gltfloader} aus "drei/Beispiele/jsm/lader/gltfloader"; Importieren {Exrloader} aus "drei/Beispiele/jsm/lader/exrloader"; Import * als drei von "drei"; // ==== // 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", Pfad: "/models/uncle_glb/animation_superlove_pop_dance_withskin.glb"},]; // Pfad zur Modelldatei const default_animation_file = animation_files [0] .Path; // Pfad zum HDRI -Bild (für Hintergrund) const hdri_file = "/hdri/cobblestone_street_night_4k.exr"; // anfängliche Kameraposition (x, y, z) const initial_camera_position = new Three.Vector3 (10, 4, 10); // Modellskala -Vergrößerung const model_scale = 4; // anfängliche Modellrotationswinkel (über die y -Achse, in Radians) const model_rotation_y = -1; // Anfangsmodellposition (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}, // die Position und Intensität des Punktlichts}; // ====== // Teil 3: Hintergrundeinstellungen // ====== // Setzen Sie den Szenenhintergrund mit HDRI -Bild const Hintergrund: react.fc = () => {const {gl, Szene} = useThee (); useeffect (() => {const hdrloader = new Exrloader (); const pmremGenerator = new Three.pmremGenerator (GL); PMREMerator.Fromequirectangular (Textur) .Textur; null zurückkehren; // kein Rendering -Ziel}; // ===== // Teil 4: Modelle und Animationen // ===== // Laden des Hauptmodells und Verwalten von Animation const Modell: react.fc <{CurrentAnimation: String}> = ({CurrentAnimation}) => {const {camera} = usaThree (); const [Modell, SetModel] = Usestate<THREE.Group | null> (NULL); const [Mixer, setMixer] = usustate<THREE.AnimationMixer | null> (NULL); // Lademodell useeffect (() => {const lader = new gltfloader (); loader.load (default_animation_file, (gltf) => {const {szene: loadedScene} = gltf; ladeedScene.scale.set (model_scale, modell_scale, modell-); // modell -lader. // Die anfängliche Rotation des Modells lade. 0) // die Mitte des Modells anzeigen}); // Animation useEffect () => {if (! Modell ||! Mixer) return; const lader = new Gltfloader (); loader.load (CurrentAnimation, (gltf) => {const Newanimation = Gltf.Animations [0]; if (newanimimation) {constAlal (constaler). Action.Reset (). Fadein (0,5) .play (); // Animations -Use -useFrame (_, delta) => {if (mixer) mixer.update (Delta);}); Rückgabemodell?<primitive object={model} /> : null; // Modell zeigen}; // ===== // Teil 5: Hauptkomponenten // ==== // Konfigurieren der gesamten Anwendung const threddancingUncle: react.fc = () => {const [CurrentAnimation, setCurrentanimation] = usestate (Animation_Files [0] .path); zurückkehren (<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/ * Animationsauswahltaste */} <div style={{ position: "absolute", top: "10px", left: "10px", zIndex: 10, // ボタンをCanvasの上に表示 }} > {Animation_files.map ((Anim, Index) => ( <button key={index} onClick={() =>setCurrentanimation (Anim.Path)} // Animationsstil umschalten Cursor: "Pointer",}}> {Anim.name}</button> )}</div><Canvas> {/ * Hintergrundkomponente */}<Background /> {/ * Modelle und Animationen */}<Model currentAnimation={currentAnimation} /> {/ * Lichteinstellungen */} <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} /> {/ * Kameraoperation */}<OrbitControls /></Canvas></div> ); }; Ausfunktion von Standarddreizendanzehörungen;

// ==== // Teil 1: Importieren Sie die erforderlichen Module // ==== reagieren, {usestate, useEffect} aus "react"; importieren {canvas, useFrame, useThree} aus "@react-three/faser"; Import {OrbitControls} aus "@react-three/drei"; importieren {gltfloader} aus "drei/Beispiele/jsm/lader/gltfloader"; Importieren {Exrloader} aus "drei/Beispiele/jsm/lader/exrloader"; Import * als drei von "drei";

// ==== // 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", Pfad: "/models/uncle_glb/animation_superlove_pop_dance_withskin.glb"},]; // Pfad zur Modelldatei const default_animation_file = animation_files [0] .Path; // Pfad zum HDRI -Bild (für Hintergrund) const hdri_file = "/hdri/cobblestone_street_night_4k.exr"; // anfängliche Kameraposition (x, y, z) const initial_camera_position = new Three.Vector3 (10, 4, 10); // Modellskala -Vergrößerung const model_scale = 4; // anfängliche Rotationswinkel des Modells (über die y -Achse, in Radians) const model_rotation_y = -1; // modellische initiale Position (x, y, z) const model_position = new Three.Vector3 (0, -2, 0); // Lichteinstellungen // Definieren Sie die Position und Intensität von Umgebungs-, Richt- und Punktlicht const Light_Settings = {Ambient: {Intensität: 0,5}, // Umgebungslichtintensität Richtungssteuerung: {Position: Neue Drei drei.Vektor3 (10, 20, 10), Intensität: 1,5}, //. 1.5}, // die Position und Intensität des Punktlichts};

// ===== // Teil 3: Setzen Sie den Hintergrund // ==== // Setzen Sie den Szenenhintergrund mit HDRI -Bild const Hintergrund: react.fc = () => {const {gl, Szene} = useThree (); useeffect (() => {const hdrloader = new Exrloader (); const pmremGenerator = new Three.pmremGenerator (GL); PMREMerator.Fromequirectangular (Textur) .Textur; null zurückkehren; // kein Rendering -Ziel};

// ===== // Teil 4: Modelle und Animation // ===== // Laden des Hauptmodells und Verwalten von Animation const Modell: react.fc <{CurrentAnimation: String}> = ({CurrentAnimation}) => {const {camera} = usaThree (); const [Modell, SetModel] = Usestate<THREE.Group | null> (NULL); const [Mixer, setMixer] = usustate<THREE.AnimationMixer | null> (NULL); // Lademodell useeffect (() => {const lader = new gltfloader (); loader.load (default_animation_file, (gltf) => {const {szene: loadedScene} = gltf; ladeedScene.scale.set (model_scale, model_scale, modell-); // modell -lader. // Die anfängliche Rotation des Modells lade. 0) // die Mitte des Modells anzeigen}); // Animation useEffect () => {if (! Modell ||! Mixer) return; const lader = new Gltfloader (); loader.load (CurrentAnimation, (gltf) => {const Newanimation = Gltf.Animations [0]; if (newanimimation) {constAlal (constaler). Action.Reset (). Fadein (0,5) .play (); // Animations -Use -useFrame (_, delta) => {if (mixer) mixer.update (Delta);}); Rückgabemodell?<primitive object={model} /> : null; // Modell anzeigen};

// ===== // Teil 5: Hauptkomponente // ===== // Konfigurieren der gesamten Anwendungskonstant Dreidelung: react.fc = () => {const [CurrentAnimation, setCurrentanimation] = usestate (Animation_Files [0] .path); zurückkehren (<div style={{ width: "100vw", height: "100vh", position: "relative" }}> {/ * Animationsauswahltaste */} <div style={{ position: "absolute", top: "10px", left: "10px", zIndex: 10, // ボタンをCanvasの上に表示 }} > {Animation_files.map ((Anim, Index) => ( <button key={index} onClick={() =>setCurrentanimation (Anim.Path)} // Animationsstil umschalten Cursor: "Pointer",}}> {Anim.name}</button> )}</div><Canvas> {/ * Hintergrundkomponente */}<Background /> {/ * Modelle und Animationen */}<Model currentAnimation={currentAnimation} /> {/ * Lichteinstellungen */} <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} /> {/ * Kameraoperation */}<OrbitControls /></Canvas></div> ); }; Ausfunktion von Standarddreizendanzehörungen;