Traté de hacer que Bears caminara con React x tres.js! ¡Modelado 3D fácil con AI malla!

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/ ├── public/ ├── models/ // 3D models and related files │ ├── cuddly_bear/ // Bear's 3D model folder │ │ ├── Animation_Walking_withSkin.fbx // FBX files with walking animation │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ThreeDModelAnimation/ // FBX files for other purposes │ │ │ │ │ │ │ ThreeDModelAnimation/ // 3D animation page │ │ │ │ │ │ │ │ │ │ │ │ │ │ Threedmodelanimation.tsx // componente de reacción principal │ │ │ │ │ threedmodelanimation.css // hoja de estilo de página │ │ │ │ │ │ │. Estilo │ │── index.css // CSS global │── paquete.json // Configuración del proyecto │── tsconfig.json // Configuración de mecanografiado └iqute. ReadMe.md // Descripción general del proyecto

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

Importar ExplodingButtonPage de "./explodingbuttonpage/explodingButtonPage"; Importar GamationroomLogin de "./gamingroomlogin/gamingroomlogin"; import meshy3dmodel de "./meshy3dmodel/meshy3dmodel"; Importar triDelanimación de "./ThreedModelanimation/ThreedModelanimation"; Export {ExplodingButtonPage, GamatingroomLogin, Meshy3DModel, ThredModelanimation}

// 3dmodelanimation.tsx // ===== // Parte 1: Genere un modelo con Meshy // ==== // Genere un modelo 3D usando Meshy Ai // ===== // Parte 2: Definición constante // ==== Import React, {Useref, use efecting, usestate de 'reacto'; import {Canvas, UseFrame} de '@react-three/fiber'; import {OrbitControls} de '@react-three/drei'; import {fbxloader} de 'tres/ejemplos/jsm/loaders/fbxloader'; import {AnimationMixer, Clock, Doubleide, Vector3} de 'Three'; import './threedmodelanimation.css'; // Definición constante // Configuración relacionada con el modelo const model_scale = 0.1; // Model Scale const model_initial_position = new Vector3 (0, 0.5, 0); // posición inicial del modelo const model_rotation_x = -0.3; // rotación del eje x del modelo // Configuración de tierra const ground_color = 'verde'; const ground_position = new Vector3 (0, 0, 0); const ground_size = 200; // tamaño de tierra const ground_segments = 50; // divisiones terrestres // ajuste de piedra const stone_count = 50; // número de piedras const stone_scale_min = 0.1; // escala mínima const stone_scale_max = 0.6; // Escala máxima // Configuración de cámara y luz const cámaras_position = new Vector3 (0, 20, 50); const ambiente_light_intensidad = 0.7; // intensidad de luz ambiental const_light_position = new Vector3 (10, 20, 10); const apo_light_intensity = 1; // Strenza de fuente de luz de puntos // Configuración de fondo const background_color = 'SkyBlue'; // Interfaz de color de fondo AnimatedFBXModelProps {ruta: string; ¿Está jugando?: booleano; } // ==== // Parte 3: Modelo animado // ==== Con Const AnimatedfbxModel: React.fc<AnimatedFBXModelProps> = ({ruta, isPlaying = false}) => {const mezclas = useref<AnimationMixer | null> (nulo); const reloj = useref (nuevo reloj ()); const [modelo, setmodel] = useState<any> (nulo); const [acción, setAction] = useState<any> (nulo); // Actualiza la posición del modelo y la animación para cada cuadro Useframe (() => {if (model && isplaying) {model.position.z += 0.05; // mover el modelo hacia adelante} if (mixer.current && isplaying) {const delta = clock.current.getDelta (); mixer.current.update (deltA); ////////conalte}); // Load FBX Model UseEffect (() => {const Loader = new FbxLoader (); Loader.Load (Path, (fbx) => {if (! Model) {fbx.scale.set (model_scale, model_scale, model_scale); fbx.position.copy (model_initial_posic mixer.current = new AnimationMixer (FBX); console.error ('Error de carga del modelo FBX:', error); // toggle reproducir/stop animation useEffect (() => {if (action) {action.paused =! IsPlaying; if (isPlaying) {Action.play ();} else {Action.Stop ();}}}, [isPlaying, Action]); ¿Modelo de regreso?<primitive object={model} /> : nulo; }; // ==== // Parte 4: Configuración de tierra // ===== const Ground: react.fc = () => {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> ); }; // ==== // Parte 5: disposición de piedra aleatoria // ===== const randomstones: react.fc = () => {// Generar cálculos en posiciones aleatorias y escalas en la primera representación de const [piedras] = useSestate () => {return Array.from ({longitud: Stone_Count}, () => {Const.Random () 2; <mesh key={`${x}-${z}`} position={[x, y, z]} scale={[scale, scale, scale]}><sphereGeometry args={[1, 8, 8]} /><meshStandardMaterial color="gray" /></mesh> ); }); return <> {piedras}</> ; }; // ==== // Parte 6: Componentes principales // ===== const ThredModelanimation: react.fc = () => {const [isPlaying, setIsplaying] = useState (false); devolver (<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setPlaying (! isplaying)}> {isPlaying? 'PAUSE ANIMATION': 'Play Animation'}</button> <Canvas camera={{ position: CAMERA_POSITION.toArray() }}><ambientLight intensity={AMBIENT_LIGHT_INTENSITY} /><pointLight position={POINT_LIGHT_POSITION.toArray()} intensity={POINT_LIGHT_INTENSITY} /><OrbitControls /> {/ * Pantalla de tierra */}<Ground /> {/ * Disposición de piedra aleatoria */}<RandomStones /> {/ * Configuración de color de fondo */}<color attach="background" args={[BACKGROUND_COLOR]} /> {/ * Modelo de animación */}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> ); }; Exportar triunfo de treedModelanimación;

