MENU

[Super Introduction] Réagir à trois fibres × drei × typeScript! Bases des expressions 3D faites avec des objets standard

publicité
Réagir trois.js

La conception 3D attire désormais beaucoup d'attention non seulement dans le développement de jeux, mais aussi dans le monde des sites Web et des interfaces de nouvelle génération. Avez-vous déjà pensé: "Je veux créer moi-même ce monde charmant!"?

Cependant, beaucoup de gens trouvent probablement que la 3D est difficile. La réalité est que les méthodes traditionnelles d'utilisation de trois.js nécessitent directement des configurations complexes et du code d'écriture, ce qui est un peu difficile pour les débutants.

Pendant ce temps, React Three Fibre vous permettant de réaliser facilement et intuitivement la représentation 3D dans l'écosystème React De plus, typescript permet un développement plus sûr et plus efficace.

Cependant, il y a encore très peu d'explications selon lesquelles même les débutants peuvent apprendre la combinaison de réagir trois fibres et dactylographiques sans aucun effort.

Dans cet article, nous expliquerons les bases du développement 3D Nous introduisons également des exemples pratiques de création d'arrière-plan et d'animations de style jeu à l'aide d'objets standard (géométrie et matériaux)

ceux qui sont nouveaux dans le développement 3D peuvent le lire en toute confiance, alors assurez-vous de commencer par cela ensemble.

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.

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.

Maillot

Pour dessiner des objets 3D, vous utilisez le composant maillé.
Le maillage se compose de géométries et de matériaux.

Des propriétés existent telles que la position, la rotation, l'échelle, CastShadow et ReceivShadow.
Vous pouvez également définir des événements tels que OnClick. Pour plus d'informations, consultez la documentation Three.js.

Vous pouvez également lire
TROIS DOCS 
fonction app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh position={[0, 1, 0]} // 位置 rotation={[Math.PI / 4, 0, 0]} // 回転（ラジアン） scale={[2, 2, 2]} // スケール（拡大） castShadow // 影を投げる receiveShadow // 影を受け取る ><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="red" /></mesh></Canvas> )); } Exporter l'application par défaut;

Géométrie

Qu'est-ce que la géométrie?

La géométrie définit la position, la taille et la connectivité des sommets, des bords et des faces qui composent un objet.

  • Vertices (bleu): Ce sont des points individuels dans l'espace 3D qui définissent la forme de l'objet. Chaque sommet a des coordonnées (x, y, z) qui détermine sa position dans l'espace 3D. Les sommets sont connectés sur les bords pour former un visage
  • Edge (vert): les bords sont des lignes de connexion des sommets. Ceux-ci définissent la forme de l'objet et peuvent être droits ou incurvés. Chaque bord se compose d'un ensemble d'index qui se réfèrent aux sommets.
  • Face (jaune): les faces sont des polygones formés en connectant les sommets. Les faces définissent la surface d'un objet et peuvent être des triangles, des carrés ou d'autres polygones. Chaque visage se compose également d'un ensemble d'index faisant référence aux sommets.

Types de géométries

React Three Fibre (Three.js) a beaucoup de géométrie prête à l'emploi.
Voici quelques-uns des plus courants.

boxgeométrie

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;

sphèreométrie

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><sphereGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

plan de planométrie

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><planeGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

cercle

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><circleGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

cylindregeométrie

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><cylinderGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

capsulegeométrie

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><capsuleGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

conegeométrie

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><coneGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

dodécaédrongeométrie

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><dodecahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

extrudéométrie

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><extrudeGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

icosaèdreométrie

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><icosahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

lathéométrie

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><latheGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

octaédongeométrie

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><octahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

