Points de base
Je fais un jeu appelé "Chameleon Charm". Il est construit en utilisant trois.js, react et webgl. Cet article décrit comment ces technologies fonctionnent ensemble en utilisant React-Three-Renderer (abrégé en R3R).
Veuillez consulter le Guide de démarrage WebGL et le guide React et JSX Getting Started sur SitePoint pour une introduction à React et WebGL. Cet article et le code d'accompagnement utilisent la syntaxe ES6.
Le début de tout
Il y a quelque temps, Pete Hunt a fait une blague dans la chaîne #rectjs IRC, disant qu'il utiliserait React pour créer un jeu:
Je parie que nous pouvons faire un tireur à la première personne avec React! L'ennemi a
Quelques années plus tard, j'ai fait exactement cela.
Chameleon Chameon est un jeu qui collecte des accessoires améliorés qui vous permettront de vous rétrécir pour résoudre le labyrinthe fractal infini. Je travaille en tant que développeur React depuis quelques années et je suis curieux de savoir s'il existe un moyen d'utiliser React to Drive Three.js. À cette époque, R3R a attiré mon attention.
Pourquoi choisir React?
Je sais ce que vous pensez: pourquoi? S'il vous plaît laissez-moi vous expliquer. Voici quelques raisons d'envisager d'utiliser React pour conduire des scènes 3D:
<player></player>, <wall></wall>, <level></level>, et plus encore. <texture require="" src="%7B"></texture> Créons un scénario pour voir comment tout cela fonctionne.
react et webgl
J'ai créé un exemple de référentiel GitHub pour travailler avec cet article. Clone le référentiel et exécutez le code comme dans le Readme et continuez à apprendre. Il dispose d'un robot 3D SitePointy comme personnage principal!
AVERTISSEMENT: R3R est toujours en phase de test. Son API est instable et pourrait changer à l'avenir. Actuellement, il ne traite qu'un sous-ensemble de trois.js. Je l'ai trouvé suffisamment complet pour construire un jeu complet, mais vos résultats peuvent varier.
Le principal avantage de l'utilisation de React to Drive WebGL est que notre code de vue est découplé à partir de la logique du jeu. Cela signifie que les entités que nous rendons sont petites et faciles à comprendre.
R3R expose une API déclarative qui résume trois.js. Par exemple, nous pouvons écrire:
<code><scene>></scene>
<perspectivecamera> position={ new THREE.Vector3( 1, 1, 1 )
/>
>
</perspectivecamera></code> Maintenant, nous avons une scène 3D vide avec un appareil photo. L'ajout d'un maillage à une scène est aussi simple que d'inclure un composant <mesh></mesh> et de lui donner <geometry></geometry> est aussi simple que <material></material>.
<code><scene>></scene>
…
<mesh>></mesh>
<boxgeometry></boxgeometry> width={ 1 }
height={ 1 }
depth={ 1 }
/>
<meshbasicmaterial></meshbasicmaterial> color={ 0x00ff00 }
/>
>
</code>Dans les coulisses, cela créera un trois.scene et ajoutera automatiquement une grille avec trois.boxgeométrie. R3R gère les différences entre les vieilles scènes et tous les changements. Si vous ajoutez un nouveau maillage à la scène, le maillage d'origine ne sera pas recréé. Tout comme l'utilisation de React et Dom normal, les scènes 3D mettent uniquement à jour les différences.
Parce que nous travaillons dans React, nous pouvons détacher l'entité de jeu dans le fichier composant. Le fichier robot.js dans le référentiel d'exemples montre comment représenter un rôle majeur à l'aide du code de vue Pure React. Il s'agit d'un composant "fonction sans état", ce qui signifie qu'il n'enregistre aucun état local:
<code>const Robot = ({ position, rotation }) => <group></group> position={ position }
rotation={ rotation }
>
<mesh> rotation={ localRotation }></mesh>
<geometryresource></geometryresource> resourceId="robotGeometry"
/>
<materialresource></materialresource> resourceId="robotTexture"
/>
>
>;
</code> Maintenant, nous inclurons <robot></robot> dans notre scène 3D!
<code><scene>></scene>
…
<mesh>></mesh>…>
<robot></robot> position={…}
rotation={…}
/>
>
</code>Vous pouvez afficher plus d'exemples d'API sur le référentiel GitHub R3R, ou voir les paramètres d'échantillonnage complet dans le projet inclus.
L'autre moitié de l'équation est de faire face à la logique du jeu. Ajoutons des animations simples à notre robot sitepoineté.
Comment fonctionne la boucle de jeu traditionnelle? Ils acceptent les entrées des utilisateurs, analysent l'ancien «État mondial» et reviennent dans le nouvel État mondial pour le rendu. Pour plus de commodité, stockons l'objet "Game State" dans l'état des composants. Dans un projet plus mature, vous pouvez déplacer l'état de jeu vers Redux ou Flux Storage.
Nous utiliserons le rappel API requestAnimationFrame du navigateur pour conduire notre boucle de jeu et exécuter la boucle dans GameContainer.js. Pour animation le robot, calculons un nouvel emplacement en fonction de l'horodatage transmis à requestAnimationFrame, puis stockons le nouvel emplacement dans l'État.
<code><scene>></scene>
<perspectivecamera> position={ new THREE.Vector3( 1, 1, 1 )
/>
>
</perspectivecamera></code> Appeler setState() déclenchera le rendement du composant enfant et mettra à jour la scène 3D. Nous passons l'état du composant conteneur en composant de démonstration: <game></game>
<code><scene>></scene>
…
<mesh>></mesh>
<boxgeometry></boxgeometry> width={ 1 }
height={ 1 }
depth={ 1 }
/>
<meshbasicmaterial></meshbasicmaterial> color={ 0x00ff00 }
/>
>
</code>Maintenant, nous pouvons écrire une boucle de jeu concise et claire qui ne contient que des appels de fonction:
<code>const Robot = ({ position, rotation }) => <group></group> position={ position }
rotation={ rotation }
>
<mesh> rotation={ localRotation }></mesh>
<geometryresource></geometryresource> resourceId="robotGeometry"
/>
<materialresource></materialresource> resourceId="robotTexture"
/>
>
>;
</code>
<code><scene>></scene>
…
<mesh>></mesh>…>
<robot></robot> position={…}
rotation={…}
/>
>
</code>Gestion des ressources
<code>// …
gameLoop( time ) {
this.setState({
robotPosition: new THREE.Vector3(
Math.sin( time * 0.01 ), 0, 0
)
});
}
</code>Pour d'autres ressources (telles que les modèles 3D), vous devez toujours utiliser le chargeur intégré de trois.js (comme JSONLoader) pour les gérer. J'ai essayé d'utiliser un chargeur WebPack personnalisé pour charger des fichiers de modèle 3D, mais je me suis retrouvé avec trop de travail et aucun avantage. Il est plus facile de considérer les modèles comme des données binaires et d'utiliser un chargeur de fichiers pour les charger. Cela peut toujours implémenter une surcharge en temps réel des données du modèle. Vous pouvez le voir dans l'exemple de code.
DEBUG
R3R prend en charge les extensions d'outils du développeur React pour Chrome et Firefox. Vous pouvez vérifier votre scène comme si vous vérifiez un Dom normal! Planant sur des éléments de l'inspecteur affiche leurs boîtes de délimitation dans la scène. Vous pouvez également survoler la définition de texture pour voir quels objets de la scène utilisent ces textures.
Précautions de performance
Lors de la construction de charme caméléon, j'ai rencontré des problèmes de performances uniques à ce flux de travail.
setState() plusieurs fois par trame entraînera un double rendu et dégrader les performances. setState()
c'est tout!
Consultez le charme Chameleon pour savoir ce que vous pouvez faire avec ce cadre. Bien que cette chaîne d'outils soit encore jeune, j'ai constaté que l'utilisation de R3R's React est cruciale pour organiser clairement mon code de jeu WebGL. Vous pouvez également consulter la page R3R petite mais croissante pour voir des exemples de code bien organisés.
Cet article a été évalué par des pairs par Mark Brown et Kev Zettler. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!
FAQ pour la construction de jeux avec ReactJS et WebGLQuelles sont les conditions préalables à la construction de jeux avec ReactJS et WebGL?
Comment intégrer l'unité avec ReactJS?
Quelles sont les différentes façons de créer des applications 3D en utilisant React?
WebGL vous permet de créer des graphiques 3D interactifs directement dans votre navigateur, sans plug-ins. Vous pouvez utiliser l'API de WebGL pour créer des graphiques, des animations et des jeux complexes 3D. Cependant, l'API de WebGL est de bas niveau et il peut être compliqué à utiliser directement. Par conséquent, de nombreux développeurs préfèrent utiliser des bibliothèques comme Three.js qui fournissent un niveau d'interface plus élevé à WebGL.
Le package React-Unity-WebGL vous permet d'intégrer les versions Unity WebGL dans les applications ReactJS. Cela signifie que vous pouvez créer des jeux 3D complexes avec Unity, puis les intégrer facilement dans votre application ReactJS. Ceci est particulièrement utile si vous souhaitez créer un jeu Web ou une application 3D interactive.
L'optimisation des jeux construits avec ReactJS et WebGL peut impliquer plusieurs stratégies. Ces stratégies incluent la minimisation du nombre de rerendeurs dans React, en utilisant des fonctionnalités de performances intégrées de WebGL telles que requestAnimationFrame pour réaliser des animations en douceur et l'optimisation des modèles 3D et des textures pour le Web.
Oui, vous pouvez utiliser ReactJS et WebGL pour créer des jeux en cours d'exécution dans un navigateur Web sur votre appareil mobile. Cependant, pour les jeux mobiles natifs, vous voudrez peut-être envisager d'utiliser des plates-formes de développement de jeux comme Unity ou Unreal Engine, qui peut être exportée directement vers iOS et Android.
La saisie de l'utilisateur peut être traitée dans les jeux ReactJS et WebGL à l'aide de gestionnaires d'événements JavaScript standard. Vous pouvez écouter les événements de clavier, de souris et de contact, puis de mettre à jour l'état du jeu en conséquence. ReactJS fournit également des événements de synthèse qui peuvent être utilisés pour traiter la saisie des utilisateurs sur différents navigateurs de manière cohérente.
Oui, vous pouvez utiliser d'autres bibliothèques JavaScript avec ReactJS et WebGL. Par exemple, vous pouvez utiliser trois.js pour les graphiques 3D, Howler.js pour l'audio ou Matter.js pour le traitement physique. La clé est de s'assurer que ces bibliothèques fonctionnent parfaitement dans votre jeu.
Les jeux construits à l'aide de ReactJS et WebGL peuvent être débogués à l'aide d'outils de développeur dans un navigateur Web. Ces outils vous permettent de vérifier le code HTML, CSS et JavaScript, afficher les journaux de console et déboguer le code étape par étape. De plus, React Developer Tools est une extension de navigateur qui vous permet de vérifier la hiérarchie des composants React, les accessoires et l'état.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Que signifient les composants électroniques ?
À quel point le Dimensity 6020 est-il équivalent à Snapdragon ?
Comment désactiver la protection en temps réel dans le Centre de sécurité Windows
Comment supprimer des pages vierges dans Word
Comment résoudre l'accès refusé
pas de zoom
Quel logiciel de test de batterie d'ordinateur portable est le meilleur ?
le bios ne peut pas détecter le disque SSD
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
