Construisez votre propre jeu de physique WebLL

Sep 13, 2025

Comment

[dix] [dix] [dix]

[dix]

Ce projet sera divisé en différentes parties. Nous donnerons une courte introduction à Heroku, montrera comment utiliser Physijs avec trois.js, expliquer comment gérer les événements de socket sur Node.js et comment nous allons gérer les données envoyées.

[dix]

20 exemples étonnants de Webgl in Action

01. Heroku

Heroku is an easy to use and free to trial node.js web server — Heroku est facile à utiliser et gratuit pour Essayer Node.js Web Server

Ce projet sera hébergé sur Héroku , qui est une plate-forme cloud pour héberger vos applications. Il dispose d'une grande variété de langues prises en charge telles que Ruby, Java, PHP et Python. Nous allons utiliser node.js.s.

Inscrivez-vous pour un compte et choisissez nœud.js. Pour ce projet, nous pouvons utiliser le serveur de base, qui est gratuit. Après l'enregistrement, vous arriverez à votre tableau de bord où vous pouvez créer votre application. Cela créera un sous-domaine chez Herokuapp.com.

En tant que méthode de déploiement, vous pouvez choisir d'utiliser l'interface de ligne de commande Heroku (CLI) à déployer à l'aide de son référentiel GIT ou d'avoir une connexion configurée à Github ou à Dropbox. J'ai choisi d'aller avec sa cli; Cela nécessitera une installation. Mais en retour, vous obtenez une variété de nouveaux outils utiles, l'un d'entre eux est de déboguer dans votre terminal.

Pour la mise en place de votre serveur, je vous recommande de suivre les étapes Comme décrit ici .

[dix]

Pour déployer, vous utilisez des commandes GIT par défaut. Chacun que vous utilisez déclenchera le serveur de construction et votre application sera déployée sur le serveur Heroku, puis être visible à votre sous-domaine.

Une fois le code déployé, vous pouvez afficher votre projet à [YourProject] .herokuapp.com. Pour afficher les journaux, utilisez la commande 'Logs Heroku - queue "dans votre terminal. Certaines des choses qui sont montrées sont ce qui est servi au client - il affiche les connexions de socket, et si vous souhaitez déboguer votre code, vous pouvez également utiliser la console.log afin de sortir sur le terminal.

02. Construire la scène de physique

Tap your screen or hit the spacebar to bounce the table up — Appuyez sur votre écran ou appuyez sur la barre d'espace pour rebondir le tableau

Nous allons utiliser le plus populaire Webgl cadre, trois.js , pour construire une scène 3D contenant un objet sur lequel nous allons attacher de la physique. La bibliothèque de physique de la physique est Physijs , un plug-in pour trois.js. En prolongement à trois.js, Physijs utilise la même convention de codage, ce qui facilite l'utilisation si vous connaissez déjà trois.js.

La première chose est la table de la piscine. Nous utilisons les Physijs HauteurFieldMesh , parce que ce maillage lira la hauteur de la pènegeométrie. Il va donc s'enrouler essentiellement autour de l'objet Three.js.

 VAR table de tableométrie = neuf trois.planégeométrie (650, 500, 10, 10);
Var Tablaterial = Physijs.Creatematerial (
  nouveau trois.MeshPhongmaterial ({
    CULLOINES: 1,
    Couleur: 0xb00000,
    Emissive: 0x111111,
    côté: trois.doubleside
  }),
  .8, // frottement
  .4 // restitution
);
Table = Nouveau Physijs.HeightfieldMesh (tableygométrie, tablatérial, 0);

Alors HauteurFieldMesh Nécessite une géométrie mais aussi un matériau Physijs. Nous ajoutons deux nouvelles fonctionnalités au matériau trois.js. Ce sont les friction et restitution variables. Le frottement est la résistance que l'objet fabrique et la restitution fait référence à la "bondinité". Ces deux variables définiront la réelle que la physique ressemblera à votre scène.

