J'ai essayé de faire marcher les ours avec React x Three.js! Modélisation 3D facile avec AI Meshy!

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 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │. THREEDMODELANIMIMATION.TSX // Composant principal React │ │ │ │ │ THREEDMODELANIMIMATION.CSS // Feuille de style de page │ │ │ │fique │ │── index.css // Global CSS │── Package.json // Paramètres de projet │sé

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

Importer ExplosedingButtonPage à partir de "./ExplodingButtonPage/ExplodingButtonPage"; Importez GamingroomLogin de "./gamingroomlogin/gamingroomlogin"; Importer Meshy3dmodel de "./Meshy3dmodel/meshy3dmodel"; Importer ThreedModelanimation de "./threedmodelanimation/threedmodelanimation"; Exportation {ExplosedingButtonPage, GamingroomLogin, Meshy3dmodel, ThreedModeLanimation}

// 3DMODELANIMATION.TSX // ==== // Partie 1: Générez un modèle avec Meshy // === // Générez un modèle 3D en utilisant Meshy Ai // ==== // Partie 2: Définition constante // ==== Import React, {useref, useEffecte, useState} from 'react'; import {canvas, useFrame} de '@ react-trois / fibre'; import {orbitControls} de '@ react-trois / drei'; import {fbxloader} à partir de 'trois / exemples / jsm / chargeurs / fbxloader'; import {AnimationMixer, horloge, double, vector3} de «trois»; import './threedModeLanimation.css'; // Définition constante // Paramètres liés au modèle const Model_Scale = 0,1; // Échelle du modèle const Model_Initial_Position = new Vector3 (0, 0,5, 0); // Position initiale du modèle const Model_Rotation_X = -0.3; // Rotation de l'axe x du modèle // Définition du sol Const Ground_Color = 'Green'; const Ground_Position = new Vector3 (0, 0, 0); const Ground_Size = 200; // Ground Taille const Ground_Segments = 50; // Divisions au sol // Constant de pierre const Stone_count = 50; // Nombre de pierres const stone_scale_min = 0,1; // CONS à échelle minimale Stone_Scale_Max = 0,6; // Échelle maximale // Paramètres de caméra et d'éclairage const Camera_Position = new Vector3 (0, 20, 50); const ambient_light_intensity = 0,7; // Intensité lumineuse ambiante const Point_light_position = new Vector3 (10, 20, 10); const point_light_intensity = 1; // Point Light Source Strength // Paramètre d'arrière-plan const Background_Color = 'SkyBlue'; // Interface de couleur d'arrière-plan AnimatedFbxModelProps {path: string; Isplaying ?: Boolean; } // ==== // Partie 3: Modèle animé // ===== const AnimatedFBXModel: react.fc<AnimatedFBXModelProps> = ({path, isplaying = false}) => {const mixer = useref<AnimationMixer | null> (nul); const Clock = useRef (new Clock ()); const [modèle, setModel] = UseState<any> (nul); const [action, setAction] = Usestate<any> (nul); // Mettez à jour la position et l'animation du modèle pour chaque trame useFrame (() => {if (modèle && iSplaying) {Model.Position.z + = 0.05; // Déplacez le modèle en avant} if (Mixer.Current && iSplaying) {const delta = horloge.current.getdelta (); mixer.current.update (delta); // mettent à jour l'animation}); // Charger le modèle fbx useEFFECT (() => {const loder = new fbxLoader (); loader.load (path, (fbx) => {if (! Modèle) {fbx.scale.set (model_scale, model_scale, model_scale); fbx.position.copy_x); fbx.Rotatex (model_x); Mixer.Current = New AnimationMixer (fbx); Console.Error ('Erreur de chargement FBX:', erreur);});}, [Path]); // Toggle Playback / Stop Animation UseEFFECT (() => {if (Action) {Action.Paused =! Isplaying; if (Isplaying) {Action.Play ();} else {action.stop ();}}}, [Isplaying, Action]); modèle de retour?<primitive object={model} /> : nul; }; // ==== // Partie 4: Paramètres du sol // ==== 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> )); }; // ==== // Partie 5: Arrangement de pierres aléatoires // ==== CONS Randomstones: React.fc = () => {// Générer des pierres à des positions et des échelles aléatoires sur le premier rendu const [Stones] = UseState (() => {return array.from ({le long: 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}</> ; }; // ==== // Partie 6: Composants principaux // ===== const threedModeLanimation: react.fc = () => {const [isplaying, setIsplaying] = useState (false); retour (<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setISplaying (! 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 /> {/ * Affichage au sol * /}<Ground /> {/ * Arrangement de pierres aléatoires * /}<RandomStones /> {/ * Paramètre de couleur d'arrière-plan * /}<color attach="background" args={[BACKGROUND_COLOR]} /> {/ * Modèle d'animation * /}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> )); }; Exporter par défaut ThreedModeLanimation;

