BabylonJS - Éléments de base

Babylon.js est un framework populaire pour aider à créer des jeux 3D pour les développeurs. Il a des fonctions intégrées pour implémenter les fonctionnalités 3D. Construisons une démo simple en utilisant Babylon.js et comprenons les fonctionnalités de base nécessaires pour commencer.

Nous allons d'abord créer une démo contenant les éléments de base de Babylon.js. De plus, nous apprendrons également les différentes fonctionnalités de Babylon.js.

Exemple de démonstration 1

Dans cette section, nous allons apprendre à créer une démo contenant les éléments de base de BabylonJS.

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo2</title>
      <script src = "babylon.js"></script>
      <style>
         canvas { width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            
            var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            
            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(-5, 0, 0); 
            
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
            
            cylinder.position = new BABYLON.Vector3(5, 0, 0);	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Pour exécuter BabylonJS, nous avons besoin de navigateurs modernes prenant en charge WEBGL. Les derniers navigateurs - Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+, etc. prennent en charge WEBGL et les démos peuvent être exécutées sur les mêmes plates-formes pour voir la sortie. Créez un répertoire pour stocker les fichiers pour babylonjs. Récupérez le dernier fichier BabylonJSscripts sur le site BabylonJS. Tous les liens de démonstration de ce tutoriel sont testés avec babylonjs version 3.3.

Étape 1

  • Créez une page HTML simple et incluez le fichier Babylon.js.

  • Créez une balise canvas qui est utilisée pour rendre le contenu par BabylonJS à l'intérieur de la balise body comme indiqué ci-dessous.

  • Ajoutez css au canevas pour occuper toute la largeur et la hauteur de l'écran.

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   <body>
      <canvas id = "renderCanvas"></canvas>
   </body>
</html>

Étape 2

Commençons maintenant par le BabylonJScode pour rendre le contenu sur le canevas.

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
      </script>
   </body>
</html>

Maintenant, ajoutez la balise de script à la structure html et stockez la référence du canevas dans la variable canevas.

Pour commencer avec Babylon.js, créez une instance de moteur et transmettez la référence de canevas pour effectuer le rendu dessus.

<script type = "text/javascript">
   var canvas = document.getElementById("renderCanvas");
   var engine = new BABYLON.Engine(canvas, true);
</script>

L'objet global BABYLON contient toutes les fonctions Babylon.js disponibles dans le moteur.

Étape 3

Dans cette étape, nous allons d'abord créer une scène.

Une scène est l'endroit où tout le contenu sera affiché. Nous créerons les différents types d'objets et les ajouterons à la scène pour la rendre visible à l'écran. Pour créer une scène, ajoutez le code suivant à la structure html déjà créée. À l'heure actuelle, nous ajouterons au code déjà créé en tant que continuation à la structure html ci-dessus.

var createScene  = function() {
   var scene = new BABYLON.Scene(engine);
   scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();

Le fichier html final ressemblera à ceci -

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            return scene;
         };
         var scene = createScene();
      </script>
   </body>
</html>

Dans l'exemple ci-dessus, la fonction CreateScene est définie et la var scene = createScene () appelle la fonction.

La fonction CreateScene a la scène créée à l'intérieur et la ligne suivante ajoute de la couleur à la scène, ce qui est fait en utilisant BABYLON.Color3 (1, 0.8, 0.8) et la couleur ici est rose.

var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);

L'exécution du lien de démonstration ci-dessus dans le navigateur n'affichera rien pour le moment sur l'écran du navigateur. Il y a encore une étape à ajouter au code qui s'appelle engine.runRenderLoop comme à l'étape 4.

Étape 4

Pour rendre la scène réellement visible à l'écran, nous devons la rendre en utilisant l'appel engine.runRenderLoop. Voyons maintenant comment cela se fait.

Boucle de rendu

engine.runRenderLoop(function() {
   scene.render();
});