Pour les balles de piscine créées, nous ne voulons pas les rendre trop gonflés, alors gardez le nombre bas bas. Comme trois.js, Physijs a également une série de formes de base pour parcourir le maillage d'origine. Sphère envelopper le Sphérégéométrie donnera la physique du ballon. Lors de l'initialisation de la scène, nous appelons Buildball (8) , qui déclenchera la fonction suivante ...

 var buildball = fonction (numéryball) {
 var balltexture = nouveau trois.Texture ();
 var ballindex = ballon.length;

Ajouter la texture:

 Balltexture = trois.ImageUtils.loadTexture ('Textures /' + NumberBall + '_ball.jpg', fonction (image) {
     balltexture.Image = image;
  });

Créez le matériel activé par Physijs avec des propriétés de friction et de rebond décents:

 Var Ballmaterial = Physijs.Creatematerial (
    nouveau trois.meshlambertmaterial ({
      Carte: Balltexture,
      CULLIQUES: 10,
      Couleur: 0xDDDDDDDD,
      Emissive: 0x111111,
      côté: trois.dedsside
    }),
    .6, // frottement
    .5 // restitution
  );

Cartographie de la texture:

 ballmaterial.map.raps = ballmaterial.map.wrapt = trois.RePeatErappe;
  ballmaterial.map.repeat.set (1, 1);
 Créez le Spheremesh compatible avec la physique et commencez-le dans les airs:

  balle [ballindex] = nouveau physiaijs.spheremesh (
    nouveau trois.Sphérégéométrie (25, 25, 25),
    Ballmaterial,
    100
  );
  // y décalage au sommet de la toile
  balle [ballindex] .position.y = 500;
  // ombres
  balle [ballindex] .Receiveshadow = true;
  balle [ballindex] .castshadow = true;
  // ajoutez la balle à votre canvas
  scène.add (balle [ballindex]);
};

Nous ajoutons une texture à partir d'un fichier .jpg. Créer le matériau et utiliser cela pour le Sphère Pour créer l'objet, que nous allons placer verticalement au sommet afin qu'il tombe dans l'écran.

03. Connexion des sockets

The key goal of our game is emulating the physical movements to the screen — L'objectif clé de notre jeu est l'émission des mouvements physiques à l'écran

Pour la communication entre le serveur et le client, nous utiliserons socket.io . Ceci est l'une des bibliothèques les plus fiables disponibles pour Node.js. Il est construit sur le dessus de l'API WebSockets.

Maintenant, la physique est activée pour les mailles dont nous avons besoin d'une entrée de l'utilisateur pour faire le jeu interactif. Le périphérique d'entrée que nous utilisons est le périphérique mobile. Le navigateur mobile est le contrôleur qui fournira des données de l'accéléromètre et du gyroscope au bureau où vous verrez le jeu.

Tout d'abord, une connexion entre le navigateur mobile et le navigateur de bureau doit être faite. Chaque fois qu'un navigateur se connecte avec notre application nœud.js, nous devons faire une nouvelle connexion. Une connexion côté client est configurée en utilisant ce qui suit:

 Var socket = io.connect ();

Pour envoyer des messages, vous utilisez le émettre fonction:

 socket.emit ("nom d'événement", données);

Et pour recevoir vous utilisez le .sur() fonction:

 socket.on ("nom d'événement", fonction () {});

[dix]

03.1. Configuration du jeu de bureau

Si nous sommes sur un bureau, nous enverrons nos sockets un périphérique émettrice à notre serveur, le bureau est le jeu en utilisant la ligne de code suivante:

 Var socket = io.connect ();
// Lorsque le message de bienvenue initial, répondez avec le type de périphérique "jeu"
socket.on ('Bienvenue', fonction (données) {
  socket.emit ("Périphérique", {"Type": "Jeu"});
});

Le serveur nous retournera un code de clé / jeu unique généré par crypto . Ceci sera affiché sur le bureau.

 // générer un code
var gameCode = crypto.randombytes (3) .Tostring ("hex"). Sous-chaîne (0, 4) .tolowercase ();
// assurer l'unicité
tandis que (gamecode dans SocketCodes) {
  gamecode = crypto.randombytes (3) .Tostring ("hex"). Sous-chaîne (0, 4) .tolowercase ();
}
// Store Code de jeu - & GT; Association de socket
socketcodes [gamecode] = io.sockets.sockets [socket.id];
socket.gamecode = gamecode

Dites à Game Client d'initialiser et d'afficher le code de jeu à l'utilisateur ...

 socket.emit ("initialiser", gamecode);

03.2. Connecter le contrôleur au jeu

Pour connecter le périphérique mobile au jeu, nous utiliserons un formulaire pour soumettre le code de jeu de l'écran de bureau. Sur le formulaire Soumettre, nous enverrons le code de jeu au serveur pour l'authentification.

 socket.emit ("Device", {"Type": "Contrôleur", "GAMECODE": GAMECODE});

Le serveur vérifiera si le code de jeu est valide et configurera la connexion avec le jeu de bureau.

 si (périphérique.gamecode in socketcodes) {
  // Enregistrez le code de jeu pour les commandes du contrôleur
  socket.gamecode = périphérique.gamecode
  // initialise le contrôleur
  socket.emit ("connecté", {});
  // commencer le jeu
  socketcodes [périphérique.gamecode] .emit ("connecté", {});
}

Une fois que la connexion est entièrement définie, nous donnerons ensuite le 8 balle une petite poussée de X et Z avec la commande suivante ...

 BALL  .SetLineRevelocity (neuf trois.Vector3 (30, 0, 30));

