![[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.jpg)
Récemment, les graphiques 3D sont utilisés dans le développement d'applications Web. En particulier, React Three Fibre (R3F) vous permet de gérer facilement trois.js en tant que composant de réaction.
Cette fois, nous utiliserons également drei implémenterons des arrière-plans 3D colorés "PokePoke" en utilisant React + TypeScript
📌 De plus, cette fois, nous n'utiliserons aucun modèle 3D spécial!
C'est ainsi que l'expression peut être fait en utilisant uniquement les objets de base (boîte, plan, etc.) fournis comme standard dans trois.js Nous vous ferons l'expérience.
💡 Image terminée
👇 Créez un fond 3D 👇
📺 Regardez la démo sur YouTube : vous pouvez le regarder à partir de ce lien
✅
avec des cartes colorées placées dans une forme circulaire✅
qui utilise des réflexions spéculaires✅ une interface utilisateur qui combine HTML / CSS
🚀 Jetons un coup d'œil au point que "aucun modèle 3D spécial n'est requis! Vous pouvez le faire avec juste des objets standard!"
Maintenant, écrivons du code!
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!
🚀Introduction aux éléments techniques: outils et bibliothèques à utiliser dans ce projet
Vous pouvez modifier les outils et les bibliothèques que vous utilisez pour un qui est facile à utiliser pour vous-même, mais ce projet expliquera cette hypothèse.
- Vscode
-
- Un éditeur de code gratuit fourni par Microsoft.
- Il n'a pas besoin d'être VSCODE, mais il y a de nombreuses extensions, donc je le recommande.
- Il est également recommandé d'inclure Eslint ou plus joli.
- Node.js
-
- Un runtime JavaScript construit sur le moteur JavaScript V8 de Chrome .
- Vous pouvez exécuter du code JavaScript en dehors de votre navigateur.
- Ceci est expliqué en fonction de l'hypothèse qu'il est déjà installé, veuillez donc le télécharger à partir de
https://nodejs.org/ja * Nous vous recommandons de télécharger la version stable à long terme de LTS.
- Vite
-
- Un outil de construction pour les projets Web modernes. Il se caractérise par sa rapide et légère
- Le "CRA (Create-React-App)" précédemment utilisé n'est pas répertorié sur le site officiel et est devenu une ancienne technologie.
- À partir de maintenant, Vite devrait être la meilleure option lors de la création d'applications avec React.
- Réagir
-
- Il s'agit d'une bibliothèque JavaScript pour la construction d'une interface interface (interface utilisateur). Il a été développé par Facebook et est toujours utilisé dans de nombreuses applications Web aujourd'hui.
- Trois.js
-
- Une bibliothèque JavaScript pour créer facilement des graphiques 3D. Il résume les opérations complexes de WebGL et permet un développement 3D intuitif.
- Il est facile de créer des graphiques 3D et est plus facile à utiliser que les opérations WebGL directes.
- Réagir trois fibres
-
- Il s'agit d'une bibliothèque qui permet à trois.js d'être utilisés avec React. Il combine la structure des composants de React avec le moteur 3D de Three.js.
- Trois.js peuvent être utilisés dans le style de développement de la réact, permettant un développement intuitif et efficace.
- Réagir trois drei
-
- Une collection de composants utilitaires utiles pour réagir trois fibres. Il est facile d'ajouter les fonctionnalités de trois.js couramment utilisées.
- Les fonctionnalités complexes trois.js peuvent être obtenues avec un code court, réduisant les coûts d'apprentissage.
🚀 Créez un "fond 3D de style pokepoke" avec React Three Fibre × Drei × TypeScript!
📌La construction de l'environnement est expliquée dans cet article
📌Ce temps, nous n'utiliserons aucun modèle 3D spécial, mais n'utiliserons que des objets standard qui sont disponibles dans React Three Fiber et React Three Drei.
Si vous souhaitez en savoir plus sur les objets standard, veuillez également vous référer à cet article
Veuillez vérifier GitHub pour le code source complet que vous avez créé cette fois.
💾 Référentiel GitHub : vérifiez le code source de ce lien
💡Create un formulaire de connexion !!
Tout d'abord, créez simplement un formulaire de connexion avec React.
Nous utilisons Tailwind-CSS comme bibliothèque CSS.
// === Composant de l'application principale === const LoginScreen = () => {return (<> {/ * Loginform * /} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Se connecter </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Se connecter</button></form></div></> )); }; Exporter l'écran de connexion par défaut;
💡Show Tolevas en arrière-plan !!
Placez votre toile d'abord et préparez une caméra et un éclairage.
import {canvas} de "@ react-trois / fibre"; import {orbitControls,} de "@ react-trois / drei"; // === Composant de l'application principale === const LoginScreen = () => {return (<> {/ * canvas en trois.js * /}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/* En écrivant */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Fonctionnement de la caméra * /} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /></Canvas> {/ * Formulaire de connexion créé à l'aide de html / css * /} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Se connecter </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Se connecter</button></form></div></> )); }; Exporter l'écran de connexion par défaut;
💡Place des objets de pack de cartes !!
Ensuite, placez un objet qui ressemble à un pack de carte Poke Poke en arrière-plan.
Avec cela seul, ne ressemble-t-il pas à l'écran pour sélectionner un pack Poke Poke? (mdr)
import {canvas} de "@ react-trois / fibre"; import {MeshReflectorMaterial, orbitControls,} de "@ react-trois / drei"; // === Placez une boîte inspirée d'un pack de cartes dans un cercle, centré sur [0,0,0] === const CircularCardpack = ({radius = 5, count = 10, cardize = [1, 1,5, 0.1], // largeur, hauteur, profondeur}: {radius ?: numéro; // nombrer, nombre, nombre? size}) => {const Cards = array.from ({longueur: count}); // Créer un return de tableau (<group> {cards.map((_, i) => { const angle = (i / count) * Math.PI * 2; // Angle on the circumference const x = radius * Math.cos(angle); // X coordinate const z = radius * Math.sin(angle); // Z coordinate const rotationY = -angle + Math.PI / 2; // Rotate the card facing the center return ( <mesh key={i} position={[x, -1, z]} // カードの位置 rotation={[0, rotationY, 0]} // カードの向き ><boxGeometry args={cardSize} /><meshStandardMaterial color={`hsl(${(i / count) * 360}, 70%, 50%)`} /></mesh> )); })}</group> )); }; // === Composant de l'application principale === const LoginScreen = () => {return (<> {/ * canvas en trois.js * /}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/* En écrivant */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Fonctionnement de la caméra * /} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /> {/ * Objet de carte * /}<CircularCardPack /></Canvas> {/ * Formulaire de connexion créé à l'aide de html / css * /} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Se connecter </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Se connecter</button></form></div></> )); }; Exporter l'écran de connexion par défaut;
💡 Placez une surface miroir sous le pack !!
Lorsque j'ai vérifié où j'ai choisi des packs Poke Poke, les packs semblent réfléchissants, alors j'ai essayé d'ajouter une surface miroir sous le pack de la même manière.
import {canvas} de "@ react-trois / fibre"; import {MeshReflectorMaterial, orbitControls,} de "@ react-trois / drei"; // === Mirror Components === const ReflectivePlane = () => {return (<><mesh rotation-x={-Math.PI / 2} position={[0, -2, 0]}><planeGeometry args={[100, 100]} /> {/ * Miroir plus grand pour couvrir tout l'arrière-plan * /} <MeshReflectorMaterial blur={[200, 100]} mixBlur={0.7} mixStrength={1} mixContrast={1} resolution={1024} mirror={1} depthScale={0.1} reflectorOffset={0.2} /></mesh></> )); }; // === Placez une boîte inspirée d'un pack de cartes en cercle avec le centre de [0,0,0] === const CircularCardpack = ({radius = 5, count = 10, cardize = [1, 1,5, 0.1], // largeur, hauteur, profondeur}: {radius ?: numéro; // nombrer, nombre, nombre; }) => {const Cards = array.from ({longueur: count}); // Créer un retour de tableau (<group> {cards.map((_, i) => { const angle = (i / count) * Math.PI * 2; // Angle on the circumference const x = radius * Math.cos(angle); // X coordinate const z = radius * Math.sin(angle); // Z coordinate const rotationY = -angle + Math.PI / 2; // Rotate the card facing the center return ( <mesh key={i} position={[x, -1, z]} // カードの位置 rotation={[0, rotationY, 0]} // カードの向き ><boxGeometry args={cardSize} /><meshStandardMaterial color={`hsl(${(i / count) * 360}, 70%, 50%)`} /></mesh> )); })}</group> )); }; // === Composant de l'application principale === const LoginScreen = () => {return (<> {/ * canvas en trois.js * /}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/* En écrivant */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Fonctionnement de la caméra * /} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /> {/ * Objet cardpack * /}<CircularCardPack /> {/ * Objet miroir * /}<ReflectivePlane /></Canvas> {/ * Formulaire de connexion créé à l'aide de html / css * /} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Se connecter </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Se connecter</button></form></div></> )); }; Exporter l'écran de connexion par défaut;
CHEF ADADDED !!
Cela n'en a pas besoin, mais j'étais un peu seul, donc j'ajouterai aussi un fond.
L'arrière-plan est également standard de React Three Drei.
import {canvas} de "@ react-trois / fibre"; import {Environment, MeshReflectorMaterial, OrbitControls,} de "@ react-trois / drei"; // === const ReflectivePlane = () => {return (<><mesh rotation-x={-Math.PI / 2} position={[0, -2, 0]}><planeGeometry args={[100, 100]} /> {/ * Miroir plus grand pour couvrir tout l'arrière-plan * /} <MeshReflectorMaterial blur={[200, 100]} mixBlur={0.7} mixStrength={1} mixContrast={1} resolution={1024} mirror={1} depthScale={0.1} reflectorOffset={0.2} /></mesh></> )); }; // === Placez une boîte inspirée d'un pack de cartes en cercle avec le centre de [0,0,0] === const CircularCardpack = ({radius = 5, count = 10, cardize = [1, 1,5, 0.1], // largeur, hauteur, profondeur}: {radius ?: numéro; // nombrer, nombre, nombre; }) => {const Cards = array.from ({longueur: count}); // Créer un retour de tableau (<group> {cards.map((_, i) => { const angle = (i / count) * Math.PI * 2; // Angle on the circumference const x = radius * Math.cos(angle); // X coordinate const z = radius * Math.sin(angle); // Z coordinate const rotationY = -angle + Math.PI / 2; // Rotate the card facing the center return ( <mesh key={i} position={[x, -1, z]} // カードの位置 rotation={[0, rotationY, 0]} // カードの向き ><boxGeometry args={cardSize} /><meshStandardMaterial color={`hsl(${(i / count) * 360}, 70%, 50%)`} /></mesh> )); })}</group> )); }; // === Composant de l'application principale === const LoginScreen = () => {return (<> {/ * canvas en trois.js * /}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/* En écrivant */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Fonctionnement de la caméra * /} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /> {/ * Objet cardpack * /}<CircularCardPack /> {/ * Objet miroir * /}<ReflectivePlane /> {/* Arrière-plan */}<Environment preset="night" background /></Canvas> {/ * Formulaire de connexion créé à l'aide de html / css * /} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Se connecter </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Se connecter</button></form></div></> )); }; Exporter l'écran de connexion par défaut;
dernièrement
Cette fois, nous avons reproduit l'écran de sélection du pack PokePoke en utilisant uniquement des objets standard, comme "Fond 3D de style pokepoke fabriqué à partir d'objets standard!"
Vous pouvez obtenir une compréhension détaillée des mouvements réels en regardant le YouTube ci-dessous!
📺 Regardez la démo sur YouTube : vous pouvez le regarder à partir de ce lien
📌Le code que j'ai créé cette fois est publié sur github, alors veuillez le vérifier aussi!
💾 Référentiel GitHub : vérifiez le code source de ce lien
📌Si vous utilisez le maillage et le remplacez par un objet 3D, vous pouvez même vous rapprocher de votre idéal !!
Meshy est un service qui vous permet de générer facilement des objets 3D à l'aide de l'IA.
En utilisant cela, vous pouvez facilement créer votre objet 3D idéal, donc je pense que vous pouvez vous rapprocher encore de votre idéal!
📺 Vérifiez le maillage : vous pouvez le vérifier sur la page officielle à partir 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)