/ * 3DModeLanimation.css * / .Canvas-Container {Width: 100VW; Hauteur: 100VH; Affichage: flex; Justification-contenu: centre; Align-Items: Centre; Color d'arrière-plan: # 000; }
  

// ==== // Partie 2: Définition constante // ==== Importer React, {useref, useEffecte, useState} de 'react'; import {canvas, useFrame} de '@ react-trois / fibre'; import {orbitControls} de '@ react-trois / drei'; import {fbxloader} à partir de 'trois / exemples / jsm / chargeurs / fbxloader'; import {AnimationMixer, horloge, double, vector3} de «trois»; import './threedModeLanimation.css'; // Définition constante // Paramètres liés au modèle const Model_Scale = 0,1; // Échelle du modèle const Model_Initial_Position = new Vector3 (0, 0,5, 0); // Position initiale du modèle const Model_Rotation_X = -0.3; // Modèle de rotation x-axe // réglage du sol const Ground_Color = 'Green'; const Ground_Position = new Vector3 (0, 0, 0); const Ground_Size = 200; // Ground Taille const Ground_Segments = 50; // Nombre de divisions au sol // Paramètres en pierre const Stone_count = 50; // Nombre de pierres const stone_scale_min = 0,1; // échelle minimale de pierres const stone_scale_max = 0,6; // échelle maximale des pierres // paramètres de caméra et de lumière const caméra_position = new Vector3 (0, 20, 50); const ambient_light_intensity = 0,7; // Intensité lumineuse ambiante const Point_light_position = new Vector3 (10, 20, 10); const point_light_intensity = 1; // Point Light Source Strength // Paramètre d'arrière-plan const Background_Color = 'SkyBlue'; // Interface de couleur d'arrière-plan AnimatedFbxModelProps {path: string; Isplaying ?: Boolean; }

// ==== // Partie 3: Modèle animé // ===== const AnimatedFBXModel: react.fc<AnimatedFBXModelProps> = ({path, isplaying = false}) => {const mixer = useref<AnimationMixer | null> (nul); const Clock = useRef (new Clock ()); const [modèle, setModel] = UseState<any> (nul); const [action, setAction] = Usestate<any> (nul); // Mettez à jour la position et l'animation du modèle pour chaque trame useFrame (() => {if (modèle && iSplaying) {Model.Position.z + = 0.05; // Déplacez le modèle en avant} if (Mixer.Current && iSplaying) {const delta = horloge.current.getdelta (); mixer.current.update (delta); // mettent à jour l'animation}); // Charger le modèle fbx useEFFECT (() => {const loder = new fbxLoader (); loader.load (path, (fbx) => {if (! Modèle) {fbx.scale.set (model_scale, model_scale, model_scale); fbx.position.copy_x); fbx.Rotatex (model_x); Mixer.Current = New AnimationMixer (fbx); Console.Error ('Erreur de chargement FBX:', erreur);});}, [Path]); // Toggle Playback / Stop Animation UseEFFECT (() => {if (Action) {Action.Paused =! Isplaying; if (Isplaying) {Action.Play ();} else {action.stop ();}}}, [Isplaying, Action]); modèle de retour?<primitive object={model} /> : nul; };

// ==== // Partie 4: Paramètres du sol // ==== 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> )); };

// ===== // Partie 5: Arrangement de pierres aléatoires // ==== Const Randomstones: React.fc = () => {// Générer des pierres à des positions et des échelles aléatoires sur le premier rendu const [Stones] = UseState (() => {return array.from ({Length: Stone_Count}, () => {const x = math.random () / 2; const y = Ground_Position.y; const z = 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}</> ; };

// ==== // Partie 6: Composant principal // ==== CONT THREEDMODELANIMation: React.fc = () => {const [Isplaying, setIsplaying] = UseState (false); retour (<div className="canvas-container"> <button style={{ position: 'absolute', top: '10px', left: '10px', zIndex: 100 }} onClick={() =>setISplaying (! 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 /> {/ * Affichage au sol * /}<Ground /> {/ * Arrangement de pierres aléatoires * /}<RandomStones /> {/ * Paramètre de couleur d'arrière-plan * /}<color attach="background" args={[BACKGROUND_COLOR]} /> {/ * Modèle d'animation * /}<AnimatedFBXModel path="/models/cuddly_bear/Animation_Walking_withSkin.fbx" isPlaying={isPlaying} /></Canvas></div> )); }; Exporter par défaut ThreedModeLanimation;