polyèdreométrie

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 {const vertices = [0, 0, 1, // vertex 1 0, 1, 0, // sommet 2 1, 0, 0, // sommet 3 -1, 0, 0, // sommet 4]; Indices const = [0, 1, 2, // face 1 0, 1, 3, // face 2 0, 2, 3, // face 3 1, 2, 3, // face 4]; retour ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><polyhedronGeometry args={[vertices, indices, 1, 0]} /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

tétraèdreométrie

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><tetrahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Torusgeométrie

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><torusGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Torusknotgeométrie

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><torusKnotGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

tubegeométrie

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><tubeGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

ringgeométrie

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><ringGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

shapegeométrie

import {forme, 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); Function app (): jsx.element {const Fage = new Shape (); // définir la forme de la forme du cœur.moveto (0, 0,5); forme.Beziercurveto (0,5, 1, 1, 0,5, 0, 0); forme.Beziercurveto (-1, 0,5, -0,5, 1, 0, 0,5); retour ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><shapeGeometry args={[shape]} /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

bord de bord

import {vector3, boxGeometry} de "trois"; import {canvas} de "@ react-trois / fibre"; Import {arêtes, MeshDiscardMaterial, OrbitControls} de "@ React-Three / Drei"; // constant const initial_camera_position: vector3 = new Vector3 (3, 3, 3); fonction app (): jsx.element {return (<Canvas camera={{ position: INITIAL_CAMERA_POSITION }}> {/ * react-trois fibres uniquement * /} <lineSegments><edgesGeometry args={[new BoxGeometry(1)]} /><lineBasicMaterial color="blue" /></lineSegments> {/ * react-trois-drii * /} <mesh position={[2, 0, 0]}><boxGeometry args={[1, 1, 1]} /><MeshDiscardMaterial /><Edges color="red" /></mesh><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Si vous utilisez des bords avec React-Three-Fibre uniquement, vous devrez utiliser trois.js directement pour les args.
D'un autre côté, React-Three-Drei vous permet d'écrire simplement sans utiliser trois.js directement, mais les bords de React-Three-Drei dessinent également des faces, vous devez donc utiliser MeshDiscardMaterial

wiregeométrie

import {vector3, boxGeometry} de "trois"; import {canvas} de "@ react-trois / fibre"; import {orbitControls, wireframe} 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 }}> {/ * react-trois fibres * /} <lineSegments><wireframeGeometry args={[new BoxGeometry(1)]} /><lineBasicMaterial color="blue" /></lineSegments> {/ * react-trois-drii * /}<mesh position={[2, 0, 0]}><boxGeometry args={[1, 1, 1]} /><Wireframe stroke="red" /></mesh> {/ * Une autre solution pour réagir-trois fibres * /} <mesh position={[4, 0, 0]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="green" wireframe /></mesh><OrbitControls /><ambientLight /></Canvas> )); } Exporter l'application par défaut;

Un composant React-Three-Drii appelé Wireframe attire également les faces.
Une autre solution pour réagir-trois-fibres pourrait être la plus facile à utiliser.

Matériels

Le matériau définit des informations qui détermine le matériau qui détermine à quoi ressemble la surface d'un objet lorsqu'il est dessiné.
Des propriétés existent telles que la couleur de l'objet, la texture, la transparence et la réflectivité.

Pour vérifier le matériau, vous avez besoin d'une lumière. J'expliquerai les lumières à une autre occasion, donc cette fois, veuillez inclure Ambientlight et Directionallight comme suit.

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><torusKnotGeometry /><meshNormalMaterial /></mesh><ambientLight intensity={0.5} /> // ajouter de la lumière<directionalLight position={[0, 5, 5]} intensity={0.7} /> // ajouter de la lumière<OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Types de matériaux en trois fibres (trois.js)

React trois fibres (trois.js) possède de nombreux matériaux pré-fabriqués.
Voici quelques-uns des plus courants.

meshbasicmaterial

MeshbasicMaterial est un matériau simple qui n'est pas affecté par les sources de lumière. Affiche les textures et les couleurs telles qu'elles sont.
Il est souvent utilisé dans les wireframes, le rendu non réel, les arrière-plans, etc.

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><torusKnotGeometry /><meshBasicMaterial color="red" /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

maillot

Meshnormalmaterial est un matériau spécial qui visualise les normales des sommets et des surfaces. Ceci n'est pas non plus affecté par la lumière.
Il est souvent utilisé à des fins de débogage pour vérifier si la structure et les normales du modèle sont correctes.

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><torusKnotGeometry /><meshNormalMaterial /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Meshlambertmaterial

MeshlambertMaterial est un matériau léger avec seulement une réflexion diffuse. Il calcule les réflexions diffuses et crée un aspect mat. C'est léger, mais pas réaliste.

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><torusKnotGeometry /><meshLambertMaterial color="red" /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

mshphongmaterial

