Comment créer un jeu 3D pour navigateur

Décrivez le monde, la caméra et les commandes, gardez un projet modeste, et apportez vos propres modèles en fichiers GLB ; Go Bananas crée le jeu avec three.js et ajoute les commandes pour téléphone.

Un jeu 3D tourne dans le navigateur comme n'importe quelle page web, dessiné avec WebGL. Go Bananas crée les jeux 3D avec three.js, la bibliothèque 3D la plus utilisée sur le web : vous pouvez donc décrire un jeu de course, un labyrinthe ou un petit monde ouvert, et y jouer quelques minutes plus tard. Ce guide explique ce qui rend la 3D plus difficile que la 2D, comment demander un jeu 3D, comment utiliser vos propres modèles 3D et scènes scannées, et comment garder un jeu fluide sur téléphone.

Pourquoi la 3D est plus difficile que la 2D

Trois choses se compliquent dès qu'on ajoute une dimension :

La caméra. En 2D, l'écran est le monde. En 3D, vous choisissez où se place la caméra : derrière le joueur, au-dessus de la scène, ou dans la tête du joueur. Une mauvaise caméra rend injouable un bon jeu.
Les commandes. Se déplacer en 3D demande à la fois de bouger et de regarder autour de soi. Au clavier, c'est ZQSD (ou WASD) ou les flèches, plus la souris. Sur téléphone, ce sont deux pouces sur un écran plat.
Les performances. Chaque image dessine chaque objet visible. Les modèles détaillés, les grandes textures et les nombreuses lumières ralentissent un jeu, et les téléphones ralentissent en premier.

Les bons jeux 3D gardent tout ça sous contrôle : une caméra claire, des commandes simples, et un monde à la mesure de ce qu'un téléphone peut afficher.

Comment Go Bananas crée les jeux 3D

Quand vous demandez un jeu 3D, l'IA l'écrit avec three.js, avec des chargeurs pour les fichiers de modèles 3D. Elle suit des règles qui comptent pour la 3D :

Les commandes pour téléphone sont intégrées. Les jeux 3D ont un joystick virtuel sur le côté gauche de l'écran pour se déplacer, un glisser-pour-regarder sur le côté droit, et des boutons d'action d'environ 60 pixels de large pour que les pouces les atteignent facilement.
Les touches ne font pas défiler la page. Les flèches et la barre d'espace vont au jeu au lieu de faire défiler le navigateur.
Le jeu remplit l'écran et s'adapte quand la fenêtre change de taille ou que le téléphone pivote.
Les captures d'écran fonctionnent. L'image d'aperçu du jeu est prise dans la scène 3D quelques secondes après le début de la première partie.
Les modèles se déplacent dans l'éditeur. L'éditeur a un onglet 3D Position (position 3D) où vous pouvez placer les modèles dans la scène.

Demander un jeu 3D

Nommez la caméra, les commandes et l'objectif. Par exemple :

Un jeu 3D à la troisième personne où vous incarnez un petit robot qui explore une île flottante. La caméra suit derrière le robot. Ramassez 10 cristaux lumineux avant que le soleil se couche, dans 3 minutes. Style low-poly aux couleurs douces.

Un labyrinthe 3D à la première personne. Les murs sont des haies, le sol est de l'herbe. Trouvez la sortie avant la fin du chrono. Afficher une petite boussole qui indique la sortie.

Quelques habitudes qui aident :

Choisissez une seule caméra. « La caméra suit derrière », « vue de dessus », « à la première personne ».
Gardez un monde petit. Une île, une arène, un circuit. Un petit jeu 3D terminé vaut mieux qu'un gros jeu inachevé, et chaque jeu a un budget de taille.
Choisissez un style simple. Le low-poly et les couleurs unies sont nets et rapides. Ne demandez du « réaliste » que si vous apportez vos propres modèles ou scènes.
Dites ce que fait le joueur toutes les quelques secondes. Ramasser, esquiver, faire la course, viser.

Utiliser vos propres modèles 3D

Vous pouvez importer vos propres modèles et les utiliser dans n'importe quel jeu que vous créez. Importez-les depuis le panneau de création (le bouton 📎, ou en faisant glisser le fichier sur le chat), depuis l'onglet Assets (ressources) avec Upload Asset (importer un fichier), ou dans l'éditeur. Il vous faut un compte vérifié.

