[Explication complète] Apprenez avec React Three Fibre × TypeScript! Guide pratique pour transformer (position, rotation, échelle) pour les objets 3D

Dans le développement d'applications 3D, les opérations inévitables d'objets tels que "position", "rotation" et "échelle" sont inévitables.
React Three Fibre (R3F) vous permet de construire intuitivement des scènes 3D tout en profitant des mécanismes basés sur les composants de React.

Dans cet article, nous expliquerons en profondeur comment manipuler librement les transformations des objets 3D en utilisant React Three Fibre X TypeScript!
Vous apprendrez tout, des bases aux applications de "position, rotation, échelle" ainsi que le code réel

La lecture de ceci devrait
vous permettre de comprendre le contrôle des objets 3D en douceur et de les utiliser dans votre implémentation Commençons maintenant les concepts de base de la transformation 🚀

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

Youtube

Hack Lab. 256 Partagez vos vidéos avec des amis, de la famille et des gens du monde entier

TypeScript x React Three Fibre

• Créez un environnement 3D pour TypeScript X React Three Fiber avec Vite
• Réagissez trois fibres × drei × typeScript! Bases des expressions 3D faites avec des objets standard
• Apprenez avec React Three Fibre × TypeScript! Transformée (position, rotation, échelle) des objets 3D
• * En préparation

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!

Cliquez ici pour les travaux en utilisant React Three Fiber

• 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!

Présentation des é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.

De plus, nous expliquerons comment construire un environnement dans " Créer un environnement 3D pour TypeScript X React Three Fibre avec Vite ", alors veuillez le vérifier.

Vous pouvez également lire

[Super Introduction] Facile même pour les débutants! Créez un environnement 3D pour TypeScript X React Three Fibre avec Vite! Récemment, sur le Web, nous avons vu de plus en plus de représentations 3D interactives et belles. Par exemple, les arrière-plans d'animation 3D, les conceptions de style jeu et même l'Internet de nouvelle génération ...

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.

🚀 Visualisez l'axe de référence dans l'espace 3D avec Axeshelper

Contrairement à 2D, le point important est qu'il y a trois axes dans l'espace 3D: x, y et z.

• X: bonne direction
• Y: vers le haut
• Z: En avant (direction vers moi)

Lors du placement, du déplacement ou de la rotation d'un objet 3D, il est souvent difficile de comprendre les critères de coordonnées.
Axeshelper utile dans de tels cas .

✅ Qu'est-ce que Axeshelper?

Axeshelper est un objet d'assistance qui affiche visuellement les axes de coordonnées dans une scène 3D .
axe X à code couleur dans l'espace 3D

Il est utile lorsque vous souhaitez vérifier l'orientation d'un objet ou lorsque vous voulez savoir comment le faire pivoter

🎯 Comment l'utiliser avec React Three Fibre !!

React Three Fibre le rend facile à utiliser en plaçant simplement
composant AxeShelper du canevas Vous pouvez également mettre un Axeshelper à l'intérieur du maillage

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; // === Composant de l'application principale === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /> {/ * Helper * /}<axesHelper /></Canvas></> )); }; Exporter l'application par défaut;

vous verrez l'axe de référence des coordonnées mondiales comme suit

• Axe x (rouge) → horizontal (gauche et droite)
• Axe y (vert) → vertical (de haut en bas)
• Axe Z (bleu) → Direction de profondeur (avant et arrière)

🚀 Déplacer un objet 3D en utilisant la position (coordonnées)

vous utilisez
la propriété de position pour contrôler la position d'un objet En définissant la position vous pouvez placer partout où vous aimez sur les axes x, y et z

La position est à l'origine un vecteur 3D, mais grâce à React Three Fibre, il est désormais possible de le passer comme un tableau de nombres.
En interne, React Three Fibre fonctionne en convertissant les tableaux en objets Vector3.

✅ Qu'est-ce que la position

position = {[x, y, z]} vous
permet spécifier les coordonnées mondiales de l'objet Cette coordonnée est basée sur trois.js, il est donc le suivant:

Système de coordonnées de base

