Ich habe versucht, Bären mit React x drei.js zu Fuß zu machen! Einfache 3D -Modellierung mit Meshy AI!

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/ ├── public/ ├── models/ // 3D models and related files │ ├── cuddly_bear/ // Bear's 3D model folder │ │ ├── Animation_Walking_withSkin.fbx // FBX files with walking animation │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ Dreidelmodelanimation/ // FBX -Dateien für andere Zwecke 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 // Globaler Stil │ │── Index.css // Global CSS │── Paket.json // Projekteinstellungen │── t usconfig.json // TypeScript -Einstellungen └── Readme.md // Projektübersicht

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

ExplodingbuttonPage von "./explodingbuttonpage/explodingButtonPage"; Gamingroomlogin aus "./Gamingroomlogin/Gamingroomlogin"; meshy3dmodel aus "./meshy3dmodel/meshy3dmodel"; Dreidlermodelanimation von "./ThreedModelanimation/ThreedModelanimation"; Export {ExplodingButtonPage, Gamingroomlogin, Meshy3Dmodel, Dreidelmodelanimation}

// 3Dmodelanimation.tsx // ==== // Teil 1: Generieren Sie ein Modell mit meshy // ====== // ein 3D -Modell mit meshy ai // ===== // Teil 2: Konstante Definition // ==== FORTEIL React, {useref, useffect, useState} From 'React'; Import {canvas, useFrame} aus '@react-three/faser'; Import {OrbitControls} aus '@react-three/drei'; Importieren {fbxloader} aus 'Drei/Beispielen/jsm/lader/fbxloader'; Import {AnimationMixer, Uhr, Doppelside, vector3} aus 'drei'; Import './ThreedModelanimation.css'; // Konstante Definition // Modellbezogene Einstellungen const model_scale = 0.1; // Modellskala const model_initial_position = new vector3 (0, 0,5, 0); // Anfangsposition des Modells const model_rotation_x = -0.3; // x-achse-Rotation des Modells // Bodeneinstellung const boden_color = 'green'; const boden_position = neuer Vektor3 (0, 0, 0); const boden_size = 200; // Bodengröße const boden_segmente = 50; // Bodenabteilungen // Steineinstellung const stone_count = 50; // Anzahl der Steine const stone_scale_min = 0,1; // Mindestmaßstab const stone_scale_max = 0,6; // Maximale Skala // Kamera- und Lichteinstellungen const camera_position = new vector3 (0, 20, 50); const ambient_light_intensity = 0,7; // Ambient Light Intensität const point_light_position = new vector3 (10, 20, 10); const point_light_intensity = 1; // Point Light Quellstärke // Hintergrundeinstellung const Hintergrund_Color = 'SkyBlue'; // Hintergrund Farbschnittstelle animatedFbxModelProps {Pfad: String; isspielt ?: boolean; } // ===== // Teil 3: animiertes Modell // ===== const animatedfbxModel: react.fc<AnimatedFBXModelProps> = ({path, iSplaying = false}) => {const mixer = useref<AnimationMixer | null> (NULL); const clock = useref (new Clock ()); const [Modell, SetModel] = Usestate<any> (NULL); const [action, setAction] = useState<any> (NULL); // Aktualisieren Sie die Modellposition und Animation für jeden Frame -UseFrame (() => {if (model && isplaying) {model.position.z += 0.05; // Verschieben Sie den Modell vorwärts} if (mixer.current && iSplaying) {const delta = clock.curent.getDelta (). // Lade fbx modell useeffect (() => {const lader = new fbxloader (); loader.load (Pfad, (fbx) => {if (! Model) {fbx.scale.set (model_scale, model_scale, model_scale); mixer.current = neuer AnimationMixer (FBX); console.Error ('Fehler laden FBX -Modell:', Fehler); // Playback/Stop Animation useeffect () => {if (action) {action.paused =! Isplaying; if (isplaying) {action.play ();} else {action.stop ();}}}, [isplaying, action]); Rückgabemodell?<primitive object={model} /> : null; }; // ===== // Teil 4: Bodeneinstellungen // ===== konstant Boden: react.fc = () => {return (return (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; <mesh key={`${x}-${z}`} position={[x, y, z]} scale={[scale, scale, scale]}><sphereGeometry args={[1, 8, 8]} /><meshStandardMaterial color="gray" /></mesh> ); }); return <> {Stones}</> ; }; // ===== // Teil 6: Hauptkomponenten // ===== const throedmodelanimation: react.fc = () => {const [isplaying, setisplaying] = useState (false); zurückkehren (<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setisplaying (! isplaying)}> {isplaying? 'Pause Animation': 'Animation abspielen'}</button> <Canvas camera={{ position: CAMERA_POSITION.toArray() }}><ambientLight intensity={AMBIENT_LIGHT_INTENSITY} /><pointLight position={POINT_LIGHT_POSITION.toArray()} intensity={POINT_LIGHT_INTENSITY} /><OrbitControls /> {/ * Bodenanzeige */}<Ground /> {/ * Zufällige Steinanordnung */}<RandomStones /> {/ * Hintergrundfarbe Einstellung */}<color attach="background" args={[BACKGROUND_COLOR]} /> {/ * Animationsmodell */}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> ); }; Exportieren Sie Standarddreizmodelanimation;