La fonction Engine.runRenderLoop appelle scene.render, qui rendra la scène et la rendra visible à l'utilisateur. Le fichier .html final ressemblera à ceci -

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Enregistrez le fichier ci-dessus en tant que basicscene.html et vérifiez la sortie dans le navigateur. L'écran affiché est de couleur rose comme indiqué ci-dessous -

Étape 5

Maintenant que nous avons la scène, nous devons y ajouter une caméra.

Ajout de caméra et de lumière

Le code donné ci-dessous ajoute une caméra à la scène. Il existe de nombreux types d'appareils photo pouvant être utilisés sur Babylon.

ArcRotateCameraest une caméra qui tourne autour de la cible. Il peut être contrôlé avec la souris, le curseur ou des événements tactiles. Les paramètres requis sont le nom, l'alpha, la bêta, le rayon, la cible et la scène. Laissez-nous discuter des détails de la caméra dans une section suivante.

var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

Maintenant, nous devons comprendre comment ajouter de la lumière.

Les lumières sont utilisées pour produire la couleur diffuse et spéculaire reçue par chaque pixel. Il existe de nombreux types de lumières. Nous découvrirons les différents types de lumières dans la section des lumières.

Ici, j'utilise le PointLight sur la scène. Le PointLight est émis dans toutes les directions comme le Soleil. Les paramètres sont le nom, la position et la scène à utiliser.

Pour ajouter de la lumière, exécutez le code suivant -

var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);

Étape 6

Voyons maintenant comment ajouter des formes.

Ajout de formes

La démo partagée ci-dessus a 4 formes ajoutées.

  • Sphere
  • Torus
  • Box
  • Cylinder

Pour ajouter une sphère, exécutez le code suivant -

var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);

Une fois la sphère ajoutée, le code se présente comme suit -

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      <style>
         html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            scene.activeCamera.attachControl(canvas);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Production

Le code ci-dessus génère la sortie suivante -

Ajoutons maintenant les autres formes - le Torus et la Boîte. Exécutez le code suivant pour ajouter la forme Torus.

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);

Nous ajouterons une position à la boîte. BABYLON.Vector3 (-5, 0, 0) prend les directions x, y et z.

Lors de l'exécution, le code ci-dessus génère la sortie suivante -

Ajoutons maintenant la forme finale qui est montrée dans la capture d'écran ci-dessus - le cylindre.

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);

