Construire un jeu avec trois.js, react et webgl

Points de base

• Utilisation de React to Drive Scènes 3D dans le développement de jeux présente de nombreux avantages, notamment une séparation claire du rendu de scène de la logique de jeu, des composants faciles à comprendre, un rechargement en temps réel des ressources de jeu et la possibilité d'utiliser des outils de navigateur natifs pour Les scènes 3D vérifient et déboguent en tant que marqueurs.
• React-Three-Renderer (R3R) fournit une API déclarative qui résume trois.js, permet de découpler le code de vue de la logique du jeu et crée de petits composants faciles à comprendre.
• à mesure que les moteurs de jeu se développent, il est crucial d'utiliser le mode réducteur pour organiser la logique de jeu en fonctions distinctes. Ce mode permet de créer une boucle de jeu propre et claire et d'ajouter facilement plus de logique à la boucle de jeu.
• Les considérations de drainage et de performances sont uniques dans la construction de jeux en utilisant trois.js, react et webgl. L'utilisation de la fonctionnalité de chronologie de Chrome Devtools est inestimable pour le débogage des performances, et la mise en œuvre de stratégies telles que la minimisation du nombre de redesseurs de React peut aider à optimiser les performances.

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

etc. J'ai souri. Il a ri aussi. Tout le monde a passé un bon moment. "Qui dans le monde ferait ç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:

• La vue "déclarative" vous permet de séparer clairement le rendu de scène de la logique de jeu.
• Concevoir des composants faciles à comprendre tels que <player></player>, <wall></wall>, <level></level>, et plus encore.
• "Hot" (en temps réel) Rechargement des ressources de jeu. Changez les textures et les modèles et voyez leurs mises à jour dans la scène en temps réel!
• Vérifiez et déboguez les scènes 3D comme balises utilisant des outils de navigateur natifs tels que Chrome Inspector.
• Gérer les ressources de jeu dans les graphiques de dépendance à l'aide de WebPack, par exemple <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.

Affichage de l'organisation Code

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.

Organisation de la logique de jeu

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>

Nous pouvons appliquer un modèle utile pour aider à organiser ce code. La mise à jour de l'emplacement du robot est un calcul simple basé sur le temps. À l'avenir, il peut également considérer les emplacements des robots précédents des états du jeu précédent. Une fonction qui accepte certaines données, les traite et renvoie de nouvelles données est souvent appelée réducteur. Nous pouvons résumer le code en mouvement dans une fonction réductrice!

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>

Pour ajouter plus de logique à la boucle de jeu, tel que la gestion de la physique, créer une autre fonction de réducteur et la transmettre au résultat du réducteur précédent:

<code><scene>></scene>
  …
  <mesh>></mesh>…>
  <robot></robot>    position={…}
    rotation={…}
  />
>
</code>

En tant que croissance des moteurs de jeu, il devient crucial d'organiser la logique de jeu en fonctions distinctes. En utilisant le mode réducteur, cette organisation est très simple.

Gestion des ressources

Il s'agit toujours d'un domaine de développement pour R3R. Pour les textures, vous pouvez spécifier une propriété URL sur la balise JSX. À l'aide de WebPack, vous pouvez demander le chemin d'image local:

<code>// …
gameLoop( time ) {
  this.setState({
    robotPosition: new THREE.Vector3(
      Math.sin( time * 0.01 ), 0, 0
    )
  });
}
</code>

Avec ce paramètre, si vous modifiez l'image sur le disque, votre scène 3D sera mise à jour en temps réel! Ceci est inestimable pour la conception et le contenu de jeu rapide.

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.

Vous pouvez également rejoindre la salle de chat Gitter Reag-Three-Rendater pour aider à déboguer l'application.

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.

• J'utilise WebPack pour un temps de rechargement chaud pouvant aller jusqu'à 30 secondes! En effet, chaque surcharge doit écrire de grandes ressources dans le package. La solution consiste à implémenter Dllplugin de WebPack, ce qui réduit le temps de rechargement à moins de 5 secondes.
• Idéalement, votre scène ne doit être appelée qu'une seule fois par cadre de rendu. Après avoir analysé mon jeu, React lui-même est le principal goulot d'étranglement. L'appel setState() plusieurs fois par trame entraînera un double rendu et dégrader les performances. setState()
Après avoir dépassé un certain nombre d'objets, les performances de R3R seront pires que le code Trois Ordinaire. Pour moi, c'est environ 1000 objets. Vous pouvez comparer R3R avec trois.js dans le "Benchmark" dans l'exemple.

La fonctionnalité de chronologie de Chrome Devtools est un excellent outil pour déboguer les performances. Vous pouvez facilement et intuitivement vérifier la boucle de jeu, et c'est plus facile à lire que la fonctionnalité "Profil" de Devtools.

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 WebGL

Quelles sont les conditions préalables à la construction de jeux avec ReactJS et WebGL?

Pour commencer à construire des jeux avec ReactJS et WebGL, vous avez besoin d'une compréhension de base de JavaScript, HTML et CSS. Besoin également de connaître ReactJS (une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur). En outre, il est crucial de comprendre WebGL (Web Graphics Library), une API JavaScript pour rendre les graphiques 3D et 2D interactifs. Il sera également très avantageux de connaître la syntaxe ES6, le NPM (Node Package Manager) et la ligne de commande.

Comment intégrer l'unité avec ReactJS?

Unity peut être intégré à ReactJS à l'aide du package React-Unity-WebGL. Ce package vous permet d'intégrer les versions Unity WebGL dans les applications ReactJS. Vous pouvez l'installer à l'aide de NPM et l'importer dans votre projet. Vous pouvez ensuite utiliser le composant Unity fourni par le package pour intégrer votre jeu Unity dans votre application ReactJS.

Quelles sont les différentes façons de créer des applications 3D en utilisant React?

Il existe plusieurs façons de créer une application 3D à l'aide de React. L'une des méthodes les plus populaires consiste à utiliser Three.js, une bibliothèque JavaScript croisée de navigateur pour créer et afficher des graphiques informatiques 3D animés. Une autre approche consiste à utiliser WebGL directement, mais cela peut être plus compliqué. D'autres bibliothèques telles que React-Three-Fibre et React-Unity-WebGL peuvent également être utilisées pour créer des applications 3D à l'aide de React.

Comment créer des graphiques 3D interactifs à l'aide de WebGL?

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.

Quel est le rôle de réact-unité-Webgl dans le développement du jeu?

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.

Comment optimiser mes jeux ReactJS et WebGL pour les performances?

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.

Puis-je créer des jeux mobiles à l'aide de ReactJS et WebGL?

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.

Comment traiter la saisie des utilisateurs dans mes jeux ReactJS et WebGL?

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.

Puis-je utiliser d'autres bibliothèques JavaScript avec ReactJS et WebGL?

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.

Comment déboguer mes jeux ReactJS et WebGL?

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!