/ * 3dmodelanimation.css */ .canvas-continer {ancho: 100vw; Altura: 100 VH; Pantalla: Flex; Justify-Content: Center; Alineación de ítems: Centro; Color de fondo: #000; }
  

// ==== // Parte 2: Definición constante // ==== Import React, {useref, useEffect, useState} de 'React'; import {Canvas, UseFrame} de '@react-three/fiber'; import {OrbitControls} de '@react-three/drei'; import {fbxloader} de 'tres/ejemplos/jsm/loaders/fbxloader'; import {AnimationMixer, Clock, Doubleide, Vector3} de 'Three'; import './threedmodelanimation.css'; // Definición constante // Configuración relacionada con el modelo const model_scale = 0.1; // Model Scale const model_initial_position = new Vector3 (0, 0.5, 0); // Posición inicial del modelo const model_rotation_x = -0.3; // Modelo de rotación del eje X // Configuración de tierra const ground_color = 'verde'; const ground_position = new Vector3 (0, 0, 0); const ground_size = 200; // tamaño de tierra const ground_segments = 50; // Número de divisiones terrestres // Configuración de piedra const Stone_count = 50; // número de piedras const stone_scale_min = 0.1; // escala mínima de piedras const stone_scale_max = 0.6; // Escala máxima de piedras // Configuración de cámara y luz const camera_position = new Vector3 (0, 20, 50); const ambiente_light_intensidad = 0.7; // intensidad de luz ambiental const_light_position = new Vector3 (10, 20, 10); const apo_light_intensity = 1; // Strenza de fuente de luz de puntos // Configuración de fondo const background_color = 'SkyBlue'; // Interfaz de color de fondo AnimatedFBXModelProps {ruta: string; ¿Está jugando?: booleano; }

// ==== // Parte 3: modelo animado // ===== const animatedfbxmodel: react.fc<AnimatedFBXModelProps> = ({ruta, isPlaying = false}) => {const mezclas = useref<AnimationMixer | null> (nulo); const reloj = useref (nuevo reloj ()); const [modelo, setmodel] = useState<any> (nulo); const [acción, setAction] = useState<any> (nulo); // Actualiza la posición del modelo y la animación para cada cuadro Useframe (() => {if (model && isplaying) {model.position.z += 0.05; // mover el modelo hacia adelante} if (mixer.current && isplaying) {const delta = clock.current.getDelta (); mixer.current.update (deltA); ////////conalte}); // Load FBX Model UseEffect (() => {const Loader = new FbxLoader (); Loader.Load (Path, (fbx) => {if (! Model) {fbx.scale.set (model_scale, model_scale, model_scale); fbx.position.copy (model_initial_posic mixer.current = new AnimationMixer (FBX); console.error ('Error de carga del modelo FBX:', error); // toggle reproducir/stop animation useEffect (() => {if (action) {action.paused =! IsPlaying; if (isPlaying) {Action.play ();} else {Action.Stop ();}}}, [isPlaying, Action]); ¿Modelo de regreso?<primitive object={model} /> : nulo; };

// ==== // Parte 4: Configuración de tierra // ===== const Ground: react.fc = () => {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> ); };

// ===== // Parte 5: disposición de piedra aleatoria // ===== const randomstones: react.fc = () => {// Generar cálculos en posiciones aleatorias y escalas en la primera representación de const [piedras] = useSestate () => {return intray.from ({longitud: 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 <> {piedras}</> ; };

// ==== // Parte 6: Componente principal // ===== const ThredModelanimation: react.fc = () => {const [isPlaying, setIsplaying] = useState (false); devolver (<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setPlaying (! isplaying)}> {isPlaying? 'PAUSE ANIMATION': 'Play Animation'}</button> <Canvas camera={{ position: CAMERA_POSITION.toArray() }}><ambientLight intensity={AMBIENT_LIGHT_INTENSITY} /><pointLight position={POINT_LIGHT_POSITION.toArray()} intensity={POINT_LIGHT_INTENSITY} /><OrbitControls /> {/ * Pantalla de tierra */}<Ground /> {/ * Disposición de piedra aleatoria */}<RandomStones /> {/ * Configuración de color de fondo */}<color attach="background" args={[BACKGROUND_COLOR]} /> {/ * Modelo de animación */}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> ); }; Exportar triunfo de treedModelanimación;