Meshphongmaterial est un matériau à réflexion spéculaire en plus des propriétés de Lambert. Il est possible d'exprimer des réflexions spéculaires, mais ce n'est pas non plus réaliste.

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><torusKnotGeometry /><meshPhongMaterial color="red" shininess={100} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

MeshstandardMaterial

MeshstandardMaterial est un matériau qui prend en charge le PBR (rendu basé sur le physique). Recrée des reflets et des ombres de lumière réalistes. Vous pouvez définir le métal et la rugosité, créant une texture assez réaliste.

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><torusKnotGeometry /><meshStandardMaterial color="red" metalness={1} roughness={0.5} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

meshphysicalmaterial

Le matériau maillé est une extension de
la matériau meshstandard Des propriétés physiques avancées telles que la transmission, la réflectance et la couche transparente ont été ajoutées. Il est possible d'exprimer une transmission et une réfraction telles que des gouttelettes de verre ou d'eau. Il permet d'exprimer de manière plus réaliste, mais cela nécessite également plus d'efforts de calcul.

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><torusKnotGeometry /><meshPhysicalMaterial color="red" metalness={1} // 金属感を最大に roughness={0.5} // 表面の粗さ（滑らか） clearcoat={0.8} // 反射の強さ clearcoatRoughness={0.1} // 反射面の粗さ /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;
CaractéristiquesMeshlambertmaterialmshphongmaterialMeshstandardMaterialmeshphysicalmaterial
Modèle d'ombrageOmbrage de LambertOmbrage de fonteOmbrage physique (PBR)Ombrage physique (PBR)
Sensation métalliqueaucunaucunSensation métallique exprimée avec métaltéSensation métallique exprimée avec métalté
RugositéaucunaucunExprimer la rugosité de surface avec rugositéExprimer la rugosité de surface avec rugosité
RéflexionaucunRéflexion spéculaire ( de la brillance )Réflexion simple possibleAjouter une couche réfléchissante avec une couche de filet
Transparence et réfractionaucunaucunaucunExprimé en utilisant la transparence et la réfractionratio
performancegrande vitesseIl est un peu tardUn peu lourdLe plus lourd (intensité de gestion)
Objectif d'utilisationScènes simples, axée sur les performancesSurfaces brillantes (plastique, métal)Scènes qui nécessitent une expression physique réalisteScènes qui nécessitent une réflexion réaliste, une réfraction, une sensation métallique et une transparence
CaractéristiquesRéflexion diffuse simpleRéflexions diffuses et spéculaires (points forts)Réflexion physiquement exacte, réflexion diffuse, sensation métallique, rugositéRéflexion physiquement précise, transparence, réfraction, sensation métallique

MeshtoonMaterial

MeshtoonMaterial est un matériau avec un ombrage semblable à un style d'animation. Plutôt que d'être réaliste, il est souvent utilisé pour exprimer des styles caricaturaux.

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><torusKnotGeometry /><meshToonMaterial color="red" /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

meshdepthmaterial

MeshDepthMaterial est un matériau spécial qui modifie la couleur en fonction de la profondeur. La distance entre l'objet et la caméra est exprimée en couleur. Celui-ci n'est pas non plus affecté par la lumière.

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><torusKnotGeometry /><meshDepthMaterial /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

maillot

MeshmatCapMaterial est un matériau qui utilise des textures 2D (MATCAP) pour reproduire l'ombrage réaliste sans considérer la source lumineuse.
L'image contient des informations légères, ce qui permet de créer des expressions réalistes.

import {vector3} de "trois"; import {canvas, useloader} de "@ react-trois / fibre"; import {orbitControls} de "@ react-trois / drei"; import {textureLoader} de "trois"; // constant const initial_camera_position: vector3 = new Vector3 (3, 3, 3); fonction app (): jsx.element {// Chargez la texture matcap avec textureLoader const MatcapTexture = useloader (textureLoader, "https://threjs.org/examples/textures/matcaps/matcap-porcelain-white.jpg"); retour ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshMatcapMaterial matcap={matcapTexture} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Types de matériaux en réaction trois drei

React Three Drei propose des matériaux encore plus avancés.

Meshdiscardmaterial

MeshDiscardMaterial est un matériau qui ne rend rien. Vous pouvez masquer des objets de la scène tout en affichant des ombres et des enfants.