• Axe x (rouge) → gauche (-) / droite (+)
• Axe y (vert) → en bas (-) / haut (+)
• Axe z (bleu) → avant (+) / dos (-)

🎯 Comment l'utiliser avec React Three Fibre !!

Déplacez-vous sur l'axe X

Par exemple, si vous définissez la position comme indiqué ci-dessous, les objets seront alignés côte à côte.
" axe x (rouge) → gauche (-) / droit (+)" Vous verrez le rouge à gauche et le vert à droite.

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; // === Composant de l'application principale === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Helper * /} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[-3, 0, 0]}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[3, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> )); }; Exporter l'application par défaut;

Déplacez-vous sur l'axe des y

Le réglage de la position comme indiqué ci-dessous entraînera la disposition verticalement des objets.
" l'axe y (vert) → en bas (-) / haut (+)" Vous verrez le rouge en bas et le vert en haut.

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; // === Composant de l'application principale === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Helper * /} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[0, -3, 0]}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[0, 3, 0]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> )); }; Exporter l'application par défaut;

Déplacez-vous sur l'axe Z

Si vous définissez la position comme indiqué ci-dessous, l'objet sera affiché à l'arrière.
" Z-axe (bleu) → avant (+) / dos (-)", vous devriez voir le vert devant et le rouge à l'arrière.

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; // === Composant de l'application principale === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Helper * /} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[0, 0, -3]}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[0, 0, 3]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> )); }; Exporter l'application par défaut;

Resisez les objets 3D en utilisant l'échelle

Si vous souhaitez modifier la taille d'un objet 3D, utilisez
la propriété SCALE Spécifiez l'échelle = {[x, y, z]}

✅ Qu'est-ce que l'échelle

L'échelle est une propriété qui définit le rapport d'échelle pour chaque axe d'un objet .
La valeur initiale est [1, 1, 1] , qui est la taille par défaut de l'objet.

• échelle = {[1, 1, 1]} → taille égale (taille par défaut)
• échelle = {[2, 2, 2]} → agrandir deux fois
• échelle = {[0,5, 0,5, 0,5]} → demi-taille
• échelle = {[1, 2, 1]} → agrandir deux fois plus longtemps que l'axe y (s'allonger verticalement)

🎯 Comment l'utiliser avec React Three Fibre !!

Changer la taille avec l'échelle = {[x, y, z]}

Le code ci-dessous place les boîtes à différentes
échelles Il doit être rouge = bleu / 2 taille. La taille est verte = bleu * 2.

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; // === Composant de l'application principale === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Helper * /} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]} scale={[1, 1, 1]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[-3, 0, 0]} scale={[0.5, 0.5, 0.5]}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[3, 0, 0]} scale={[2, 2, 2]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> )); }; Exporter l'application par défaut;

Changez la taille avec l'échelle- [x, y, z]

React trois fibres peuvent être modifiés en taille, comme Scale-X.
Essayez de changer la largeur du bleu, la hauteur du rouge et la profondeur pour le vert.

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; // === Composant de l'application principale === const app = () => {return (<><Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /> {/ * Helper * /} <axesHelper /><OrbitControls /><mesh position={[0, 0, 0]} scale-x={2}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[-3, 0, 0]} scale-y={2}><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[3, 0, 0]} scale-z={2}><boxGeometry /><meshStandardMaterial color="green" /></mesh></Canvas></> )); }; Exporter l'application par défaut;

🚀Rotation pour faire pivoter un objet 3D

Dans l'espace 3D, les objets peuvent être tournés pour afficher sous différents angles et ajouter une présentation dynamique.
Dans React Three Fibre, vous pouvez régler l'angle de rotation des axes x, y et z de l'objet en spécifiant la rotation = {[x, y, z]}

✅ Qu'est-ce que la rotation

rotation = {[x, y, z]} est une propriété qui spécifie l'angle de rotation d'un objet dans les radians .
La rotation est les axes de coordonnées locaux de l'objet .

