Récemment, la génération de modèles 3D utilisant l'IA est devenue étonnamment facile. Parmi eux, l'outil AI appelé "Meshy" vous permet de générer rapidement des modèles 3D de haute qualité avec des opérations intuitives.
Dans ce blog, nous expliquerons comment afficher les modèles 3D générés à l'aide de Meshy React et Three.js
📺 Vérifiez le maillage : vous pouvez le vérifier sur la page officielle à partir de ce lien
même les débutants peuvent essayer en toute confiance, donc si vous êtes intéressé à développer à l'aide de React ou Three.js, assurez-vous de le lire jusqu'à la fin!
Nous continuerons à créer des leçons et travaillent à partir de TypeScript X React Three Fibre à l'avenir!
Nous ferons une annonce sur YouTube, alors veuillez vous abonner à notre chaîne YouTube et attendre les notifications!
📺 Regardez YouTube : vous pouvez le regarder à partir de ce lien
Si vous souhaitez savoir ce que React Three Fibre peut faire, veuillez vous référer à ce qui suit!
Nous avons des travaux faciles à utiliser disponibles!
- J'ai essayé de faire marcher les ours avec React x Three.js!
- J'ai essayé de faire danser un vieil homme sur React x Three.js!
- J'ai essayé d'afficher un modèle 3D avec React x Three.js!
- J'ai fait un bouton 3D qui explose dans React x Three.js!
- Réagir trois fibres x drei x Introduction à TypeScript! Fond 3D de style Poke Poke fait avec des objets standard!
Demo d'affichage du modèle 3D
Vous pouvez voir la démo du produit fini dans la vidéo ci-dessous.
📺 Regardez la démo sur YouTube : vous pouvez le regarder à partir de ce lien
De plus, le code source de ce projet est disponible sur GitHub.
Veuillez télécharger le code et l'essayer!
💾 Référentiel GitHub : vérifiez le code source de ce lien
Si vous vous demandez: "Je l'ai vu, comment puis-je le faire?", Ne vous inquiétez pas!
Dans cet article, nous expliquerons étape par étape comment voir ce modèle 3D.
Techniques nécessaires et bibliothèque clé
Ce projet utilise les technologies et les bibliothèques suivantes: voici une brève explication de chaque rôle.
- Réagir
- Bibliothèque pour le développement frontal
- Construction efficace de l'interface utilisateur avec conception basée sur les composants
- Trois.js
- Une bibliothèque pour dessiner des graphiques 3D sur le Web
- Il est facile de gérer les opérations Webgl complexes
- Réagir trois fibres
- Bibliothèque de wrapper pour gérer trois.js en réaction
- Vous pouvez profiter des caractéristiques puissantes de trois.js dans le style de développement React
- Réagir t'en drei
- React Three Fibre Extension Library
- React Three Fibre Extension Library
- Maillé
- Un service qui vous permet de générer facilement des modèles 3D de haute qualité en utilisant l'IA
Conception globale de la mise en œuvre
Ce projet réalisera un processus simple: "Utilisez des outils AI pour générer un modèle 3D et l'afficher dans le navigateur à l'aide de React et Three.js."
- Chargement du modèle
-
- Utilisez React et Three.js pour importer le modèle 3D généré dans votre projet.
-
ObjloaderetMtllloaderpour afficher le modèle dans une scène Three.js.
- Ajout d'éléments HTML (zone d'écran)
-
- Utilisez le
HTMLde la bibliothèque DREI - Le formulaire est conçu dans HTML / CSS.
- Utilisez le
- Fonctionnement de la caméra et conception d'arrière-plan
-
- Limitez le mouvement de la caméra vers horizontal uniquement, en le réglant pour permettre aux utilisateurs de visualiser correctement le modèle.
- Un gradient est défini en arrière-plan pour améliorer l'attrait visuel.
Préparation environnementale
Cette section fournit la configuration initiale de votre projet. Créez une application React à l'aide de la commande NPX, installez les bibliothèques requises et organisez la structure du dossier.
Création d'une application React
Tout d'abord, créez une application React à l'aide de la commande NPX.
NPX Create-React-App Meshy-3D-Model - Tymplate TypeScriptMeshy-3D-Modelest le nom du projet- TemplateUtilisez un modèle compatible TypeScript en spécifiant
Installation des bibliothèques requises
Installez React Three Fibre et d'autres bibliothèques.
CD Meshy-3D-Model NPM Installer trois @ React-Three / Fiber @ React-Three / Drei- trois : trois.js corps principal
- @ React-Three / Fibre : un emballage pour utiliser trois.js avec React
- @ React-Three / Drei : Aiders utiles tels que les contrôles de la caméra et le dessin de texte
Examiner la structure des dossiers et supprimer des fichiers inutiles
Organisez et ajoutez des dossiers de l'état initial comme suit:
Fondamentalement, c'est la valeur par défaut, mais pour les fichiers que vous ne connaissez pas, veuillez consulter GitHub.
Meshy-3d-model / ├── node_modules / ├── Modèles public / ├sé Src / │ ├fique │── Meshy3dmodelpage.css // Stylesheet │ │fique └fique
Les fichiers à modifier cette fois sont les suivants:
App.tsx: points d'entrée de l'applicationPages / Meshy3dmodel: Le dossier à créer cette foisMeshy3dmodelpage.TSX: composant de la page principale.
Explication détaillée du code source pour chaque étape
Dans les sections suivantes, nous expliquerons en détail les cinq parties ci-dessous dans l'ordre.
- Utilisez Meshy pour générer des modèles 3D avec AI
- Définit les constantes de base requises pour afficher des modèles 3D et des caméras de fonctionnement, telles que
Camera_PositionetMonitor_scale. -
HTML_POSITIONetHTML_ROTATION, la position et l'orientation des éléments HTML (formulaires) dans le moniteur sont ajustées.
- Chargez des modèles 3D générés par meshy à l'aide
de mtllloaderetd'objloader - Dessiner un modèle en utilisant
primitif -
HTMLde la bibliothèque DREI et placez le formulaire de connexion dans la partie Monitor - Ajustez finement l'apparence des éléments HTML avec
position,rotationetéchelle
- Créez une scène 3D à l'aide
de toiledans React Three Fiber - Rendez le modèle et définissez la caméra
- Appliquer des conceptions d'arrière-plan pour améliorer l'attrait visuel à l'aide de CSS
linéaire -
d'orbitonstrols, limitant le mouvement de la caméra en horizontal (gauche et droite) uniquement - Ce paramètre rend le moniteur plus facile à visualiser depuis l'avant
Vérifiez toute la source
Vous trouverez ci-dessous le code source complet des boutons 3D explosifs créés dans cet article. Tout le code est mis en place, il est donc facile d'avoir une idée de son fonctionnement.
Si vous souhaitez voir d'autres sources, veuillez consulter GitHub.
import './app.css'; import {Meshy3dmodel} de './pages'; fonction app () {return (<div className="App"><Meshy3DModel /></div> )); } Exporter l'application par défaut;
importer réagir à partir de "réagir"; import {canvas} de "@ react-trois / fibre"; import {orbitControls, html} de "@ react-trois / drei"; import {objloader} à partir de "trois / exemples / jsm / chargeurs / objloader"; import {mtllloader} à partir de "trois / exemples / jsm / chargeurs / mtllloader"; import {useloader} de "@ react-trois / fibre"; import * comme trois de "trois"; // ===== // Partie 1: Définition constante // ==== CAP CAMERA_POSITION = NOUVEAU TROIS.VECTOR3 (0, 0, 3); // Définir la position de la caméra dans le format Vector3 const Monitor_scale = 1; const monitor_rotation = [0, -math.pi / 2, 0]; const html_position = new Three.vector3 (0, 0,15, 0,06); const html_rotation = new Three.euler (-0.075, 0, 0); const html_scale = new Three.vector3 (2,45, 1,85, 0,5); // ===== // Partie 2: Composants d'affichage du moniteur // ===== const monitordisplay: react.fc = () => {const Materials = useloader (mtlloader, "/models/monitor.mtl"); const obj = useloader (objloader, "/models/monitor.obj", (lourdeur) => {matees.preload (); chargeur.setMaterials (matériaux);}); return (<> {/ * Monitor Model * /}<primitive object={obj} scale={MONITOR_SCALE} position={[0, 0, 0]} rotation={MONITOR_ROTATION} /> {/ * Élément html (pièce d'affichage) * /} <Html transform position={HTML_POSITION} distanceFactor={1} occlude scale={HTML_SCALE} rotation={HTML_ROTATION} ><div style={{ width: "300px", height: "200px", background: "white", borderRadius: "10px", boxShadow: "0 0 10px rgba(0,0,0,0.5)", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", padding: "10px", textAlign: "center", }} ><h2> Se connecter </h2><input type="text" placeholder="Username" style={{ marginBottom: "10px", padding: "5px" }} /><input type="password" placeholder="Password" style={{ marginBottom: "10px", padding: "5px" }} /> <button style={{ padding: "10px 20px", background: "blue", color: "white", border: "none", borderRadius: "5px", cursor: "pointer", }} >Soumettre</button></div></Html></> )); }; // ==== // Partie 3: Composant principal // ==== CONS MESHY3DMODEL: react.fc = () => {return ( <div style={{ width: "100vw", height: "100vh", background: "linear-gradient(135deg, #1e3c72,rgb(78, 126, 211))", // グラデーション }} ><Canvas camera={{ position: CAMERA_POSITION, fov: 60 }}><ambientLight intensity={20} /><spotLight position={[10, 10, 10]} intensity={2} /> {/ * Monitor Affichage * /}<MonitorDisplay /> {/ * Limiter le fonctionnement de la caméra * /}<OrbitControls minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /></Canvas></div> )); }; Exporter par défaut Meshy3DModel;
Partie 1: Générez des modèles 3D avec Meshy
Cette fois, le modèle 3D utilisera un service de génération automatique d'IA appelée Meshy.
Le lien est ci-dessous, veuillez donc vous y référer.
200 crédits par mois sont disponibles gratuitement.
📺 Vérifiez le maillage : vous pouvez le vérifier sur la page officielle à partir de ce lien
Modèle de génération de texte> Écrivez le modèle 3D que vous souhaitez générer sur le pronto et appuyez sur le bouton "Générer".
Une fois générés, quatre types de modèles 3D seront présentés. Si vous avez un modèle 3D que vous aimez, sélectionnez "Sélectionner> Confirmer".
Cela créera un modèle 3D avec des textures.
Si cela continue comme ça, je vais le télécharger, mais cette fois, je vais essayer de changer la texture.
Définissez la texture souhaitée de la trame droite à la texture> Invite et appuyez sur le bouton de texture.
L'écran est maintenant fabriqué en aluminium, mais l'écran sera rempli de HTML en utilisant troisJ, donc c'est OK.
Cliquez sur le bouton de téléchargement à télécharger au format: OBJ.
Je pense que Obj, MTL et PNG seront téléchargés.
Si vous le téléchargez en un nom japonais, veuillez le changer en anglais de manière appropriée.
Si vous modifiez le nom du fichier, vous devrez modifier certains des fichiers OBJ et MTL.
Veuillez réécrire le nom du fichier d'origine avec le nom de fichier modifié.
# Blender 3.6.0 # www.blender.org mtllib monitor.mtl o Monitor v 0.094246 -0.375423 0,989129 V 0,097641 -0.373034 0.989317 V -0.123948 -0.629135 0,100659 V -0.131537 -0,624742 0,092791 V -0.143337 -0.627172 0,117533 V -0.003185 0.139220 -0.023328 V -0.012956 0.138576 -0.022627 V -0.016497 0.138405 -0.00670.016497 0.138405 -0.00670.016497 0.138405 -0.00670.016497 0.138405. -0,006145 0.139249 -0.006801 V -0.178673 -0.664484 -0.063357 V -0.171106 -0.666965 -0.065225 V -0.169799 -0,666526 -0.041548 0.143811 -0.053985 V 0,042294 0,007904 0,501178 V 0,044668 -0.020894 0,503462 V 0,043755 -0.024969 0,525789 ...# Blender 3.6.0 Fichier MTL: «Aucun» # www.blender.org newmtl Material.001 NS 250.000000 KA 1.000000 1,000000 1,00000 KS 0,500000 0,500000 Ke 0,000000 0,00000 0,00000 NI 1.450000 D 1.00000 Illum 2 Map_kd Monitor.PNGCela complète la création du modèle 3D.
Partie 1: Définition constante
Tout d'abord, nous examinerons l'importation de chaque bibliothèque et les définitions constantes.
importer réagir à partir de "réagir"; import {canvas} de "@ react-trois / fibre"; import {orbitControls, html} de "@ react-trois / drei"; import {objloader} à partir de "trois / exemples / jsm / chargeurs / objloader"; import {mtllloader} à partir de "trois / exemples / jsm / chargeurs / mtllloader"; import {useloader} de "@ react-trois / fibre"; import * comme trois de "trois"; // ===== // Partie 1: Définition constante // ==== CAP CAMERA_POSITION = NOUVEAU TROIS.VECTOR3 (0, 0, 3); // Définir la position de la caméra dans le format Vector3 const Monitor_scale = 1; const monitor_rotation = [0, -math.pi / 2, 0]; const html_position = new Three.vector3 (0, 0,15, 0,06); const html_rotation = new Three.euler (-0.075, 0, 0); const html_scale = new Three.vector3 (2,45, 1,85, 0,5);Selon le modèle 3D que vous générez, des ajustements fins peuvent être nécessaires, veuillez donc utiliser ce qui suit comme référence pour jouer avec les nombres.
- Définition de position de la caméra
Camera_position: Définit la position initiale de la caméra- J'ai défini
nouveau trois.vector3 (0, 0, 3)pour placer la caméra devant le moniteur - Cela permet aux utilisateurs de visualiser correctement le moniteur depuis l'avant
- J'ai défini
- Définition de l'échelle du moniteur et de la rotation
Monitor_scale: Ajustez l'échelle globale du moniteur- Vous pouvez facilement modifier la taille de votre modèle en modifiant la valeur
Monitor_rotation: Spécifiez l'orientation du moniteur-
[0, -math.pi / 2, 0]et pointez le moniteur vers l'avant
-
- Définition de la position, de la rotation et de l'échelle des éléments HTML
Html_position: Définit l'emplacement de l'élément HTML (formulaire de connexion)- Les coordonnées sont finement ajustées pour être placées sur l'écran du moniteur
Html_rotation: Ajuste la rotation des éléments HTML- Ajustez-le pour bien paraître à l'intérieur de l'écran même si le moniteur a une légère inclinaison
Html_scale: Définit la taille de l'élément HTML- L'échelle est définie pour s'adapter sur l'écran du moniteur
Partie 2: Surveiller les composants d'affichage
La partie 2 charge les modèles 3D générés avec Meshy et construit des moniteurs et des écrans. Utilisez également HTML
// ==== // Partie 2: Composants d'affichage du moniteur // ===== const monitordisplay: react.fc = () => {const Materials = useloader (mtlloader, "/models/monitor.mtl"); const obj = useloader (objloader, "/models/monitor.obj", (lourdeur) => {matees.preload (); chargeur.setMaterials (matériaux);}); return (<> {/ * Monitor Model * /}<primitive object={obj} scale={MONITOR_SCALE} position={[0, 0, 0]} rotation={MONITOR_ROTATION} /> {/ * Élément html (pièce d'affichage) * /} <Html transform position={HTML_POSITION} distanceFactor={1} occlude scale={HTML_SCALE} rotation={HTML_ROTATION} ><div style={{ width: "300px", height: "200px", background: "white", borderRadius: "10px", boxShadow: "0 0 10px rgba(0,0,0,0.5)", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", padding: "10px", textAlign: "center", }} ><h2> Se connecter </h2><input type="text" placeholder="Username" style={{ marginBottom: "10px", padding: "5px" }} /><input type="password" placeholder="Password" style={{ marginBottom: "10px", padding: "5px" }} /> <button style={{ padding: "10px 20px", background: "blue", color: "white", border: "none", borderRadius: "5px", cursor: "pointer", }} >Soumettre</button></div></Html></> )); };- Modèles de moniteur de chargement
- Dessinez votre modèle avec précision à l'aide
d'Objloaderetde Mtllloader - Utilisez
Primitive
- Dessinez votre modèle avec précision à l'aide
- Intégration d'espace HTML et 3D
-
HTMLde Drei place les éléments HTML dans l'espace 3D -
la positionetl'échellepour la positionner afin qu'elle s'adapte parfaitement à l'écran du moniteur.
-
Partie 3: composant principal
la toile de React Three Fiber pour construire une scène 3D et afficher un écran de moniteur. Il établit également des restrictions sur la conception d'arrière-plan et le fonctionnement de la caméra pour améliorer l'apparence globale et la facilité d'utilisation.
// ==== // Partie 3: Composant principal // ==== CONS MESHY3DMODEL: react.fc = () => {return ( <div style={{ width: "100vw", height: "100vh", background: "linear-gradient(135deg, #1e3c72,rgb(78, 126, 211))", // グラデーション }} ><Canvas camera={{ position: CAMERA_POSITION, fov: 60 }}><ambientLight intensity={20} /><spotLight position={[10, 10, 10]} intensity={2} /> {/ * Monitor Affichage * /}<MonitorDisplay /> {/ * Limiter le fonctionnement de la caméra * /}<OrbitControls minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /></Canvas></div> )); }; Exporter par défaut Meshy3DModel;- Créer une scène 3D
CaméraParamètres initiauxPosition: utilisezla caméra_positionFOV: Set Field of View (réglé sur 60 cette fois)
- Ajout d'une lumière
lumière ambiante(Lumière ambiante)- Lumières qui éclairent toute la scène uniformément
-
l'intensité(réglé sur 20) pour rendre le modèle plus visible
mettre en lumière(Mettre en lumière)- Lumières qui illuminent le modèle à partir d'une direction spécifique
- Ajustez la position de la lumière et définissez le moniteur pour
souligner
- Disposition d'affichage du moniteur
- Appelez le
monitordisplaycréé dans la partie 2
- Appelez le
- Restrictions de fonctionnement de la caméra
- Limiter les opérations à horizontal uniquement
- Réglez
MinpolarangleetMaxpolaranglemath.pi / 2et désactivez la caméra de haut en bas (* parce que HTML ne se cache pas correctement) - Rendre votre moniteur visible de l'avant à tout moment
- Réglez
- Réglage du zoom
- Cette fois, j'utilise la fonction de zoom de l'appareil photo par défaut, mais vous pouvez également activer / désactiver en utilisant
Activezoom
- Cette fois, j'utilise la fonction de zoom de l'appareil photo par défaut, mais vous pouvez également activer / désactiver en utilisant
- Limiter les opérations à horizontal uniquement
- Paramètres d'arrière-plan
- Appliquer des gradients à l'arrière-plan de l'ensemble de la scène 3D à l'aide de CSS
linéaire
- Appliquer des gradients à l'arrière-plan de l'ensemble de la scène 3D à l'aide de CSS
dernièrement
Jusqu'à présent, nous avons expliqué les étapes de la génération d'un modèle 3D utilisant Meshy pour l'afficher dans un navigateur en utilisant React x Three.js. Ce projet est conçu pour être facile pour toute autre modélisation 3D ou trois.js.
- Utilisez des modèles 3D générés par AI avec meshy
- React x trois.js Intégration
- Ajout d'éléments HTML interactifs
- Ingéniosité visuelle
Utilisez Meshy pour voir divers modèles 3D!
📺 Regardez la démo sur YouTube : vous pouvez le regarder à partir de ce lien
Si vous avez trouvé ce tutoriel utile, veuillez vous abonner à notre chaîne YouTube et lui donner une note élevée!
De plus, le code source de ce projet est disponible sur GitHub.
Veuillez télécharger le code et l'essayer!
💾 Référentiel GitHub : vérifiez le code source de ce lien
Si vous avez trouvé cela utile, veuillez vous abonner à notre chaîne!
Nous continuerons à créer des leçons et travaillent à partir de TypeScript X React Three Fibre à l'avenir!
Nous ferons une annonce sur YouTube, alors veuillez vous abonner à notre chaîne YouTube et attendre les notifications!
📺 Regardez YouTube : vous pouvez le regarder à partir de ce lien
Si vous souhaitez savoir ce que React Three Fibre peut faire, veuillez vous référer à ce qui suit!
Nous avons des travaux faciles à utiliser disponibles!
- J'ai essayé de faire marcher les ours avec React x Three.js!
- J'ai essayé de faire danser un vieil homme sur React x Three.js!
- J'ai essayé d'afficher un modèle 3D avec React x Three.js!
- J'ai fait un bouton 3D qui explose dans React x Three.js!
- Réagir trois fibres x drei x Introduction à TypeScript! Fond 3D de style Poke Poke fait avec des objets standard!
![[Pour les débutants] Introduction pour réagir trois fibres x drei x typescript! Créer des animations de pixels et des animations dynamiques à partir d'images](https://hack-lab-256.com/wp-content/uploads/2025/02/hack-lab-256-samnail-16-300x169.jpg)
![[Explication complète] Apprenez avec React Three Fibre × TypeScript! Guide pratique pour transformer (position, rotation, échelle) pour les objets 3D](https://hack-lab-256.com/wp-content/uploads/2025/02/hack-lab-256-samnail-15-300x169.png)
![[Super facile] Introduction pour réagir trois fibres x drei x typescript! Fond 3D de style Poke Poke fait avec des objets standard!](https://hack-lab-256.com/wp-content/uploads/2025/02/hack-lab-256-samnail-14-300x169.jpg)