04. Envoi de données

Maintenant que la connexion est établie, nous voulons envoyer les variables gyro et accéléromètre au jeu. En utilisant le fenêtre.ondevicemotion et le fenêtre.ondeviceOrientation Événements, nous avons les données dont nous avons besoin pour imiter les mêmes mouvements d'inclinaison de notre téléphone à la table de la piscine. J'ai choisi d'utiliser un intervalle de 100 ms pour émettre ces valeurs.

 seinterval (fonction () {
  socket.emit ('envoyer gyro', [maths.round (ROTY), Math.Round (Rotx), Ay, AX]);
}, intervalles);

Du côté du client, nous résoudrons la latence en touchant les valeurs entrantes du serveur à l'inclinaison de la table de billard. Pour Tweening, nous utilisons Tweenmax .

 // gérer les données gyroscopiques entrantes
socket.on ("nouveau gyro ', fonction (données) {
  var degy = données  & lt; 0? Math.abs (données ): -Data ;
  Tweenmax.to (table.rotation, 0.3, {
    x: Degtorad (Degy - 90),
    Y: Degtorad (données ),
    Facilité: linéaire.Asenone,
    ONUPDate: fonction () {
        Tableau .__ DirtyRotation = Vrai;
    }
  });
});

05. Événements supplémentaires

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile — Plus de balles équivaut plus de plaisir. Essayez de frapper la barre d'espace ou de taper de l'écran de votre mobile

Pour lui donner un peu plus d'interactivité, j'ai ajouté quelques événements supplémentaires pour que l'utilisateur joue avec. Nous allons donner à l'utilisateur la possibilité d'ajouter des balles supplémentaires à côté du 8 balle en utilisant les numéros du clavier.

Un autre est de rebondir le tableau vers le haut. Pour cela, vous pouvez frapper la barre d'espace. Mais nous ajoutons également un événement TAP sur le périphérique du contrôleur. Cela vous enverra un événement à la table de billard, qui augmentera la table et envoie les balles.

D'abord, nous devons attraper les événements du clavier ...

 // Créer des balles / la table SLAM sur la barre d'espace
document.addeventlistener ('Keydown', fonction (e) {
  Si (E.KeyCode == 49) {// Clé: 1
    Buildball (1);
  } else si (e.keCode == 50) {// clé: 1
    Buildball (2);
  } else si (e.keCode == 51) {// clé: 1
    Buildball (3);
  } else si (e.keCode == 32) {// clé: barre d'espace
    Bouncetable ();
  }
});

Le builderball La fonction est la même fonction que nous avons utilisée pour créer la sphère 8-ballon. Nous utilisons simplement différentes textures qui enveloppent la sphère. Pour pousser la table, nous donnons à la table un mouvement ascendant le long de l'axe Y avec ce code ...

 TABLE.STELLINEARLITELOCITÉ (Nouveau Three.Vector3 (0, 500, 0));

Conclusion

Add more balls and see how much your browser can handle — Ajoutez plus de balles et voyez combien votre navigateur peut gérer

Lorsque vous avez un concept pour un jeu ou autre chose, il est tout à fait probable qu'il existe des bibliothèques qui pourraient vous faciliter la vie. C'est une démo qui montre comment cela peut fonctionner. Nous espérons que cela aidera à susciter des idées créatives ou vous aidera à vous aider avec votre projet actuel. Voir un exemple en direct du jeu ici , ou trouvez-le sur Github .

Cet article a été publié à l'origine dans le numéro 300 de rapporter , le meilleur magazine du monde pour les concepteurs et les développeurs professionnels. Acheter numéro 300 ou S'abonner ici .

Articles Liés:

Commencez avec Webgl en utilisant trois.js
20 outils javascript pour vous souffler
Créer des visuels 3D interactifs avec trois.js

[dix] [dix]

[dix]

Construisez votre propre jeu de physique WebLL

01. Heroku

02. Construire la scène de physique

03. Connexion des sockets

03.1. Configuration du jeu de bureau

03.2. Connecter le contrôleur au jeu

04. Envoi de données

05. Événements supplémentaires

Conclusion

Comment - Most Popular Articles

Facebook Confidentialité Paramètres: Comment garder votre profil privé

3 Techniques essentielles de rétopologie ZBrush

21 façons d'optimiser votre CSS et d'accélérer votre site

Commencez avec la plate-forme d'animation de Greensock

Master peinture négative dans l'aquarelle

Top astuces pour affiner vos techniques d'illustration dessinées à la main

Comment nommer votre agence de conception Web

Demandez à la création avec des portraits et du visage facifest

Catégories