• Rotation de l'axe x ( rotation = {[math.pi / 4, 0, 0]} ) → Inclinaison d'avant en arrière
• Rotation de l'axe y ( rotation = {[0, math.pi / 4, 0]} ) → Rotation à gauche et à droite
• Rotation de l'axe z ( rotation = {[0, 0, math.pi / 4]} ) → Inclinaison dans le sens horaire / dans le sens antihoraire

👉 L'angle de rotation doit être spécifié en radians par défaut.
1 radian = environ 57,3 degrés ( math.pi = 180 degrés)

En plus de math.pi , réagir trois fibres peuvent être définies à l'aide de trois.mathutils.degtorad

• Math.pi / 4 → 45°
• Trois.mathutils.degtorad (45) → 45°

🎯 Comment l'utiliser avec React Three Fibre !!

Aucune rotation

Tout d'abord, affichez l'état sans rotation.
Si vous définissez [0, 0, 0], l'état par défaut sera défini.

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; import * comme trois de "trois"; // === Composant de l'application principale === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><mesh position={[0, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></Canvas></> )); }; Exporter l'application par défaut;

Tourner sur l'axe des x

Par exemple, si vous définissez la rotation comme indiqué ci-dessous, l'objet s'inclinera d'avant en arrière.

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; import * comme trois de "trois"; // === Composant de l'application principale === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><mesh position={[0, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} rotation={[THREE.MathUtils.degToRad(45), 0, 0]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} rotation={[Math.PI / 4, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></Canvas></> )); }; Exporter l'application par défaut;

Tourner sur l'axe y

Par exemple, si vous définissez la rotation comme indiqué ci-dessous, l'objet tourne à gauche et à droite.

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; import * comme trois de "trois"; // === Composant de l'application principale === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><mesh position={[0, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} rotation={[0, THREE.MathUtils.degToRad(45), 0]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} rotation={[0, Math.PI / 4, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></Canvas></> )); }; Exporter l'application par défaut;

Tourner sur l'axe z

Par exemple, si vous définissez la rotation comme indiqué ci-dessous, l'objet tourne dans le sens horaire.

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; import * comme trois de "trois"; // === Composant de l'application principale === const app = () => {return (<> <Canvas><ambientLight intensity={1} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><mesh position={[0, 0, 0]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} rotation={[0, 0, THREE.MathUtils.degToRad(45)]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} rotation={[0, 0, Math.PI / 4]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></Canvas></> )); }; Exporter l'application par défaut;

🚀 Utilisez le groupe pour contrôler plusieurs objets à la fois

Lors de la création d'une scène 3D, vous
voudrez peut-être regrouper plusieurs objets et déplacer, les tourner ou les évoluer en même temps En réagir trois fibres, Les composants vous permettent gérer plusieurs objets en une seule unité .

✅ Qu'est-ce qu'un groupe

est un composant qui enveloppe trois. Groupe en trois.js qui position , la rotation et l'échelle des éléments enfants à la fois .

📌 Caractéristiques du groupe

• Définition de la position pour modifier le point de référence pour tous les éléments enfants
• Régler la rotation pour
• Échelle de réglage pour

🎯 Comment l'utiliser avec React Three Fibre !!

État par défaut

Le groupe est utilisé pour définir l'échelle sur [1, 1, 1]. Cela restera la valeur par défaut pour les éléments enfants.

• Bleu
  • Position: [0, 0, 0]
  • Échelle: [1, 1, 1]
  • Rotation: [0, 0, 0]
• rouge
  • Position: [- 3, 0, 0]
  • Échelle: [0,5, 0,5, 0,5]
  • Rotation: [0, 0, 0]
• vert
  • Position: [3, 0, 0]
  • Échelle: [2, 2, 2]
  • Rotation: [0, 0, 0]

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; // === Composant de l'application principale === const app = () => {return (<> <Canvas><ambientLight intensity={1} rotation={[0, 0, 0]} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><group scale={[1, 1, 1]}><mesh position={[0, 0, 0]} scale={[1, 1, 1]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} scale={[0.5, 0.5, 0.5]} rotation={[0, 0, 0]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} scale={[2, 2, 2]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></group></Canvas></> )); }; Exporter l'application par défaut;