Format	Ce que Go Bananas en fait
GLB	Conservé tel quel. Recommandé.
glTF	Regroupé en un seul GLB. Il doit être autonome, ou importé dans un ZIP avec ses fichiers.
FBX	Converti en GLB. Les textures sont réduites à 512 sur 512 pixels au maximum ; les animations sont conservées.
OBJ	Conservé tel quel, mais sans matériaux ni textures.
ZIP	Un paquet contenant un modèle avec ses textures et ses buffers. Un seul modèle est conservé.

Le GLB est le format à utiliser. Il contient le maillage, les matériaux, les textures et les animations dans un seul fichier, et le site l'analyse quand vous l'importez. Il lit les noms des animations du modèle, sa hauteur et son orientation, et calcule une échelle, une rotation et un décalage par rapport au sol pour que le modèle tienne debout à une taille raisonnable. Ces informations sont transmises à l'IA : votre modèle apparaît donc dans le bon sens, à la bonne échelle et posé au sol.

Pour utiliser un modèle, tapez @ dans la zone de création ou de modification et choisissez-le. Le nom du modèle s'ajoute entre guillemets :

Faire de "knight" le personnage du joueur. Quand le joueur appuie sur espace, jouer l'animation d'attaque du chevalier.

Dans le code, un jeu trouve votre modèle à window.GAME_ASSETS.models['knight'].url, où le nom est celui du fichier sans son extension. Renommer le fichier dans vos ressources change ce nom.

Limites : chaque fichier importé peut faire jusqu'à 200 Mo, et le stockage de votre compte contient 100 Mo avec un compte gratuit ou 1 Go avec Pro. Vous pouvez importer jusqu'à 20 fichiers par heure.

Des scènes photoréalistes avec les Gaussian splats

Les Gaussian splats sont un type de 3D plus récent : au lieu de triangles, une scène est un nuage de millions de points colorés et flous, capturés à partir de vraies photos. Leur rendu est photoréaliste, surtout pour des lieux et des objets scannés dans la réalité.

Go Bananas accepte les splats de trois façons :

Des fichiers PLY issus d'outils de capture de splats. Ils sont réduits à 500 000 points et convertis dans un format qui se charge vite.
Des fichiers SPZ, un format de splats compact. Ils sont réduits à 300 000 splats.
Une photo. Importez un JPG ou un PNG dans le panneau de création et choisissez Turn into 3D (transformer en 3D). Le site transforme cette seule photo en scène de splats.

Vous pouvez prévisualiser splats et modèles dans la visionneuse 3D du site avant de les utiliser. Les scènes de splats font d'excellents décors : une pièce scannée pour un escape game, une vraie rue pour une course-poursuite. Elles n'ont pas de formes de collision comme les niveaux modélisés : décrivez donc où le joueur peut marcher, ou placez de simples murs invisibles autour de la zone de jeu.

Garder les jeux 3D rapides sur téléphone

C'est sur téléphone que les jeux 3D peinent en premier. Ces conseils gardent votre jeu fluide :

Surveillez le nombre de polygones. Un personnage low-poly de quelques milliers de triangles suffit largement. Les scènes faites de nombreux modèles détaillés s'alourdissent vite.
Gardez des textures petites. 512 ou 1 024 pixels de côté suffisent pour la plupart des objets d'un jeu. Les FBX importés sont réduits à 512 pixels pour vous ; pour les GLB, réduisez les textures avant l'import.
Limitez les lumières et les ombres. Chaque lumière et chaque ombre coûtent du temps de rendu. Une seule lumière solaire avec des ombres simples suffit en général.
Réutilisez les modèles. Vingt copies d'un même arbre coûtent moins cher que vingt arbres différents.
Attention aux splats. Même réduite à 300 000 ou 500 000 points, une scène de splats est lourde. Une scène de splats par jeu est une bonne limite, et ça vaut la peine de tester sur un vieux téléphone.
Testez sur un vrai téléphone. Ouvrez le jeu sur votre téléphone et essayez les commandes avec vos pouces. Si le joystick ou les boutons semblent à l'étroit, demandez-les plus grands.

Corriger les problèmes 3D courants

Le modèle est trop grand, trop petit ou couché. Importez-le en GLB pour que le site puisse le mesurer, ou dites à l'IA : « Réduire "knight" de moitié et le mettre debout. »
Le modèle est invisible. Il est peut-être dans le sol ou derrière la caméra. Demandez : « Déplacer "knight" pour qu'il soit posé au sol devant la caméra », ou utilisez l'onglet 3D Position.
L'OBJ n'a pas de couleurs. Les fichiers OBJ arrivent sans matériaux. Convertissez le modèle en GLB et importez-le à nouveau.
Le jeu saccade sur téléphone. Demandez moins d'objets, moins de détails ou pas d'ombres sur téléphone.