import {canvas} de "@ react-trois / fibre"; import {MeshDiscardMaterial, orbitControls} de "@ react-trois / drei"; import {vector3} de "trois"; const initial_camera_position = new Vector3 (3, 3, 3); fonction app (): jsx.element {return (<Canvas shadows camera={{ position: INITIAL_CAMERA_POSITION }} style={{ background: "lightblue" }} ><mesh castShadow receiveShadow><torusKnotGeometry /><MeshDiscardMaterial /></mesh> {/ * Ground (Sharp Shadow) * /} <mesh receiveShadow position={[0, -1.8, 0]} rotation={[-Math.PI / 2, 0, 0]} ><planeGeometry args={[5, 5]} /><meshStandardMaterial color="lightgray" /></mesh> {/ * Paramètres d'éclairage * /} <ambientLight intensity={0.3} /><directionalLight position={[5, 5, 5]} intensity={0.7} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} /> {/ * Fonctionnement de la caméra * /}<OrbitControls /></Canvas> )); } Exporter l'application par défaut;

MeshdistortMaterial

MeshdistortMaterial est un matériau qui peut déformer la géométrie. Il se caractérise non seulement par la couleur et la texture, mais aussi le mouvement.

import {vector3} de "trois"; import {canvas} de "@ react-trois / fibre"; import {MeshDistOrtMaterial, OrbitControls} de "@ React-Three / Drei"; // constant const initial_camera_position: vector3 = new Vector3 (3, 3, 3); fonction app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><MeshDistortMaterial distort={1} speed={10} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

MeshReflectorMaterial

MeshReflectorMaterial est un matériau qui vous permet d'ajouter facilement des réflexions et de flou à votre maillage. L'expansion de MeshstandardMaterial facilite la création d'une expression de type miroir.

import {vector3} de "trois"; import {canvas} de "@ react-trois / fibre"; Import {MeshDistortMaterial, MeshReflectorMaterial, 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><torusKnotGeometry /><MeshDistortMaterial distort={1} speed={10} /></mesh> {/ * Surface réfléchissante (sol) * /} <mesh rotation-x={-Math.PI / 2} position={[0, -3, 0]}><planeGeometry args={[10, 10]} /><MeshReflectorMaterial blur={[200, 100]} // X, Y方向のぼかしを設定 mixBlur={0.5} // ぼかしの強さを調整 mixStrength={0.7} // 反射の強さ mixContrast={1} // 反射のコントラストを調整 resolution={512} // 解像度、値を上げるほどきれいになるがパフォーマンスに影響 mirror={1} // 環境から反射を取得 depthScale={0.1} // 深さのスケール reflectorOffset={0.2} // 反射面のオフセット /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Meshtransmissionmaterial

MeshTransmissionmaterial est un matériau qui est une version améliorée de la matériau maillé. Il est conçu pour faciliter la gestion de la transmission et de la réfraction. majeure est qu'il est facile de définir l'IOR

IOR (indice de réfraction) : Il s'agit d'un nombre qui représente le rapport entre la vitesse à laquelle la lumière se déplace à travers le matériau et la vitesse à laquelle il se déplace dans l'air, et lorsque cela peut être facilement réglé, il devient très facile de décrire le verre, le diamant, l'eau, etc.

  • Air ior: 1.0
  • Verre ior: 1.5
  • Diamond ior: 2.42
  • Eau ior: 1.33
import {canvas} de "@ react-trois / fibre"; import {caustics, MeshTransmissionMaterial, orbitControls,} de "@ react-trois / drei"; import {vector3} de "trois"; // position de caméra initiale const initial_camera_position = new Vector3 (3, 3, 3); fonction app (): jsx.element {return ( <Canvas shadows camera={{ position: INITIAL_CAMERA_POSITION, fov: 45 }}><color attach="background" args={["#f0f0f0"]} /><Caustics color="#FF8F20" position={[0, -0.5, 0]} lightSource={[5, 5, -10]} worldRadius={0.01} ior={1.2} intensity={0.005} causticsOnly={false} backside={false} ><mesh castShadow receiveShadow position={[-2, 0.5, -1]} scale={0.5}><sphereGeometry args={[1, 64, 64]} /><MeshTransmissionMaterial resolution={1024} distortion={0.25} color="#FF8F20" thickness={1} anisotropy={1} /></mesh></Caustics><mesh><boxGeometry /><meshNormalMaterial /></mesh> {/ * Paramètres d'éclairage * /}<ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /> {/ * Fonctionnement de la caméra * /}<OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Maillot

Meshwoblempaterrial est un matériau qui peut secouer et géométrie ondulée. Il s'agit également d'un matériau qui peut être appliqué au mouvement.

import {vector3} de "trois"; import {canvas} de "@ react-trois / fibre"; import {MeshwObbleraterial, 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><torusKnotGeometry /><MeshWobbleMaterial factor={1} speed={10} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Softshadows

Softshadows est un composant qui facilite l'ajout d'ombres plus réalistes, bien que ce ne soit pas un matériau. Vous pourrez exprimer facilement les nuances des ombres.

import {canvas} de "@ react-trois / fibre"; import {softshadows, orbitControls} de "@ react-trois / drei"; import {vector3} de "trois"; const initial_camera_position = new Vector3 (3, 3, 3); fonction app (): jsx.element {return (<Canvas shadows camera={{ position: INITIAL_CAMERA_POSITION }} style={{ background: "lightblue" }} >{/ * Activer Softshadows * /} <SoftShadows /><mesh castShadow receiveShadow><torusKnotGeometry /><meshStandardMaterial color="red" /></mesh> {/ * Ground (Sharp Shadow) * /} <mesh receiveShadow position={[0, -1.8, 0]} rotation={[-Math.PI / 2, 0, 0]} ><planeGeometry args={[5, 5]} /><meshStandardMaterial color="lightgray" /></mesh> {/ * Paramètres d'éclairage * /} <ambientLight intensity={0.3} /><directionalLight position={[5, 5, 5]} intensity={0.7} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} /> {/ * Fonctionnement de la caméra * /}<OrbitControls /></Canvas> )); } Exporter l'application par défaut;

C'est un peu déroutant, mais il peut être plus facile à comprendre par rapport aux ombres de MeshDiscardMaterial mentionné plus tôt.

À propos de l'avant et de l'arrière du matériel

Un matériau a un côté qui définit de quel côté rendu.
Par défaut, il est FONTSIDE, mais vous pouvez également rendre le dossier arrière en définissant le côté arrière.

import {vector3} de "trois"; import {canvas} de "@ react-trois / fibre"; import {orbitControls} de "@ react-trois / drei"; import * comme trois de "trois"; // constant const initial_camera_position: vector3 = new Vector3 (3, 3, 3); fonction app (): jsx.element {return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh position={[0, 0, 0]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="red" side={THREE.FrontSide} // Optional as it's the default /></mesh><mesh position={[2, 0, 0]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="red" side={THREE.BackSide} // Optional as it's the default /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 3, 3]} intensity={0.7} /><OrbitControls /></Canvas> )); } Exporter l'application par défaut;

Création de contenu 3D en utilisant la géométrie et les matériaux standard

Créez un contenu 3D interactif simple, divertissant et interactif à l'aide de la géométrie et des matériaux standard de React Three Fiber et React Three Drei.

Écran de connexion (style de jeu)

J'ai reproduit l'écran pour sélectionner un pack Poke Poke et je l'ai personnalisé un peu !!
arrière-plan 3D que je crée est

📺 Regardez la démo sur YouTube : vous pouvez le regarder à partir de ce lien

Youtube
[Super facile] Introduction pour réagir trois fibres x drei x typescript! Fond 3D de style Poke Poke fait avec des objets standard! Réagir trois fibres x drei x Introduction à TypeScript! Fond 3D de style Poke Poke fait avec des objets standard! Cliquez sur l'écran pour sélectionner le pack Pokepoke, qui est populaire récemment, pour voir réagir trois fibres et réagir trois drei ...
Vous pouvez également lire
[Super facile] Introduction pour réagir trois fibres x drei x typescript! Fond 3D de style Poke Poke fait avec des objets standard! Récemment, il y a eu un nombre croissant de cas où les graphiques 3D sont utilisés dans le développement d'applications Web. En particulier, si vous utilisez React Three Fiber (R3F), vous pouvez facilement en faire un composant React, ce qui facilite l'utilisation de trois…

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

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
Réagir trois.js
Partagez si vous le souhaitez!

Qui a écrit cet article

Avatar de Taku 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!

Articles connexes

table des matières