Change Scale = {[3, 3, 3]}

Appliquer une échelle = {[3, 3, 3]} à un groupe

1. sont à l'échelle 3X
2. La position de chaque objet est également multipliée par trois (augmentation de distance relative)

En d'autres termes, il a la même image que ci-dessous.

• Bleu
  • Position: [0, 0, 0] * 3 = [0, 0, 0]
  • Échelle: [1, 1, 1] * 3 = [3, 3, 3]
  • Rotation: [0, 0, 0] * 3 = [0, 0, 0]
• rouge
  • Position: [-3, 0, 0] * 3 = [-9, 0, 0]
  • Échelle: [0,5, 0,5, 0,5] * 3 = [1,5, 1,5, 1,5]
  • Rotation: [0, 0, 0] * 3 = [0, 0, 0]
• vert
  • Position: [3, 0, 0] * 3 = [9, 0, 0]
  • Échelle: [2, 2, 2] * 3 = [6, 6, 6]
  • Rotation: [0, 0, 0] * 3 = [0, 0, 0]

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; // === Composant de l'application principale === const app = () => {return (<> <Canvas><ambientLight intensity={1} rotation={[0, 0, 0]} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><group scale={[3, 3, 3]}><mesh position={[0, 0, 0]} scale={[1, 1, 1]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /><axesHelper /></mesh><mesh position={[-3, 0, 0]} scale={[0.5, 0.5, 0.5]} rotation={[0, 0, 0]} ><boxGeometry /><meshStandardMaterial color="red" /><axesHelper /></mesh><mesh position={[3, 0, 0]} scale={[2, 2, 2]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /><axesHelper /></mesh></group></Canvas></> )); }; Exporter l'application par défaut;

Changer la rotation = {[0, trois.mathutils.degtorad (45), 0]}

Application de rotation = {[0, trois.mathutils.degtorad (45), 0]} à un groupe fait tourner tous les objets du groupe à 45 degrés autour de l'axe y . La position se déplace également en fonction de la rotation .

• Tous les objets appartenant à un groupe
• La position de chaque objet est disposée le long du système de coordonnées tourné
• Chaque rotation du maillage s'applique telle quelle, mais l'apparence est affectée par le groupe

import {orbitControls} de "@ react-trois / drei"; import {canvas} de "@ react-trois / fibre"; import * comme trois de "trois"; // === Composant de l'application principale === const app = () => {return (<> <Canvas><ambientLight intensity={1} rotation={[0, 0, 0]} /><directionalLight position={[10, 10, 10]} intensity={0.5} /><OrbitControls /><group scale={[1, 1, 1]} rotation={[0, THREE.MathUtils.degToRad(45), 0]} ><axesHelper /><mesh position={[0, 0, 0]} scale={[1, 1, 1]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="blue" /></mesh><mesh position={[-3, 0, 0]} scale={[0.5, 0.5, 0.5]} rotation={[0, 0, 0]} ><boxGeometry /><meshStandardMaterial color="red" /></mesh><mesh position={[3, 0, 0]} scale={[2, 2, 2]} rotation={[0, 0, 0]}><boxGeometry /><meshStandardMaterial color="green" /></mesh></group></Canvas></> )); }; Exporter l'application par défaut;

Création de contenu 3D en utilisant la transformation (position, rotation, échelle)

Créez un contenu 3D interactif simple, divertissant et interactif à l'aide de React Three Fiber et React Three Drei's Transform (position, rotation, échelle).

* En préparation

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

Youtube

Hack Lab. 256 Partagez vos vidéos avec des amis, de la famille et des gens du monde entier

TypeScript x React Three Fibre

• Créez un environnement 3D pour TypeScript X React Three Fiber avec Vite
• Réagissez trois fibres × drei × typeScript! Bases des expressions 3D faites avec des objets standard
• Apprenez avec React Three Fibre × TypeScript! Transformée (position, rotation, échelle) des objets 3D
• * En préparation

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!

Cliquez ici pour les travaux en utilisant React Three Fiber

• 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!