[Super Introduction] Facile même pour les débutants! Créez un environnement 3D pour TypeScript X React Three Fibre avec Vite!

L'URL a été copiée!

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 les interfaces de nouvelle génération. À première vue, ces choses peuvent sembler avoir besoin de technologies de pointe, mais React Three Fibre , vous pouvez créer un monde 3D avec une facilité incroyable simplement en sachant React.

Cependant, il y a encore peu de matériel pédagogique qui peut être facilement appris sur le développement 3D en utilisant React Three Fibre et TypeScript.

React Three fibre est entièrement compatible avec l'écosystème React et est une bibliothèque qui vous permet de maximiser la puissance de trois.js avec React. Cependant, même la lecture de la documentation officielle est un peu un obstacle pour les débutants.
TypeScript devient un outil essentiel pour augmenter la sécurité et l'efficacité, mais peu d'articles de commentaires spécifiques peuvent être trouvés en conjonction avec React Three Fibre.

soigneusement la combinaison de React trois fibres et dactylographiques afin que même les débutants puissent le comprendre sans aucune difficulté

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

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

table des matières

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.

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 environnement 3D pour TypeScript X React Three Fiber avec Vite

Créez un nouveau projet React et créez un environnement 3D pour React Threefiber.
Le code que je créerai cette fois est publié sur GitHub, alors jetez un œil si vous en avez besoin.

💾 Référentiel GitHub : vérifiez le code source de ce lien

Github

GitHub - Aazutaku / React-Three-Fiber-TypeScript à TypeScript-X-React-Three-Fiber-Settup Contribuez au développement Aazutaku / React-Three-Fibre-TypeScript en créant un compte sur Github.

Construire un environnement REACT X TypeScript avec Vite

Cette fois, j'utiliserai Vite. Si vous avez beaucoup utilisé l'ARC (création-react-app), nous vous recommandons de saisir cette occasion pour passer à Vite.

C'est facile à faire. Exécutez ce qui suit dans le répertoire où vous souhaitez créer le projet.

NPM Créer Vite @ Dernier

Il vous sera demandé d'entrer et de sélectionner le nom et le cadre du projet, alors veuillez effectuer ce qui suit:

Nom du projet:… React-Three-Fiber-App Sélectionnez un framework: ›React Sélectionnez une variante:› TypeScript + SWC

C'est le seul moyen de créer un environnement REACT X TypeScript.
Essayez de lancer l'application.

CD React-Three-Fiber-App NPM installer NPM Run Dev

Je pense que vous pouvez maintenant lancer l'application Vite + React.

Construisez un environnement 3D pour TypeScript X React Three Fiber

Installez React Three Fibre dans l'application que vous avez créée avec VITE.
Utilisez la commande ci-dessous pour installer les bibliothèques requises.

Installation NPM TROIS @ REACT-Three / Fiber NPM Installer - Save-Dev @ Types / Three

Cela vous permettra à lui seul d'utiliser React Three Fibre, donc je vais essayer d'afficher la boîte.
Modifions app.tsx comme suit:

import {canvas} de "@ react-trois / fibre"; fonction app (): jsx.element {return (<Canvas><mesh><boxGeometry /><meshNormalMaterial /></mesh></Canvas> )} Exporter l'application par défaut

Vous verrez une petite boîte sur le côté gauche.

Je veux faire de la toile tout l'écran, donc je supprimerai app.css et réécrivez index.css avec les suivants.

#Root {largeur: 100vw; Hauteur: 100VH; } corps {marge: 0; }

Maintenant, l'écran entier est maintenant toile.

Cependant, si cela continue comme ça, il ne ressemblera pas à la 3D. . .
Essayons de modifier la position de la caméra.

La caméra tire une scène 3D du point de vue de la caméra virtuelle et affiche les résultats à l'écran. Tout comme avec une caméra réelle, vous pouvez définir la position , l'orientation , l'angle de visualisation

import {vector3} de "trois"; import {canvas} de "@ react-trois / fibre"; // constant const initial_camera_position: vector3 = new Vector3 (3, 3, 3); fonction app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><boxGeometry /><meshNormalMaterial /></mesh></Canvas> )); } Exporter l'application par défaut;

Comprenez-vous que cela rend la représentation 3D possible?

Présentation de React Three Drei

Présentation de React Three Drei, une collection utile de composants utilitaires pour React Three Fibre.
Il s'agit d'une bibliothèque couramment utilisée car elle vous permet d'ajouter facilement les fonctions trois.js couramment utilisées.

NPM Install @ React-Three / Drei

C'est la seule introduction.
Je vais essayer d'utiliser "OrbitControls". Il s'agit d'un composant qui vous permet de déplacer et de zoomer facilement la caméra.

import {vector3} de "trois"; import {canvas} de "@ react-trois / fibre"; import {orbitControls} de "@ react-trois / drei"; // constant const initial_camera_position: vector3 = new Vector3 (3, 3, 3); fonction app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><boxGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Maintenant, vous devriez pouvoir voir la case à partir d'un point de vue gratuit comme celui-ci!

Le code que j'ai créé cette fois est publié sur GitHub, alors veuillez le vérifier également!

💾 Référentiel GitHub : vérifiez le code source de ce lien

Github

GitHub - Aazutaku / React-Three-Fiber-TypeScript à TypeScript-X-React-Three-Fiber-Settup Contribuez au développement Aazutaku / React-Three-Fibre-TypeScript en créant un compte sur Github.

Si vous avez trouvé cela utile, veuillez vous abonner à notre chaîne!

📺 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

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

Partagez si vous le souhaitez!

L'URL a été copiée!

Qui a écrit cet article

Taku

Ceci est un blog que j'ai commencé à étudier la sécurité de l'information. En tant que nouvel employé, je serais heureux si vous pouviez regarder avec un cœur large.
Il y a aussi Teech Lab, qui est l'occasion d'étudier le plaisir en programmation, donc si vous êtes intéressé par le développement de logiciels, assurez-vous de jeter un œil!