/ * 3Dmodelanimation.css */ .canvas-container {width: 100VW; Höhe: 100VH; Anzeige: Flex; Justify-Content: Center; Ausrichtung: Zentrum; Hintergrundfarbe: #000; }
  

// ==== // Teil 2: Konstante Definition // ==== Import React, {useref, useEffect, usestate} aus 'react'; Import {canvas, useFrame} aus '@react-three/faser'; Import {OrbitControls} aus '@react-three/drei'; Importieren {fbxloader} aus 'Drei/Beispielen/jsm/lader/fbxloader'; Import {AnimationMixer, Uhr, Doppelside, vector3} aus 'drei'; Import './ThreedModelanimation.css'; // Konstante Definition // Modellbezogene Einstellungen const model_scale = 0.1; // Modellskala const model_initial_position = new vector3 (0, 0,5, 0); // Anfangsposition des Modells const model_rotation_x = -0.3; // Modell X-Achse Drehung // Bodeneinstellung const boden_color = 'green'; const boden_position = neuer Vektor3 (0, 0, 0); const boden_size = 200; // Bodengröße const boden_segmente = 50; // Anzahl der Bodenabteilungen // Steineinstellungen const stone_count = 50; // Anzahl der Steine const stone_scale_min = 0,1; // Mindestmaßstab der Steine const stone_scale_max = 0,6; // Maximale Skala der Steine // Kamera- und Lichteinstellungen const camera_position = new vector3 (0, 20, 50); const ambient_light_intensity = 0,7; // Ambient Light Intensität const point_light_position = new vector3 (10, 20, 10); const point_light_intensity = 1; // Point Light Quellstärke // Hintergrundeinstellung const Hintergrund_Color = 'SkyBlue'; // Hintergrund Farbschnittstelle animatedFbxModelProps {Pfad: String; isspielt ?: boolean; }

// ===== // Teil 3: Animiertes Modell // ===== const animatedfbxModel: react.fc<AnimatedFBXModelProps> = ({path, iSplaying = false}) => {const mixer = useref<AnimationMixer | null> (NULL); const clock = useref (new Clock ()); const [Modell, SetModel] = Usestate<any> (NULL); const [action, setAction] = useState<any> (NULL); // Aktualisieren Sie die Modellposition und Animation für jeden Frame -UseFrame (() => {if (model && isplaying) {model.position.z += 0.05; // Verschieben Sie den Modell vorwärts} if (mixer.current && iSplaying) {const delta = clock.curent.getDelta (). // Lade fbx modell useeffect (() => {const lader = new fbxloader (); loader.load (Pfad, (fbx) => {if (! Model) {fbx.scale.set (model_scale, model_scale, model_scale); mixer.current = neuer AnimationMixer (FBX); console.Error ('Fehler laden FBX -Modell:', Fehler); // Playback/Stop Animation useeffect () => {if (action) {action.paused =! Isplaying; if (isplaying) {action.play ();} else {action.stop ();}}}, [isplaying, action]); Rückgabemodell?<primitive object={model} /> : null; };

// ===== // Teil 4: Bodeneinstellungen // ===== konstant Boden: react.fc = () => {return (return (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> ); };

// ====== // Teil 5: Zufällige Steinanordnung // ===== Const Randomstones: React.fc = () => {// Steine an zufälligen Positionen erzeugen und skala auf dem ersten Rendering const [Stones] = Usestate (() => {return array.from ({länge: stone_count}, () => {{{const x = matH.Random () *) * / 2; <mesh key={`${x}-${z}`} position={[x, y, z]} scale={[scale, scale, scale]}><sphereGeometry args={[1, 8, 8]} /><meshStandardMaterial color="gray" /></mesh> ); }); return <> {Stones}</> ; };

// ===== // Teil 6: Hauptkomponente // ===== const thredmodelanimation: react.fc = () => {const [isplaying, setisplaying] = usustate (false); zurückkehren (<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setisplaying (! isplaying)}> {isplaying? 'Pause Animation': 'Animation abspielen'}</button> <Canvas camera={{ position: CAMERA_POSITION.toArray() }}><ambientLight intensity={AMBIENT_LIGHT_INTENSITY} /><pointLight position={POINT_LIGHT_POSITION.toArray()} intensity={POINT_LIGHT_INTENSITY} /><OrbitControls /> {/ * Bodenanzeige */}<Ground /> {/ * Zufällige Steinanordnung */}<RandomStones /> {/ * Hintergrundfarbe Einstellung */}<color attach="background" args={[BACKGROUND_COLOR]} /> {/ * Animationsmodell */}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> ); }; Exportieren Sie Standarddreizmodelanimation;