La position est ajoutée au cylindre qui est la direction x 5. Le code final est comme indiqué ci-dessous -

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo2</title>
      <script src = "babylon.js"></script>
      <style>
         canvas { width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            
            var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            
            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(-5, 0, 0); 
            
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
            cylinder.position = new BABYLON.Vector3(5, 0, 0);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Production

Lors de l'exécution, le code ci-dessus générera la sortie suivante -

Les formes se déplaceront selon la direction dans laquelle vous déplacez le curseur; la même chose est faite en utilisant le contrôle d'attachement de la caméra à la scène.

scene.activeCamera.attachControl(canvas);

Parlons maintenant de chaque forme en détail.

Voici le résumé de toutes les formes et la syntaxe -

Sr. Non Forme Syntaxe
1 Boîte
var box = BABYLON.Mesh.CreateBox(
   "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
2 Sphère
var sphere = BABYLON.Mesh.CreateSphere(
   "sphere", 10.0, 10.0, scene, 
   false, BABYLON.Mesh.DEFAULTSIDE);
3 Avion
var plane = BABYLON.Mesh.CreatePlane(
   "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
4 Disque
var disc = BABYLON.Mesh.CreateDisc(
   "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
5 Cylindre
var cylinder = BABYLON.Mesh.CreateCylinder(
   "cylinder", 3, 3, 3, 6, 1, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
6 Torus
var torus = BABYLON.Mesh.CreateTorus(
   "torus", 5, 1, 10, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
sept Nœud
var knot = BABYLON.Mesh.CreateTorusKnot(
   "knot", 2, 0.5, 128, 64, 2, 3, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
8 Filet de ligne
var lines = BABYLON.Mesh.CreateLines("lines", [
   new BABYLON.Vector3(-10, 0, 0),
   new BABYLON.Vector3(10, 0, 0),
   new BABYLON.Vector3(0, 0, -10),
   new BABYLON.Vector3(0, 0, 10)
], scene);
9 Lignes de tirets
var dashedlines = BABYLON.Mesh.CreateDashedLines(
   "dashedLines", [v1, v2, ... vn], 
   dashSize, gapSize, dashNb, scene);
dix Ruban
var ribbon = BABYLON.Mesh.CreateRibbon(
   "ribbon", 
   [path1, path2, ..., pathn], 
   false, false, 0, 
   scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
11 Tube
var tube = BABYLON.Mesh.CreateTube(
   "tube", 
   [V1, V2, ..., Vn], 
   radius, tesselation, 
   radiusFunction, 
   cap, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
12 Sol
var ground = BABYLON.Mesh.CreateGround(
   "ground", 6, 6, 2, scene);
13 Sol à partir de la hauteur
var ground = BABYLON.Mesh.CreateGroundFromHeightMap(
   "ground", "heightmap.jpg", 200, 200, 250, 0, 10, 
   scene, false, successCallback);
14 Sol carrelé
var precision = {"w" : 2, "h" : 2};
var subdivisions = {'h' : 8, 'w' : 8};
var tiledGround = BABYLON.Mesh.CreateTiledGround(
   "Tiled Ground", -3, -3, 3, 3, 
   subdivisions, precision, scene, false);

Élément de base - Position, rotation et mise à l'échelle

Dans cette section, nous allons apprendre à positionner, faire pivoter ou mettre à l'échelle les éléments que nous avons ajoutés jusqu'à présent.

Nous avons créé une boîte, une sphère, un cylindre, un nœud, etc. Maintenant, nous allons voir comment positionner, mettre à l'échelle et faire pivoter les formes.

N ° Sr. Élément et description
1 Position

Avec le changement de position, le maillage sera changé d'une position à une autre.

2 Rotation

Avec la rotation, le maillage sera tourné autour du maillage.

3 Mise à l'échelle

La mise à l'échelle du maillage peut être effectuée par rapport à l'axe x, y ou z.

Élément de base - Parenting

Avec Parenting, nous allons créer une relation parent-enfant entre les maillages et voir comment ils se comportent. Ainsi, quelles que soient les transformations que vous appliquez au parent, la même chose sera également appliquée à l'enfant. Comprenons maintenant la même chose avec la démo ci-dessous.

Démo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
         
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
         
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);

            var boxa = BABYLON.Mesh.CreateBox("BoxA", 1.0, scene);
            boxa.position = new BABYLON.Vector3(0,0.5,0);

            var boxb = BABYLON.Mesh.CreateBox("BoxB", 1.0, scene);
            boxb.position = new BABYLON.Vector3(3,0.5,0);		
            boxb.scaling = new BABYLON.Vector3(2,1,2);

            var boxc = BABYLON.Mesh.CreateBox("BoxC", 1.0, scene);
            boxc.parent = boxb;
            boxc.position.z = -3;
         
            var ground = BABYLON.Mesh.CreateGround("ground1", 10, 6, 2, scene);
            ground.position = new BABYLON.Vector3(0,0,0);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Production

Explication

Nous avons créé 3 boîtes dans le maillage ci-dessus. Dans la démo, la mise à l'échelle boxb est appliquée et elle est affectée en tant que parent à boxc qui est également mise à l'échelle depuis sa boîte parentb et la même est mise à l'échelle. Vous pouvez jouer avec la démo pour voir comment fonctionne le lien parent-enfant.

Pour faire un maillage, vous devez utiliser le parent d'un autre maillage -

  • child.parent = parentmesh;

Élément de base - Environnement

Parlons maintenant de l'environnement de la scène dans cette section. Nous parlerons de lascene background color, ambientcolor, skyboxes, fog mode, etc. sur une scène.

Nous avons vu le scene background color is demos que nous avons créé jusqu'à présent.

Couleur d'arrière-plan de la scène

Voyons maintenant comment fonctionne la couleur d'arrière-plan de la scène.

Syntaxe

Voici la syntaxe de la couleur d'arrière-plan de la scène -

scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();

La propriété ci-dessus changera la couleur d'arrière-plan de la scène.

Couleur ambiante de la scène

Voyons maintenant comment fonctionne la couleur ambiante de la scène.

Syntaxe

Voici la syntaxe de la couleur ambiante de la scène -

scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);

AmbientColor est utilisé avec le StandardMaterialcouleur et texture ambiantes. S'il n'y a pas de couleur ambiante pour la scène, leStandardMaterial.ambientColor et StandardMaterial.ambientTexturen'a aucun effet. Le StandardMaterial ambientColor / ambientTexture deviendra actif une fois que le ambientColor pour la scène sera appliqué. Par défaut, la scène est donnéescene.ambientColor et réglé sur Color3 (0, 0, 0), ce qui signifie pas de couleur ambiante.

Mode brouillard de scène

Nous allons maintenant comprendre comment fonctionne le mode de brouillard de scène.

Syntaxe

Voici la syntaxe du mode de brouillard de scène.

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

La liste suivante des modes de brouillard disponibles -

  • BABYLON.Scene.FOGMODE_NONE - par défaut, le brouillard est désactivé.

  • BABYLON.Scene.FOGMODE_EXP - la densité du brouillard suit une fonction exponentielle.

  • BABYLON.Scene.FOGMODE_EXP2 - idem ci-dessus mais plus rapide.

  • BABYLON.Scene.FOGMODE_LINEAR - la densité du brouillard suit une fonction linéaire.

Si le mode de brouillard EXP ou EXP2 est défini, vous pouvez définir la densité sur celui-ci comme suit -

scene.fogDensity = 0.01;

Si le mode de brouillard est LINEAIRE, vous pouvez définir le point de départ et de fin du brouillard comme suit -

scene.fogStart = 20.0;
scene.fogEnd = 60.0;

Pour donner de la couleur au brouillard, exécutez le code suivant -

scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);

Skybox

Skybox est un moyen de créer un arrière-plan dans les jeux qui rend la scène réaliste. Il s'agit davantage d'une enveloppe autour de votre écran qui recouvre la texture utilisée pour le matériau. Choisissez correctement vos images pour les rendre réalistes pour la scène que vous souhaitez créer. Pour créer une skybox, vous devez créer une boîte et lui appliquer du matériel. Nous discuterons des différents matériaux en détail dans un chapitre suivant.

Maintenant, nous allons voir comment créer une skybox en utilisant la boîte et le matériel.

var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);

Nous allons créer une boîte de taille 100 pour qu'elle couvre toute la scène. Nous commencerons par donner du matériel à la boîte ce qui se fait comme suit -

var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);

À ce matériau, nous attribuerons les propriétés.

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);

Nous devons utiliser une texture de réflexion qui est essentiellement utilisée pour créer un matériau semblable à un miroir. La propriété de texture de réflexion utilise CubeTexture qui prend l'image comme entrée. Puisque le cube a 6 faces, l'image requise pour skybox doit être 6, c'est-à-dire qu'elle doit être stockée en interne sous les noms skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz. Les images utilisées pour la skybox sont collées ci-dessous; ce sont des faces du cube sur les six côtés. Lorsque vous appliquez une texture à la forme, elle donne les détails de l'image utilisée et donne à la scène un aspect réaliste. Nous avons utilisé le mode de coordonnées comme SKYBOX_MODE comme indiqué ci-dessous -

skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

Il existe d'autres propriétés utilisées pour le matériau comme backfaceCulling, diffuseColor, specularColor, disableLighting, etc. Les propriétés sont expliquées en détail dans la section des matériaux.

Dans la démo, nous montrerons une scène d'environnement créée à l'aide de skybox, une sphère tournant dans la scène et un avion se déplaçant. Le brouillard est appliqué à la scène, ce que vous remarquerez lors de la rotation.

Démo montrant la scène de l'environnement

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo</title>
      <script src = "babylon.js"></script>
      <style>
         canvas { width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            var light = new BABYLON.PointLight("Omni", 
            new BABYLON.Vector3(10, 50, 50), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
            camera.attachControl(canvas, true);

            var material1 = new BABYLON.StandardMaterial("mat1", scene);
            material1.diffuseTexture = new BABYLON.Texture("images/tsphere.jpg", scene);

            var sphere = BABYLON.Mesh.CreateSphere("red", 32, 2, scene);
            sphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
            sphere.material = material1;		

            // Fog
            scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
            scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
            scene.fogDensity = 0.01;

            //skybox		
            var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
            
            var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.backFaceCulling = false;
            
            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            
            skyboxMaterial.disableLighting = true;
            skybox.material = skyboxMaterial;


            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/plane.png", 8, 1000, scene);
            
            var plane = new BABYLON.Sprite("plane", spriteManagerPlayer);
            plane.position.x = -2;
            plane.position.y = 2;	
            plane.position.z = 0;	


            var alpha = 0;
            var x = 2;
            var y = 0;
            scene.registerBeforeRender(function () {
               scene.fogDensity = Math.cos(alpha) / 10;
               alpha += 0.02;
               sphere.rotation.y += 0.01;
               y += 0.05; 
               if (x > 50) {
                  x = -2;
               }
               plane.position.x = -x;
               x += 0.02; 
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Production

Explication

Dans l'exemple ci-dessus, nous avons utilisé le code suivant pour le brouillard -

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;
  • scene.fogMode = BABYLON.Scene.FOGMODE_EXP - Ici, la densité du brouillard suit une fonction exponentielle.

  • scene.registerBeforeRender = Avec cela, la densité du brouillard change comme suit -

var alpha = 0;
scene.registerBeforeRender(function () {
   scene.fogDensity = Math.cos(alpha) / 10;
   alpha += 0.02;
});

La valeur de alpha continue d'augmenter de 0,02 à mesure qu'elle se déroule dans une boucle comme dans la fonction ci-dessus.

Ici, nous avons ajouté une image de sprite plan et changé sa position avec le scene.registerBeforeRender fonction comme suit -

var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
   scene.fogDensity = Math.cos(alpha) / 10;
   alpha += 0.02;
   sphere.rotation.y += 0.01;
   y += 0.05; 
   if (x > 50) {
      x = -2;
   }
   plane.position.x = -x;
   x += 0.02; 
});
return scene;
};s

Nous changerons l'axe x de l'avion et le réinitialiserons lorsqu'il atteindra plus de 50.

De plus, la sphère pivote le long de l'axe y. Ceci est illustré dans l'exemple ci-dessus. La valeur est modifiée à l'aide de Sphere.rotation.y.

La texture utilisée pour la sphère est - images/tshphere.jpg. Les images sont stockées dans des images / dossier localement et également collées ci-dessous pour référence. Vous pouvez télécharger n'importe quelle image de votre choix et l'utiliser dans le lien de démonstration.

Nous avons besoin de six images pour un cube. Les images sont stockées localement dans le dossier images / cubetexture /. Vous pouvez télécharger n'importe quelle image de votre choix, mais lorsque vous l'enregistrez, enregistrez-la sous nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz. Veuillez noter que les images choisies doivent être dans une séquence afin que l'arrière-plan soit réaliste comme celui montré pour skybox.

Les images utilisées pour faire une skybox sont les suivantes - images/cubetexture/skybox

skybox_nx

skybox_ny

skybox_nz

skybox_px

skybox_py

skybox_pz