BabylonJS - Kurzanleitung

Babylon.js ist ein Javascript-Open-Source-Framework, mit dem 3D-Anwendungen / Videospiele für das Web entwickelt werden. Die offizielle Website von BabylonJS ist www.babylonjs.com .

Die Verwendung des Babylon.js-Frameworks ist für die Benutzer einfach. Es enthält alle erforderlichen Werkzeuge zum Erstellen und Verwalten von 3D-Objekten, Spezialeffekten und Sounds usw.

Babylon.js ist eine der beliebtesten 3D-Spiele-Engines und wird von Entwicklern häufig verwendet. Als 3D-Bibliothek bietet es integrierte Funktionen. Mit diesen Funktionen können Sie allgemeine 3D-Funktionen auf effiziente und genaue Weise implementieren.

Es wurde mit der auf WebGL und Javascript basierenden TypeScript-Sprache entwickelt.

Was ist WebGL?

WebGL (Web Graphics Library) ist der neue Standard für 3D-Grafiken im Web. Es wurde zum Rendern von 2D-Grafiken und interaktiven 3D-Grafiken entwickelt. Es basiert auf der ES 2.0-Bibliothek von OpenGL, einer einfachen 3D-API für Telefone und andere mobile Geräte. WebGL bietet ähnliche Funktionen wie ES 2.0 (Embedded Systems) und funktioniert gut mit moderner 3D-Grafikhardware.

Das TypeScript

Per Definition ist "TypeScript JavaScript für die Entwicklung im Anwendungsmaßstab".

TypeScript ist eine stark typisierte, objektorientierte, kompilierte Sprache. TypeScript ist sowohl eine Sprache als auch eine Reihe von Werkzeugen. TypeScript ist eine typisierte Obermenge von JavaScript, die zu JavaScript kompiliert wurde. Mit anderen Worten, TypeScript ist JavaScript mit einigen zusätzlichen Funktionen.

Das Ziel der TypeScript-Sprache ist es, die Produktion von JavaScript-Code zu verbessern und zu sichern. Da BabylonJS mit TypScript entwickelt wurde, ist es robust und sicher.

In diesem Kapitel erfahren Sie, wie Sie die Umgebung für BabylonJS einrichten.

Besuchen Sie zunächst die offizielle Website von Babylon.js - www.babylonjs.com . Gehen Sie zum Download-Bereich und wählen Sie die neueste Version von Babylon.js aus und speichern Sie sie in Ihrem Ordner.

Der Screenshot dafür ist wie folgt:

Sie können auch zu GITHUB gehen und das babylonjs-Projekt klonen -

Babylon.js

Geben Sie in Ihrer Befehlszeile -

git clone https://github.com/BabylonJS/Babylon.js.git
go to cd BabylonJS/
npm install

Die erforderlichen Dateien sind im Ordner BabylonJS verfügbar.

Sie können den VSCode (Microsoft Visual Studio-Code) zum Bearbeiten verwenden. Der Code verfügt über integrierte Funktionen wie das Hervorheben von Fehlern, das Hervorheben der Syntax usw. Sie können den Editor Ihrer Wahl verwenden und es ist nicht zwingend erforderlich, nur VSCode zu verwenden.

BabylonJSist ein Open-Source-JavaScript-Framework zum Erstellen von 3D-Spielen mit HTML5 und WEBGL. Es wird auf github gehostet. Die offizielle Website von BabylonJS ist www.babylonjs.com.

In der Welt der 3D-Animation werden die Formen mit Dreiecken gezeichnet. Mit WebGL steigt die Komplexität mit der Flut der Codierung, die in den Prozess involviert ist. BabylonJS ist die einfache Lösung, mit der die zunehmende Komplexität gemindert werden kann. Hier ist die API für Lichter, Kameras, Engine einfach zu handhaben und 3D-Objekte zu erstellen.

Der Quellcode von babylonJS ist in Typoskript codiert. Er wird in Javascript kompiliert und dem Endbenutzer zur Verfügung gestellt.

Um mit Babylonjs zu arbeiten, laden Sie die babylonjs-Datei herunter, hosten Sie sie an Ihrem Ende und schon können Sie mit dem Schreiben Ihres 3D-Codes beginnen.

BabylonJS wurde von Microsoft-Mitarbeitern im Jahr 2016 entwickelt. David Catuhe, Principal Program Manager für die Window & Devices Group bei Microsoft, ist der Hauptverantwortliche für die Entwicklung von BabylonJs und dessen Erfolg.

Um BabylonJS ausführen zu können, benötigen wir moderne Browser mit WEBGL-Unterstützung. Die neuesten Browser, z. B. Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+ usw., unterstützen WEBGL, und die Demos können auf denselben ausgeführt werden, um die Ausgabe anzuzeigen.

BabylonJs bietet folgende Funktionen, mit denen Sie verschiedene Arten von 3D-Szenen erstellen können:

  • Formen wie Kasten, Kugel, Zylinder, Kegel, Boden geschliffen
  • Kameras, Lichter
  • Maschen, Texturen, Materialien
  • Sprites
  • Morphing
  • Mesh Intersection und Kollisionserkennung
  • Physik-Engine-Plug-In
  • Aktionsmanager
  • SolidParticles
  • Instanzen und Partikel
  • Unterstützung für Knochen und Skelette
  • Hinzufügen von Musik und Sound zur Szene

Neben seinen eigenen Netzen ermöglicht BabylonJS auch die Verwendung von Netzen, die aus 3D-Software von Drittanbietern wie Blender, FBX und 3DS Max erstellt wurden.

Mixer

Blender ist ein Open-Source-Softwareprodukt für 3D-Computergrafik, mit dem animierte Szenen, 3D-gedruckte Modelle, Videospiele usw. erstellt werden. Bablyon-Dateien, die mit Babylon zum Rendern von Maschen verwendet werden sollen. Wie Sie Dateien von Blender nach Babylon konvertieren, wird in den folgenden Kapiteln dieses Tutorials erläutert.

FBX

Wird auch als Filmbox bezeichnet und hilft bei 3D-Animations- und Texture-Painting-Software. Die FBX-Dateien werden mit der Erweiterung.fbx gespeichert.

MAX

Die MAX-Software hilft Ihnen dabei, eine riesige Welt in Spielen zu schaffen, atemberaubende Szenen für Designs und Virtual-Reality-Erlebnisse.

Babylon.js ist ein beliebtes Framework zum Erstellen von 3D-Spielen für Entwickler. Es verfügt über integrierte Funktionen zur Implementierung von 3D-Funktionen. Lassen Sie uns mit Babylon.js eine einfache Demo erstellen und die grundlegenden Funktionen verstehen, die für den Einstieg erforderlich sind.

Wir werden zuerst eine Demo erstellen, die die Grundelemente von Babylon.js enthält. Darüber hinaus lernen wir auch die verschiedenen Funktionen von Babylon.js kennen.

Beispieldemo 1

In diesem Abschnitt erfahren Sie, wie Sie eine Demo erstellen, die die Grundelemente von BabylonJS enthält.

<!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>

Um BabylonJS ausführen zu können, benötigen wir moderne Browser mit WEBGL-Unterstützung. Die neuesten Browser - Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+ usw. - bieten WEBGL-Unterstützung, und die Demos können auf denselben Plattformen ausgeführt werden, um die Ausgabe anzuzeigen. Erstellen Sie ein Verzeichnis zum Speichern der Dateien für babylonjs. Rufen Sie die neueste BabylonJSscripts-Datei von der BabylonJS-Site ab. Alle Demo-Links in diesem Tutorial werden mit babylonjs Version 3.3 getestet.

Schritt 1

  • Erstellen Sie eine einfache HTML-Seite und fügen Sie die Datei Babylon.js hinzu.

  • Erstellen Sie ein Canvas-Tag, mit dem BabylonJSinside das Body-Tag wie unten gezeigt mit Inhalten rendert.

  • Fügen Sie der Leinwand CSS hinzu, um die gesamte Breite und Höhe des Bildschirms einzunehmen.

<!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>

Schritt 2

Beginnen wir jetzt mit dem BabylonJScode zum Rendern von Inhalten auf der Leinwand.

<!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>

Fügen Sie nun das Skript-Tag zur HTML-Struktur hinzu und speichern Sie die Canvas-Referenz in der variablen Canvas.

Um mit Babylon.js zu beginnen, erstellen Sie eine Engine-Instanz und übergeben Sie die Canvas-Referenz, um sie zu rendern.

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

Das globale Objekt BABYLON enthält alle Funktionen von Babylon.js, die in der Engine verfügbar sind.

Schritt 3

In diesem Schritt erstellen wir zunächst eine Szene.

In einer Szene werden alle Inhalte angezeigt. Wir werden die verschiedenen Arten von Objekten erstellen und sie der Szene hinzufügen, um sie auf dem Bildschirm sichtbar zu machen. Fügen Sie zum Erstellen einer Szene den folgenden Code zur bereits erstellten HTML-Struktur hinzu. Gegenwärtig werden wir den bereits erstellten Code als Fortsetzung der obigen HTML-Struktur anhängen.

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

Die endgültige HTML-Datei sieht wie folgt aus:

<!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>

Im obigen Beispiel ist die CreateScene-Funktion definiert und die var scene = createScene () ruft die Funktion auf.

In der CreateScene-Funktion wird die Szene erstellt, und in der nächsten Zeile wird der Szene Farbe hinzugefügt. Dies erfolgt mit BABYLON.Color3 (1, 0,8, 0,8). Die Farbe hier ist Pink.

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

Wenn Sie den obigen Demo-Link im Browser ausführen, wird derzeit nichts auf dem Browserbildschirm angezeigt. Dem Code, der wie in Schritt 4 als engine.runRenderLoop bezeichnet wird, muss noch ein Schritt hinzugefügt werden.

Schritt 4

Um die Szene tatsächlich auf dem Bildschirm sichtbar zu machen, müssen wir sie mit dem Aufruf engine.runRenderLoop rendern. Lassen Sie uns nun sehen, wie dies gemacht wird.

Rendering-Schleife

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

Die Engine.runRenderLoop-Funktion ruft scene.render auf, wodurch die Szene gerendert und für den Benutzer sichtbar gemacht wird. Die endgültige .html sieht wie folgt aus:

<!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>

Speichern Sie die obige Datei als basiccene.html und überprüfen Sie die Ausgabe im Browser. Der angezeigte Bildschirm ist wie unten gezeigt in rosa Farbe -

Schritt 5

Nachdem wir die Szene haben, müssen wir eine Kamera hinzufügen.

Kamera und Licht hinzufügen

Der unten angegebene Code fügt der Szene eine Kamera hinzu. Es gibt viele Arten von Kameras, die auf Babylon verwendet werden können.

ArcRotateCameraist eine Kamera, die sich um das Ziel dreht. Es kann mit Maus-, Cursor- oder Berührungsereignissen gesteuert werden. Die erforderlichen Parameter sind Name, Alpha, Beta, Radius, Ziel und Szene. Lassen Sie uns die Details der Kamera in einem nachfolgenden Abschnitt besprechen.

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

Jetzt müssen wir verstehen, wie man Licht hinzufügt.

Lichter werden verwendet, um die diffuse und spiegelnde Farbe zu erzeugen, die von jedem Pixel empfangen wird. Es gibt viele Arten von Lichtern. Wir werden die verschiedenen Arten von Lichtern im Abschnitt Lichter kennenlernen.

Hier benutze ich das PointLight in der Szene. Das PointLight wird wie die Sonne in alle Richtungen ausgestrahlt. Die Parameter sind Name, Position und die Szene, für die verwendet werden soll.

Führen Sie den folgenden Code aus, um Licht hinzuzufügen:

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

Schritt 6

Lassen Sie uns nun sehen, wie Sie Formen hinzufügen.

Hinzufügen von Formen

Der oben freigegebenen Demo wurden 4 Formen hinzugefügt.

  • Sphere
  • Torus
  • Box
  • Cylinder

Führen Sie den folgenden Code aus, um eine Kugel hinzuzufügen:

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

Sobald die Kugel hinzugefügt wurde, sieht der Code wie folgt aus:

<!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>

Ausgabe

Der obige Code generiert die folgende Ausgabe:

Fügen wir nun die anderen Formen hinzu - den Torus und die Box. Führen Sie den folgenden Code aus, um die Torusform hinzuzufügen.

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);

Wir werden der Box eine Position hinzufügen. BABYLON.Vector3 (-5, 0, 0) nimmt die x-, y- und z-Richtung an.

Bei der Ausführung generiert der obige Code die folgende Ausgabe:

Fügen wir nun die endgültige Form hinzu, die im obigen Screenshot gezeigt wird - den Zylinder.

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

Die Position wird dem Zylinder in x-Richtung 5 hinzugefügt. Der endgültige Code lautet wie folgt:

<!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>

Ausgabe

Bei der Ausführung generiert der obige Code die folgende Ausgabe:

Die Formen bewegen sich gemäß der Richtung, in die Sie den Cursor bewegen. Das gleiche geschieht mit dem Steuerelement zum Anbringen der Kamera an der Szene.

scene.activeCamera.attachControl(canvas);

Lassen Sie uns nun jede Form im Detail diskutieren.

Hier ist die Zusammenfassung aller Formen und der Syntax -

Sr.Nr. Gestalten Syntax
1 Box
var box = BABYLON.Mesh.CreateBox(
   "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
2 Kugel
var sphere = BABYLON.Mesh.CreateSphere(
   "sphere", 10.0, 10.0, scene, 
   false, BABYLON.Mesh.DEFAULTSIDE);
3 Flugzeug
var plane = BABYLON.Mesh.CreatePlane(
   "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
4 Rabatt
var disc = BABYLON.Mesh.CreateDisc(
   "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
5 Zylinder
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);
7 Knoten
var knot = BABYLON.Mesh.CreateTorusKnot(
   "knot", 2, 0.5, 128, 64, 2, 3, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
8 Liniennetz
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 Striche Linien
var dashedlines = BABYLON.Mesh.CreateDashedLines(
   "dashedLines", [v1, v2, ... vn], 
   dashSize, gapSize, dashNb, scene);
10 Band
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 Boden
var ground = BABYLON.Mesh.CreateGround(
   "ground", 6, 6, 2, scene);
13 Boden von HeightMap
var ground = BABYLON.Mesh.CreateGroundFromHeightMap(
   "ground", "heightmap.jpg", 200, 200, 250, 0, 10, 
   scene, false, successCallback);
14 Gefliester Boden
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);

Grundelement - Position, Drehung und Skalierung

In diesem Abschnitt erfahren Sie, wie Sie die bisher hinzugefügten Elemente positionieren, drehen oder skalieren.

Wir haben Box, Kugel, Zylinder, Knoten usw. erstellt. Nun werden wir sehen, wie die Formen positioniert, skaliert und gedreht werden.

Sr.Nr. Element & Beschreibung
1 Position

Bei einer Positionsänderung wird das Netz von einer Position zur anderen geändert.

2 Drehung

Bei der Drehung wird das Netz um das Netz gedreht.

3 Skalierung

Die Skalierung des Netzes kann in Bezug auf die x-, y- oder z-Achse erfolgen.

Grundelement - Elternschaft

Mit Parenting erstellen wir eine Eltern-Kind-Beziehung zwischen den Netzen und sehen, wie sie sich verhalten. Unabhängig davon, welche Transformationen Sie auf das übergeordnete Element anwenden, wird dasselbe auch auf das untergeordnete Element angewendet. Lassen Sie uns jetzt dasselbe mit der unten gezeigten Demo verstehen.

Demo

<!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>

Ausgabe

Erläuterung

Wir haben 3 Felder im obigen Netz erstellt. In der Demo wird die Boxb-Skalierung angewendet und Boxc als übergeordnetes Element zugewiesen, das ebenfalls skaliert, da das übergeordnete Boxb und dasselbe skaliert werden. Sie können mit der Demo herumspielen, um zu sehen, wie der Eltern-Kind-Link funktioniert.

Um ein Netz zu erstellen, müssen Sie das übergeordnete Element eines anderen Netzes verwenden.

  • child.parent = parentmesh;

Grundelement - Umgebung

Lassen Sie uns nun die Szenenumgebung in diesem Abschnitt diskutieren. Wir werden über die sprechenscene background color, ambientcolor, skyboxes, fog modeusw. auf einer Szene.

Wir haben das gesehen scene background color is demos was wir bisher geschaffen haben.

Hintergrundfarbe der Szene

Lassen Sie uns nun sehen, wie die Hintergrundfarbe der Szene funktioniert.

Syntax

Es folgt die Syntax für die Hintergrundfarbe der Szene -

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

Die obige Eigenschaft ändert die Hintergrundfarbe der Szene.

Szene Umgebungsfarbe

Lassen Sie uns nun sehen, wie die Umgebungsfarbe der Szene funktioniert.

Syntax

Es folgt die Syntax für die Umgebungsfarbe der Szene -

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

AmbientColor wird zusammen mit dem verwendet StandardMaterialUmgebungsfarbe und Textur. Wenn es keine Umgebungsfarbe für die Szene gibt, wird dieStandardMaterial.ambientColor und StandardMaterial.ambientTexturehat keine Wirkung. Die StandardMaterial ambientColor / ambientTexture wird aktiv, sobald die ambientColor für Szene angewendet wird. Standardmäßig ist die Szene angegebenscene.ambientColor und setzen auf Color3 (0, 0, 0), was keine Umgebungsfarbe bedeutet.

Szenennebelmodus

Wir werden jetzt verstehen, wie der Scene Fog-Modus funktioniert.

Syntax

Es folgt die Syntax für den Scene Fog-Modus.

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

Die folgende Liste der verfügbaren Nebelmodi -

  • BABYLON.Scene.FOGMODE_NONE - Standardmäßig ist Nebel deaktiviert.

  • BABYLON.Scene.FOGMODE_EXP - Die Nebeldichte folgt einer Exponentialfunktion.

  • BABYLON.Scene.FOGMODE_EXP2 - wie oben, aber schneller.

  • BABYLON.Scene.FOGMODE_LINEAR - Die Nebeldichte folgt einer linearen Funktion.

Wenn der Nebelmodus EXP oder EXP2 definiert ist, können Sie die Dichte wie folgt definieren:

scene.fogDensity = 0.01;

Wenn der Nebelmodus LINEAR ist, können Sie wie folgt definieren, wo der Nebel beginnt und endet -

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

Führen Sie den folgenden Code aus, um dem Nebel Farbe zu verleihen:

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

Skybox

Skybox ist eine Möglichkeit, Hintergrundinformationen in Spielen zu erstellen, damit die Szene realistisch aussieht. Es ist eher eine Hülle um Ihren Bildschirm, die die für das Material verwendete Textur abdeckt. Wählen Sie Ihre Bilder richtig aus, damit sie für die Szene, die Sie erstellen möchten, realistisch aussehen. Um eine Skybox zu erstellen, müssen Sie eine Box erstellen und Material darauf anwenden. Wir werden die verschiedenen Materialien in einem nachfolgenden Kapitel ausführlich besprechen.

Jetzt werden wir sehen, wie man eine Skybox mit Box und Material erstellt.

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

Wir werden eine Box der Größe 100 erstellen, damit sie die gesamte Szene abdeckt. Wir beginnen damit, der Box Material zu geben, das wie folgt ausgeführt wird:

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

Diesem Material werden wir die Eigenschaften zuweisen.

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

Wir müssen eine Reflexionstextur verwenden, die im Grunde genommen verwendet wird, um ein spiegelähnliches Material zu erzeugen. Die Reflexionstextureigenschaft verwendet CubeTexture, bei der das Bild als Eingabe verwendet wird. Da der Würfel 6 Flächen hat, muss das für skybox erforderliche Bild 6 sein, dh intern muss es als skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz gespeichert werden. Die für die Skybox verwendeten Bilder werden unten eingefügt. Sie sind Flächen des Würfels auf allen sechs Seiten. Wenn Sie der Form eine Textur zuweisen, werden die Details des verwendeten Bildes angezeigt und die Szene sieht realistisch aus. Wir haben den Koordinatenmodus als SKYBOX_MODE verwendet, wie unten gezeigt -

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

Es gibt andere Eigenschaften, die für Material verwendet werden, wie z. B. backfaceCulling, diffuseColor, specularColor, disableLighting usw. Die Eigenschaften werden im Abschnitt Material ausführlich erläutert.

In der Demo zeigen wir eine mit Skybox erstellte Umgebungsszene, eine in der Szene rotierende Kugel und eine sich bewegende Ebene. Auf die Szene wird Nebel angewendet, den Sie beim Drehen bemerken werden.

Demo mit Umgebungsszene

<!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>

Ausgabe

Erläuterung

Im obigen Beispiel haben wir den folgenden Code für Nebel verwendet -

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 - Hier folgt die Nebeldichte einer Exponentialfunktion.

  • scene.registerBeforeRender = Damit ändert sich die Nebeldichte wie folgt -

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

Der Wert von Alpha wird in einer Schleife wie in der obigen Funktion um 0,02 erhöht.

Hier haben wir ein Flugzeug-Sprite-Bild hinzugefügt und seine Position mit dem geändert scene.registerBeforeRender Funktion wie folgt -

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

Wir werden die x-Achse der Ebene ändern und zurücksetzen, wenn sie mehr als 50 erreicht.

Außerdem wird die Kugel entlang der y-Achse gedreht. Dies wird im obigen Beispiel gezeigt. Der Wert wird mit sphäre.rotation.y geändert.

Die für die Kugel verwendete Textur ist - images/tshphere.jpg. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Wir brauchen sechs Bilder für einen Würfel. Die Bilder werden lokal im Ordner images / cubetexture / gespeichert. Sie können jedes Bild Ihrer Wahl herunterladen, aber wenn Sie es speichern, speichern Sie es als nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz. Bitte beachten Sie, dass die ausgewählten Bilder in einer Reihenfolge angeordnet sein sollten, damit der Hintergrund realistisch wie der für skybox gezeigte aussieht.

Die Bilder, die zum Erstellen einer Skybox verwendet werden, sind wie folgt: images/cubetexture/skybox

skybox_nx

skybox_ny

skybox_nz

skybox_px

skybox_py

skybox_pz

Materialien sind wie Kleidung für die Objekte. Sie können Farbe, Textur hinzufügen und Ihre Netze damit umwickeln. Sie können dasselbe Material verwenden, um viele Maschen abzudecken. Meshes können die Szene sein, die wir gerade im Beispiel im vorherigen Kapitel gesehen haben - die Ebene, die durch den Himmel fliegt.

In diesem Kapitel erfahren Sie, wie Sie in diesem Kapitel Farbe, Textur und Reflexion für die Netze hinzufügen.

Wir werden der bereits erstellten Szene Material hinzufügen. Wir werden Fortschritte machen, indem wir allen von uns erstellten Formen Material hinzufügen.

Betrachten wir einige Beispiele, um zu sehen, wie das Hinzufügen von Material funktioniert.

Syntax

var materialforshapes = new BABYLON.StandardMaterial("texture1", scene);

Das obige Material ändert nichts, da es das Standardmaterial ist. Wir werden die verfügbaren Eigenschaften verwenden, um die Objekte ansprechender aussehen zu lassen.

Die verfügbaren Eigenschaften sind wie folgt:

  • Transparency

  • Diffuse

  • Emissive

  • Ambient

  • Specular

  • Keulen auf der Rückseite

  • WireFrame

Sehen Sie sich an, wie diese Eigenschaften, die auf das Material angewendet werden, das Erscheinungsbild des Netzes verändern.

Grundlegende Materialeigenschaft - FresnelParameters

Fresnel ist die neue Sache, die BabylonJS hinzugefügt hat standardmaterial. Hiermit können Sie die Farbe ändern, die auf die Formen angewendet wird. Mit dem einfachen Fresnel können Sie eine glasartige Reflexion erzielen. Mit dem Fresnel können Sie die Kanten stärker reflektieren und nicht alle in der Mitte.

Die folgenden Eigenschaften sind für Fresnel verfügbar

StandardMaterial.diffuseFresnelParameters
StandardMaterial.opacityFresnelParameters
StandardMaterial.reflectionFresnelParameters
StandardMaterial.emissiveFresnelParameters
StandardMaterial.refractionFresnelParameters

Demo

<!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);

            var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 10, BABYLON.Vector3.Zero(), scene);

            camera.setPosition(new BABYLON.Vector3(0, 5, -10));

            camera.attachControl(canvas);
            camera.upperBetaLimit = Math.PI / 2;
            camera.lowerRadiusLimit = 4;

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var knot = BABYLON.Mesh.CreateTorusKnot("knot", 1, 0.4, 128, 64, 2, 3, scene);	
            var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere", 16, 1.5, scene);
            yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(3, 0, 0));
            var yellowMaterial = new BABYLON.StandardMaterial("yellowMaterial", scene);
            yellowMaterial.diffuseColor = BABYLON.Color3.Yellow();
            yellowSphere.material = yellowMaterial;    

            // Ground
            var ground = BABYLON.Mesh.CreateBox("Mirror", 1.0, scene);
            ground.scaling = new BABYLON.Vector3(100.0, 0.01, 100.0);
            ground.material = new BABYLON.StandardMaterial("ground", scene);
            ground.material.diffuseTexture = new BABYLON.Texture("images/rainbow.png", scene);
            ground.material.diffuseTexture.uScale = 10;
            ground.material.diffuseTexture.vScale = 10;
            ground.position = new BABYLON.Vector3(0, -2, 0);

            // Main material	
            var mainMaterial = new BABYLON.StandardMaterial("main", scene);
            knot.material = mainMaterial;

            var probe = new BABYLON.ReflectionProbe("main", 512, scene);
            probe.renderList.push(yellowSphere);
            probe.renderList.push(ground);
            mainMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);
            mainMaterial.refractionTexture = probe.cubeTexture;
            mainMaterial.refractionFresnel<h3>Parameters</h3> = new BABYLON.Fresnel<h3>Parameters</h3>();
            mainMaterial.refractionFresnel<h3>Parameters</h3>.bias = 0.5;
            mainMaterial.refractionFresnel<h3>Parameters</h3>.power = 16;
            mainMaterial.refractionFresnel<h3>Parameters</h3>.leftColor = BABYLON.Color3.Black();
            mainMaterial.refractionFresnel<h3>Parameters</h3>.rightColor = BABYLON.Color3.White();
            mainMaterial.indexOfRefraction = 1.05;

            // Fog
            scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR;
            scene.fogColor = scene.clearColor;
            scene.fogStart = 20.0;
            scene.fogEnd = 50.0;

            // Animations
            scene.registerBeforeRender(function () {
               yellowSphere.rotation.y += 0.01;
               //  greenSphere.rotation.y += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Erläuterung

Der folgende Code wendet den Fresnel-Effekt an. Die Farben links und rechts werden auf die Kanten der Netze angewendet.

mainMaterial.refractionFresnelParameters = new BABYLON.FresnelParameters();
mainMaterial.refractionFresnelParameters.bias = 0.5;
mainMaterial.refractionFresnelParameters.power = 16;
mainMaterial.refractionFresnelParameters.leftColor = BABYLON.Color3.Black();
mainMaterial.refractionFresnelParameters.rightColor = BABYLON.Color3.White();

Vorspannung und Leistungseigenschaft steuern den Fresnel-Effekt auf der Oberfläche.

In dieser Demo haben wir ein Bild namens rainbow.png verwendet. Die Bilder werden lokal in images / folder gespeichert. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Animation macht eine Szene interaktiver und beeindruckend und verleiht ihr ein realistisches Aussehen. Lassen Sie uns nun die Animation im Detail verstehen. Wir werden Animationen auf Formen anwenden, um sie von einer Position zur anderen zu verschieben. Um die Animation verwenden zu können, müssen Sie ein Objekt in der Animation mit den erforderlichen Parametern erstellen.

Lassen Sie uns nun die Syntax für das gleiche sehen -

var animationBox = new BABYLON.Animation(
   "myAnimation", 
   "scaling.x", 
   30, 
   BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

Parameter

Berücksichtigen Sie die folgenden Parameter im Zusammenhang mit Animationen mit BabylonJS:

  • Name der Animation.

  • Eigenschaft der Form - zum Beispiel Skalieren, Ändern der Position usw. Skalieren wird in der Syntax angezeigt. Hier wird das Feld entlang der x-Achse skaliert.

  • Bilder pro Sekunde angefordert: höchstmögliche FPS in dieser Animation.

  • Hier entscheiden Sie und geben ein, welche Art von Wert geändert werden soll: Ist es ein Float (z. B. eine Übersetzung), ein Vektor (z. B. eine Richtung) oder eine Quaternion?

  • Genaue Werte sind -

    • BABYLON.Animation.ANIMATIONTYPE_FLOAT

    • BABYLON.Animation.ANIMATIONTYPE_VECTOR2

    • BABYLON.Animation.ANIMATIONTYPE_VECTOR3

    • BABYLON.Animation.ANIMATIONTYPE_QUATERNION

    • BABYLON.Animation.ANIMATIONTYPE_COLOR3

  • Verhalten für die Animation - um die Animation zu stoppen oder erneut zu starten.

  • Verwenden Sie vorherige Werte und erhöhen Sie sie -

    • BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE

  • Neustart vom Anfangswert -

    • BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE

  • Behalten Sie ihren endgültigen Wert

    • BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT

Lassen Sie uns nun das Animationsobjekt erstellen -

var animationBox = new BABYLON.Animation(
   "myAnimation", 
   "scaling.x", 
   30, 
   BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

Demo für Animation

<!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);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;
            
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);
            box.position = new BABYLON.Vector3(-10,0,0);

            var box1 = BABYLON.Mesh.CreateBox("box1", '3', scene);
            box1.position = new BABYLON.Vector3(0,0,0);

            var animationBox = new BABYLON.Animation("myAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            // An array with all animation keys
            var keys = []; 

            //At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 1
            });

            //At the animation key 20, the value of scaling is "0.2"
            keys.push({
               frame: 20,
               value: 0.2
            });

            keys.push({
               frame: 60,
               value: 0.4
            });

            //At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 1
            });
            
            animationBox.setKeys(keys);
            box.animations = [];
            box.animations.push(animationBox);			
            scene.beginAnimation(box, 0, 100, true); 

            // An array with all animation keys
            var keys = []; 

            //At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 1
            });

            //At the animation key 20, the value of scaling is "0.2"
            keys.push({
               frame: 60,
               value: 0.2
            });

            //At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 1
            });
            animationBox1.setKeys(keys);
            box1.animations = [];
            box1.animations.push(animationBox1);			
            scene.beginAnimation(box1, 0, 100, true); 
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

// An array with all animation keys
var keys = []; 

//At the animation key 0, the value of scaling is "1"
keys.push({
   frame: 0,
   value: 1
});

//At the animation key 20, the value of scaling is "0.2"
keys.push({
   frame: 20,
   value: 0.2
});

//At the animation key 100, the value of scaling is "1"
keys.push({
   frame: 100,
   value: 1
});

animationBox.setKeys(keys);

box.animations = [];

box.animations.push(animationBox);

scene.beginAnimation(box, 0, 100, true); //defines the start and the end on the target shape box.

Im Folgenden sind die anderen Funktionen aufgeführt, die für das Animationsobjekt verfügbar sind:

  • pause()
  • restart()
  • stop()
  • reset()

Wir können das aufbewahren beginAnimation Referenz in einer Variablen und verwenden Sie die Referenz, um die Animation anzuhalten, anzuhalten oder zurückzusetzen.

var newAnimation = scene.beginAnimation(box1, 0, 100, true);

Zum Beispiel,

newAnimation.pause();

Für Animationsobjekte stehen Funktionen zur Steuerung der Keyframes zur Verfügung.

BABYLON.Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
   return startValue + (endValue - startValue) * gradient;
};

BABYLON.Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
   return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
};

BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
   return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
};

Hier ist die Liste der Funktionen, die Sie ändern können -

  • floatInterpolateFunction
  • quaternionInterpolateFunction
  • quaternionInterpolateFunctionWithTangents
  • vector3InterpolateFunction
  • vector3InterpolateFunctionWithTangents
  • vector2InterpolateFunction
  • vector2InterpolateFunctionWithTangents
  • sizeInterpolateFunction
  • color3InterpolateFunction
  • matrixInterpolateFunction

Um eine schnelle Animation zu erstellen, steht eine Funktion zur Verfügung, die direkt verwendet werden kann.

Zum Beispiel,

Animation.CreateAndStartAnimation = function(name, mesh, tartgetProperty, framePerSecond, totalFrame, from, to, loopMode);

Hier können Sie nur 2 Keyframes verwenden - start und end.

Demo

<!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);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;
            
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);
            box.position = new BABYLON.Vector3(0,0,0);
            BABYLON.Animation.CreateAndStartAnimation('boxscale', box, 'scaling.x', 30, 120, 1.0, 1.5);  
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Animationsmischung

Sie können Animationsüberblendungen mit Hilfe von enableBlending = true erzielen.

Diese gemischte Animation ändert sich vom aktuellen Objektstatus.

Erleichternde Funktionen

Um die Animation eindrucksvoller zu machen, gibt es einige Beschleunigungsfunktionen, die wir bereits früher mit CSS verwendet haben.

Es folgt eine Liste der Beschleunigungsfunktionen -

  • BABYLON.CircleEase ()

  • BABYLON.BackEase (Amplitude)

  • BABYLON.BounceEase (Bounces, Bounciness)

  • BABYLON.CubicEase ()

  • BABYLON.ElasticEase (Schwingungen, Federung)

  • BABYLON.ExponentialEase (Exponent)

  • BABYLON.PowerEase (Leistung)

  • BABYLON.QuadraticEase ()

  • BABYLON.QuarticEase ()

  • BABYLON.QuinticEase ()

  • BABYLON.SineEase ()

Demo

<!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);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            
            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;

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

            var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            // An array with all animation keys
            var keys = []; 

            //At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 1
            });

            //At the animation key 20, the value of scaling is "0.2"
            keys.push({
               frame: 60,
               value: 0.2
            });

            //At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 1
            });
            
            animationBox1.setKeys(keys);
            box1.animations = [];
            // box1.animations.push(animationBox1);		

            var easingFunction = new BABYLON.QuarticEase();
            easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);

            animationBox1.setEasingFunction(easingFunction);
            box1.animations.push(animationBox1);
            scene.beginAnimation(box1, 0, 100, true); 
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Animationsereignis

Sie können alles Notwendige für ein Animationsereignis ausführen. Wenn Sie etwas ändern möchten, wenn der Rahmen geändert wird oder wenn die Animation abgeschlossen ist, können Sie dies erreichen, indem Sie der Animation Ereignisse hinzufügen.

var event1 = new BABYLON.AnimationEvent(50, function() { console.log("Yeah!"); }, true);
// You will get hte console.log when the frame is changed to 50 using animation.

animation.addEvent(event1); //attaching event to the animation.

BabylonJS - Sprites

Worauf beziehen sich Sprites in der Computergrafik? Es ist im Grunde eine zweidimensionale Bitmap, die in eine größere Szene integriert ist. Wenn mehrere kleinere Bilder zu einer einzigen Bitmap kombiniert werden, um Speicherplatz zu sparen, wird das resultierende Bild als Sprite-Sheet bezeichnet. Beginnen wir mit Sprites und deren Verwendung.

Der erste Schritt, um mit Sprites zu arbeiten, besteht darin, einen Sprite-Manager zu erstellen.

var spriteManagerTrees = new BABYLON.SpriteManager("treesManagr", "Assets/Palm-arecaceae.png", 2000, 800, scene);

Berücksichtigen Sie die folgenden Parameter, um einen Sprite-Manager zu erstellen:

  • Name - Der Name dieses Managers.

  • URL - Die zu verwendende Bild-URL.

  • Capacity of manager - Die maximale Anzahl von Instanzen in diesem Manager. Mit der obigen Instanz werden beispielsweise 2000 Bäume erstellt.

  • Cell size - Die Größe des Bildes.

  • Scene - Die Szene, zu der der Manager hinzugefügt wird.

var spriteManagerPlayer = new BABYLON.SpriteManager("playerManagr","Assets/Player.png", 2, 64, scene);

Schauen Sie sich das obige Objekt an. Wir haben ein Spielerbild angegeben und erstellen jetzt 2 Instanzen davon. Die Größe des Bildes beträgt 64. Jedes Bild eines Sprites muss in einem 64-Pixel-Quadrat enthalten sein, nicht mehr und nicht weniger.

Lassen Sie uns nun eine Instanz derselben erstellen, die mit dem Sprite-Manager verknüpft ist.

var player = new BABYLON.Sprite("player", spriteManagerPlayer);

Sie können mit diesem Player-Objekt wie mit anderen Formen oder Maschen herumspielen. Sie können Position, Größe, Winkel usw. zuweisen.

player.size = 0.3;
player.angle = Math.PI/4;
player.invertU = -1;
player.width = 0.3;
player.height = 0.4;

Demo

<!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);	
            // Create camera and light
            var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var spriteManagerTrees = new BABYLON.SpriteManager("trees", "images/tree.png", 1000, 400, scene);	

            for (var i = 0; i < 1000; i++) {
               var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
               tree.position.x = Math.random() * 100 - 50;
               tree.position.z = Math.random() * 100 - 50;
               tree.isPickable = true;

               //Some "dead" trees
               if (Math.round(Math.random() * 5) === 0) {
                  tree.angle = Math.PI * 90 / 180;
                  tree.position.y = -0.3;
               }
            }

            var spriteManagerTrees1 = new BABYLON.SpriteManager("trees1", "images/tree1.png", 1000,400, scene);	

            for (var i = 0; i < 1000; i++) {
               var tree1 = new BABYLON.Sprite("tree1", spriteManagerTrees1);       
               if (i %2 == 0) {
               tree1.position.x = Math.random() * 100 - 50;			
               } else {
                  tree1.position.z = Math.random() * 100 - 50;
               }
               tree1.isPickable = true;
            }

            spriteManagerTrees.isPickable = true;
            spriteManagerTrees1.isPickable = true;

            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/bird.png", 2, 200, scene);
            
            var player = new BABYLON.Sprite("player", spriteManagerPlayer);
            player.position.x = 2;
            player.position.y = 2;	
            player.position.z = 0;	


            var spriteManagerPlayer1 = new BABYLON.SpriteManager("playerManager1", "images/bird.png", 2, 200, scene);
            
            var player1 = new BABYLON.Sprite("player", spriteManagerPlayer1);
            player1.position.x = 1;
            player1.position.y = 2;	
            player1.position.z = 0;	

            var spriteManagerPlayer2 = new BABYLON.SpriteManager("playerManager2", "images/bird.png", 2, 200, scene);
            
            var player2 = new BABYLON.Sprite("player", spriteManagerPlayer2);
            player2.position.x = 0;
            player2.position.y = 1;	
            player2.position.z = 0;	

            scene.onPointerDown = function (evt) {
               var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
               if (pickResult.hit) {
                  pickResult.pickedSprite.angle += 1;
               }
            };
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

In dieser Demo haben wir ein Bild namens tree.png, tree1.png verwendet, um Bäume anzuzeigen, bird.png, um Vögel in der Szene anzuzeigen. Diese Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Die für Tree verwendeten Bilder sind unten dargestellt.

images/tree.png

images/tree1.png

images/bird.png

Lassen Sie uns jetzt noch eine Demo mit Sprites-Ballons sehen.

Demo mit Sprites-Ballons

<!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);

            var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", -3.4, 1.0, 82, new BABYLON.Vector3(0, -15, 0), scene);
            camera.setPosition(new BABYLON.Vector3(30, 0,100));
            camera.attachControl(canvas, true);
            
            var spriteManagerTrees = new BABYLON.SpriteManager("trees", "images/balloon.png", 50, 450, scene);	

            var treearray = [];
            for (var i = 0; i < 50; i++) {
               var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
               tree.position.x = Math.random() * 100 - 10;
               tree.position.z = Math.random() * 100 - 10;
               tree.position.y = -35;
               tree.isPickable = true;       
               treearray.push(tree);
            }

            spriteManagerTrees.isPickable = true;
            scene.onPointerDown = function (evt) {
               var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
               if (pickResult.hit) {
                  pickResult.pickedSprite.position.y = -3000;			
               }
            };
            
            k = -35;
            var animate = function() {
               if (k > 3) return;
               k += 0.05;
               for (var i = 0; i < treearray.length; i++) {
                  treearray[i].position.y = k;
               }
            };
            scene.registerBeforeRender(animate);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

In dieser Demo haben wir ein Bild namens ballon.png verwendet. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

images/balloon.png

Luftballons steigen am Himmel auf und sobald sie anhalten, können Sie darauf klicken und sie verschwinden. Dies geschieht mit der Funktion pickSprite, die beim Klicken auf das erstellte Sprite Details liefert.

Die Funktion onPointerDown wird aufgerufen, wenn die Mausaktion stattfindet und die Position des Sprites geändert wird.

var animate = function() {
   if (k > 3) return;
   k += 0.05;
   for (var i = 0; i < treearray.length; i++) {
      treearray[i].position.y = k;
   }
};
scene.registerBeforeRender(animate);

Die Funktion animieren wird in registerBeforeRender aufgerufen, wodurch die Ballons von anfänglich -35 auf +3 verschoben werden. Es wird langsam bewegt, indem es um 0,05 erhöht wird.

BabylonJS - Teilchen

Ein Partikelsystem ist eine Technik in der Computergrafik, die eine große Anzahl sehr kleiner Sprites, 3D-Modelle oder anderer grafischer Objekte verwendet, um bestimmte Arten von "Fuzzy" -Phänomenen zu simulieren, die mit herkömmlichen Rendering-Techniken ansonsten sehr schwer zu reproduzieren sind.

Um ein Partikelsystem zu erstellen, müssen Sie die Klasse wie folgt aufrufen:

var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);//2000 refers to the total number of particles to be produced.

Die folgenden Eigenschaften müssen für das Partikelsystem berücksichtigt werden:

particleSystem.particleTexture = new BABYLON.Texture("Flare.png", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = fountain
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

Die Emitter-Eigenschaft nimmt das Netz, von dem das Partikel emittiert werden muss. Dascolor1 und color2 sind die Farben für die Partikel.

ColorDead ist die Farbe, die auf das Partikel angewendet wird, kurz bevor es aus der Szene verschwindet, und wird daher als colorDead bezeichnet.

particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;

MinSize und maxSize ist die Größe der Partikel. MinlifeTime und maxLifeTime ist die Lebensdauer der Partikel.

particleSystem.emitRate = 1500;

Die Emissionsrate ist die Geschwindigkeit, mit der Partikel emittiert werden.

Wir haben Torus in der unten gezeigten Demo verwendet. Wir haben das Partikelsystem und seine Eigenschaften verwendet, um alle Partikel um den Torus herum zu erhalten.

Demo 1

<!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);
            // Setup environment
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
            
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var fountain = BABYLON.Mesh.CreateTorus("torus", 2, 1, 8, scene, false);
            
            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
            particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);

            particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
            particleSystem.emitter = fountain;


            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.5;

            particleSystem.emitRate = 1500;

            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);


            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;

            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            particleSystem.start();
            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                   BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            
            // At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
               frame: 50,
               value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 0
            });

            // Launch animation
            animation.setKeys(keys);
            fountain.animations.push(animation);
            scene.beginAnimation(fountain, 0, 100, true);
            return scene;
         }
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });	
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir ein Bild namens dot.jpg verwendet. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Das folgende Bild wird für die Partikelstruktur verwendet: images/dot.jpg

Demo 2

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Ball/Ground 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);
            scene.clearColor = new BABYLON.Color3( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(-100, 0,-100));
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;
            
            var ground =  BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
            ground.material = gmat;
            gmat.wireframe = true;

            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
            particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);

            particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
            particleSystem.emitter = ground;

            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.5;

            particleSystem.emitRate = 1500;

            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;

            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            particleSystem.start();


            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                           BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            // At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
               frame: 50,
               value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 0
            });

            // Launch animation
            animation.setKeys(keys);
            ground.animations.push(animation);
            
            //scene.beginAnimation(ground, 0, 100, true);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Demo mit Animation

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Ball/Ground 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);
            scene.clearColor = new BABYLON.Color3( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(-100, 0, -100));
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;
            
            var ground =  BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
            ground.material = gmat;
            gmat.wireframe = true;

            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
            particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);

            particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
            particleSystem.emitter = ground;

            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // To...

            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.5;

            particleSystem.emitRate = 1500;

            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

            particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);//gravity for the particle.

            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
            
            //random direction for the particles on the scene
            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;
            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            particleSystem.start();

            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                           BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            
            // At the animation key 0, the value of scaling is "1"
            keys.push({
               frame: 0,
               value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
               frame: 50,
               value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
               frame: 100,
               value: 0
            });

            // Launch animation
            animation.setKeys(keys);
            ground.animations.push(animation);
            scene.beginAnimation(ground, 0, 100, true); 
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Erläuterung

Die obige Demo zeigt eine Erdung mit Drahtgittermaterial und das Partikelsystem wird von der Mitte aus hergestellt.

BabylonJS verfügt über viele Kameras, die verwendet werden können. Es ist jeweils nur eine Kamera für eine Szene aktiv.

In diesem Kapitel erfahren Sie, wie Sie Kameras in BabylonJS verwenden.

FreeCamera

Lassen Sie uns nun sehen, wie die FreeCamera funktioniert.

Syntax

Es folgt die Syntax für die FreeCamera -

var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);

Dies ist die Position, an der sich die Kamera befindet - neuer BABYLON.Vector3 (0, 1, -15).

Durch Ändern der Richtung wird die Richtung geändert. Sie können die Werte ändern und sehen, wie sich die Kamera in der Szene verhält.

Im Folgenden sind die von der FreeCamera verwendeten Parameter aufgeführt:

  • Name
  • Position
  • Scene

ArcRotateCamera

Diese Kamera dreht sich um einen bestimmten Zielzapfen. Es kann mit Cursorn und Maus oder mit Berührungsereignissen gesteuert werden. Parameter sind Name, Alpha, Beta, Radius und Ziel.

Syntax

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

ArcRotateCamerazeigt in die + x Richtung. Verwenden Sie die Taste, um die Position der Kamera zu ändernsetPosition Eigentum.

camera.setPosition(new BABYLON.Vector3(0, 0, -100));

Die ArcRotateCamera ist eine hervorragende Kamera zum Animieren. Mit dem folgenden Befehl können Sie die Kamera um das Ziel drehen:

scene.activeCamera.alpha += .01;

TouchCamera

Berührung ist eine Art "Gesture". Es kann sich auf einem Pad oder Bildschirm mit Finger (n), Stift, Handschuh, Füßen oder Laserpointer befinden. Jede Bewegung, die wahrgenommen werden kann, kann als Geste betrachtet werden.

Syntax

Es folgt die Syntax für TouchCamera -

var camera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 1, -15), scene);

GamepadCamera

Diese Kamera wurde speziell für die Verwendung mit Gamepads entwickelt.

Syntax

Es folgt die Syntax für die Gamepad-Kamera:

var camera = new BABYLON.GamepadCamera("Camera", new BABYLON.Vector3(0, 15, -45), scene);

DeviceOrientationCamera

Diese Kamera wurde speziell entwickelt, um auf Fälle von Geräteorientierungsereignissen zu reagieren, z. B. wenn Sie Ihr Gerät vorwärts oder rückwärts, links oder rechts usw. neigen.

Syntax

var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 1, -15), scene);

FollowCamera

FollowCamera ist so konzipiert, dass es jedem Szenenelement mit einer Position folgt. Es kann von hinten, vorne oder aus jedem Winkel folgen.

Syntax

Es folgt die Syntax für die FollowCamera -

var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 15, -45), scene);

VirtualJoysticksCamera

Diese Kamera reagiert auf Virtual Joystick-Ereignisse. Die virtuellen Joysticks sind 2D-Grafiken auf dem Bildschirm, mit denen Kameras oder andere Szenenelemente gesteuert werden.

Syntax

Es folgt die Syntax für die VirtualJoysticksCamera -

var camera = new BABYLON.VirtualJoysticksCamera("VJ_camera", new BABYLON.Vector3(0, 1, -15), scene);

Anaglyphenkamera

Die AnaglyphCamera ist für die Verwendung mit roten und cyanfarbenen 3D-Brillen vorgesehen. Es werden Filtertechniken für die Nachbearbeitung verwendet.

AnaglyphArcRotateCamera

Es folgt die Syntax für die AnaglyphArcRotateCamera -

var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);

AnaglyphFreeCamera

Es folgt die Syntax für die AnaglyphFreeCamera - -

var camera = new BABYLON.AnaglyphFreeCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);

VRDeviceOrientationFreeCamera

Die VRDeviceOrientationFreeCamera verwendet FreeCamera als Basis, sodass die Eigenschaften und Methoden von FreeCamera auch in unserer VRDeviceOrientationFreeCamera enthalten sind.

Syntax

Es folgt die Syntax für die VRDeviceOrientationFreeCamera - -

var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene, 0);

WebVRFreeCamera

Die WebVRFreeCamera verwendet FreeCamera als Basis, sodass die Eigenschaften und Methoden von FreeCamera auch in unserer WebVRFreeCamera enthalten sind.

Syntax

Es folgt die Syntax für die WebVRFreeCamera - -

var camera = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 1, -15), scene);

In den meisten Demos werden Sie sehen attachControl wo die Kamera an der Leinwand befestigt ist.

Beispiel

camera.attachControl(canvas, true);

In diesem Kapitel lernen wir die für BabylonJS verwendeten Lichter kennen. Wir werden zunächst einen Blick auf die verschiedenen Arten von Lichtern werfen, die mit Babylonjs erhältlich sind.

Lichter sollen die diffuse und spiegelnde Farbe erzeugen, die von jedem Pixel empfangen wird. Später wird es auf Material verwendet, um die endgültige Farbe jedes Pixels zu erhalten.

Es gibt 4 Arten von Lichtern mit Babylonjs.

  • Punktlicht
  • Richtungslicht
  • Scheinwerfer
  • Hemisphärisches Licht

BabylonJS - Punktlicht

Ein klassisches Beispiel für Punktlicht ist die Sonne, deren Strahlen sich in alle Richtungen ausbreiten. Punktlicht hat einen einzigartigen Punkt im Raum, von dem aus es das Licht in alle Richtungen verbreitet. Die Farbe des Lichts kann mithilfe der spiegelnden und diffusen Eigenschaft gesteuert werden.

Syntax

Es folgt die Syntax für Point Light -

var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);

Es gibt drei verschiedene Parameter für Punktlicht -

  • Der 1. Parameter ist der Name des Lichts.

  • Der 2. Parameter ist die Position, an der das Punktlicht platziert wird.

  • Der 3. Parameter ist die Szene, an der das Licht angebracht werden muss.

Die folgenden Eigenschaften werden verwendet, um dem oben erstellten Objekt Farbe hinzuzufügen:

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

Demo

<!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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(1, 20, 1), scene);
            pl.diffuse = new BABYLON.Color3(0, 1, 0);
            pl.specular = new BABYLON.Color3(1, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 150, 6, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

BabylonJS - Das gerichtete Licht

Bei gerichtetem Licht wird das Licht durch die Richtung definiert und in jede Richtung emittiert, je nachdem, wo Sie es platzieren.

var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -1, 0), scene);

Es gibt drei verschiedene Parameter für Punktlicht -

  • Die 1 st param ist der Name des Lichts.

  • Die 2 nd param ist die Position. Im Moment wird es mit negativ -1 in der Y-Achse platziert.

  • Die 3 rd param ist die Szene angebracht werden.

Hier können Sie Farbe mit der Eigenschaft spiegelnd und diffus hinzufügen.

light0.diffuse = new BABYLON.Color3(0, 1, 0);
light0.specular = new BABYLON.Color3(1,0, 0);

Demo

<!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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var pl = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -10, 0), scene);
            pl.diffuse = new BABYLON.Color3(0, 1, 0);
            pl.specular = new BABYLON.Color3(1, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 150, 6, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

BabylonJS - Das Scheinwerferlicht

Punktlicht ist wie Licht, das in Kegelform fällt.

Syntax

Es folgt die Syntax für das Spotlicht -

var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);

Es gibt fünf verschiedene Parameter für Punktlicht -

  • 1 st Param ist der Name des Lichts.
  • 2 nd param ist die Position.
  • 3 rd param ist die Richtung.
  • 4 th param ist der Winkel.
  • 5 th param ist der Exponent.

Diese Werte definieren einen Lichtkegel, der von der Position aus in Richtung der Richtung emittiert. Spiegel und diffus werden verwendet, um die Farbe des Lichts zu steuern.

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);

Demo

<!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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
            light0.diffuse = new BABYLON.Color3(0, 1, 0);
            light0.specular = new BABYLON.Color3(1, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 80,80, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

BabylonJS - Das halbkugelförmige Licht

Ein halbkugelförmiges Licht bedeutet eher, das Umgebungslicht zu erhalten. Die Richtung des Lichts ist zum Himmel gerichtet. Dem Licht werden 3 Farben gegeben; eine für den Himmel, eine für den Boden und die letzte für das Spiegelbild.

Syntax

Es folgt die Syntax für das Hemispheric Light -

var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);

Für Farben

light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(0, 1, 0);
light0.groundColor = new BABYLON.Color3(0, 0, 0);

Demo

<!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( .5, .5, .5);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
            light0.diffuse = new BABYLON.Color3(1, 0, 0);
            light0.specular = new BABYLON.Color3(0, 1, 0);
            light0.groundColor = new BABYLON.Color3(0, 0, 0);
            
            var ground = BABYLON.Mesh.CreateGround("ground", 100,100, 2, scene);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Parametrische Formen beziehen sich auf verschiedene Formen, die mit den mit Biegungen, Verdrehungen usw. gezeichneten Linien erzielt werden können. Es handelt sich um eine 2D-Form, die mit mathematischen Gleichungen wie Parabel, Sinuskurve, Cos-Kurve, Bezier-Kurve usw. erstellt wurde. Mit der Gleichung können wir Finde die Koordinaten (x, y) und zeichne die Linie dafür. In diesem Kapitel werden Formen wie Farbband, Linien, Strichlinien, Röhren und Extrusion angezeigt. Mit den unten beschriebenen parametrischen Formen kann eine Freihandzeichnung von Linien auf der Tafel erreicht werden.

Sr.Nr. Parametrische Form & Beschreibung
1 Band

Das Menüband verwendet eine Reihe von Pfaden als Eingabe und zeichnet Linien entlang dieser Pfade. Es verwendet eine komplexe Logik, um die Koordinaten zu erhalten. Im folgenden Beispiel haben wir die Bezier-Kurvengleichung verwendet, um das Band zu zeichnen. Bezier-Kurven werden hauptsächlich in 3D-Spielen verwendet, um die glatten Kurven zu modellieren. Die Kurve benötigt Kontrollpunkte und die Kurve wird entlang der Kontrollpunkte gezeichnet.

2 Linie

Linie ist ein Grundelement in 3D-Spielen. Um eine Linie zu zeichnen, benötigen Sie zwei Punkte, zwischen denen Sie eine Linie zeichnen können.

3 Tube

Das Rohr hat eine gekrümmte Zylinderform. Es kann verschiedene parametrische Formen basierend auf der Gleichung (mathematische Funktion) geben, die darauf angewendet wird, um die Koordinaten zu erhalten.

4 Extrusion

Die Extrusion hilft bei der Umwandlung einer 2D-Form in eine Volumenform. Angenommen, Sie möchten einen Stern mit 2D erstellen, dann haben Sie x-, y-Koordinaten und z ist 0. Wenn Sie die 2D-Koordinaten-Extrusion verwenden, wird diese in eine 3D-Form konvertiert Der Start von 2D mit Extrusion wird sich als 3D herausstellen. Sie können verschiedene 2D-Formen ausprobieren und diese in 3D konvertieren.

In diesem Kapitel lernen wir, mit dem Mesh Builder verschiedene Formen zu erstellen. In einem unserer vorherigen Kapitel haben wir bereits gelernt, wie man Formen erstellt.

Der Unterschied besteht darin, dass Sie mit Meshbuilder die Flexibilität haben, den Formen Farbe und Bilder hinzuzufügen.

CreateBox mit MeshBuilder

Lassen Sie uns nun sehen, wie Sie mit MeshBuilder eine Box erstellen.

Demo

<!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, 0, 1);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0, 1, 0);
            
            var texture = new BABYLON.Texture("images/cube.png", scene);
            mat.diffuseTexture = texture;

            var hSpriteNb =  3;  // 3 sprites per raw
            var vSpriteNb =  2;  // 2 sprite raws

            var faceUV = new Array(6);
            for (var i = 0; i < 6; i++) {
               faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
            }

            var options = {
               width: 1.5,
               height: 1.5,
               depth: 1.5,
               faceUV: faceUV
            };

            var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
            box.material = mat;

            scene.registerBeforeRender(function() { 
               pl.position = camera.position;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Für das obige Beispiel haben wir ein Sprite-Bild verwendet, wie unten gezeigt. Es hat horizontal 3 Spalten und vertikal 2 Zeilen.

In dieser Demo haben wir ein Bild namens cube.png verwendet. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Bitte beachten Sie, dass cube.png ein Sprite-Bild ist, ein Sprite-Bild eine Sammlung von Bildern. Wir wollten das Bild auf einem Würfel zeigen, also wollten wir alle Seiten des Würfels zusammen haben. Sie können auch ähnliche Sprite-Bilder Ihrer Wahl herunterladen und im Demo-Link verwenden.

Der Builder createBox bietet Ihnen Optionen für die Größen.

Zum Beispiel,

var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);

Demo

var hSpriteNb =  3;  // 3 sprites per raw ie colums horizontally as shown in the image

var vSpriteNb =  2;  // 2 sprite raws as shown in the image above.

var faceUV = new Array(6); // the cube has 6 sides so creating array for same.
for (var i = 0; i < 6; i++) {
   faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}

var options = {
   width: 1.5,
   height: 1.5,
   depth: 1.5,
   faceUV: faceUV
};

Dies wird als Anwenden von Texturen auf den Meshbuilder mithilfe der createBox-Methode bezeichnet. Wir haben das Bild verwendet cube.png Das hat horizontal 3 Spalten und vertikal 2 Reihen. Der Würfel oder die Box hat 6 Seiten.

Zum Anwenden von Texturen verwenden wir den Parameter options.

Var box = BABYLON.MeshBuilder.CreateBox ('box', options, scene);

Wir haben ein Array namens faceUV mit der Größe 6 definiert, das die Seiten des Würfels darstellt. Dieses Array enthält immer Vector4-Elemente. Jeder Vektor4 (x, y, z, w) wird wie folgt definiert:

  • x = Ubottom
  • y = Vbottom
  • z = Utop
  • w = Vtop

Die Vektoren liegen im Bereich [0, 1]. Ubottom und Vbottom sind die 2D-Koordinaten des unteren linken Punkts, an dem die Texturbeschneidung beginnt. Utop, Vtop sind die oberen rechten Punkte, an denen der Texturausschnitt endet.

var hSpriteNb =  3;  // 3 sprites per raw
var vSpriteNb =  2;  // 2 sprite raws

var faceUV = new Array(6);
for (var i = 0; i < 6; i++) {
   faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}

Angenommen, die Standardtextur, dh das angegebene Bild wird auf alle Flächen der Box angewendet. Wenn Sie nur 1 Fläche oder 1 Seite der Box ändern möchten, können Sie die Werte wie unten gezeigt direkt zuweisen -

var hSpriteNb =  3;  // 3 sprites per raw
var vSpriteNb =  2;  // 2 sprite raws

var faceUV = new Array(6);
faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);

Beispiel

<!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, 0, 1);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(1, 1, 1);
            pl.intensity = 0.8;

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8);
            
            var texture = new BABYLON.Texture("images/3d.png", scene);
            mat.diffuseTexture = texture;

            var hSpriteNb =  3;  // 3 sprites per raw
            var vSpriteNb =  2;  // 2 sprite raws

            var faceUV = new Array(6);
            faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);

            var options = {
               width:3,
               height:3,
               depth: 3,
               faceUV:faceUV
            };

            var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
            box.material = mat;

            scene.registerBeforeRender(function() { 
               pl.position = camera.position;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir ein Bild namens 3d.png verwendet. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Bitte beachten Sie, dass 3d.png ein Sprite-Image ist. Ein Sprite-Bild ist eine Sammlung von Bildern. Wir wollten das Bild auf einem Würfel mit allen Seiten des Würfels zusammen zeigen. Sie können auch ähnliche Sprite-Bilder Ihrer Wahl herunterladen und im Demo-Link verwenden.

Textur für Box verwendet - images/3d.png

MeshCylinder

In diesem Abschnitt erfahren Sie, wie Sie MeshCylinder erstellen.

Um MeshCylinder zu erstellen, müssen Sie die Klasse BABYLON.MeshBuilder.CreateCylinder verwenden.

Die Parameter für die Klasse sind wie folgt:

var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
   height: 3,
   diameter: 35,
   tessellation: 52
}, scene);

Der Unterschied zwischen CreateCylinder mit Mesh und Meshbuilder besteht darin, dass Sie Optionen in Meshbuilder verwenden können. Im Moment verwenden wir Höhe, Durchmesser und Tessellation als Optionen, die an den Zylinder übergeben werden sollen. Wir verwenden Standardmaterial mit Drahtgitter als Material für dieses Netz. Überprüfen Sie die Ausgabe im Browser und sehen Sie den Zylinder. Sie können in Ihrem Spiel eine ähnliche Struktur verwenden wie ein Rad, das sich in der Szene dreht.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Babylon.js demo - Mesh Builder</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(0.8, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 6, 1.3, 40, new BABYLON.Vector3(0, -3, 0), scene);
            
            var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

            var mat = new BABYLON.StandardMaterial("mat", scene);
            mat.diffuseColor = new BABYLON.Color3(0.1, .5, 0);
            mat.specularColor = new BABYLON.Color3(0, 0, 0);
            mat.wireframe = true;

            var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
               height: 3,
               diameter: 35,
               tessellation: 52
            }, scene);

            meshcylinder.material = mat;
            meshcylinder.position = new BABYLON.Vector3(0, 0, 0);

            scene.activeCamera.attachControl(canvas);
            return scene;
         };
         
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Eine Reihe von Formen, die mit Mesh Builder erstellt wurden, werden jetzt zusammen in einer Demo verwendet. Die im Demo-Link unten beschriebenen Formen sind in den folgenden Abschnitten aufgeführt.

  • Ground

  • Cone

  • Plane

  • Disc

  • Torus

  • Polyhedron

  • IcoSphere

BabylonJS - Mesh Intersection and Point

Mesh Intersection in Spielen ist wichtig, da Sie wissen, was zu tun ist, wenn sich zwei Objekte in einem Spiel überschneiden. Das gleiche Konzept wird in der folgenden Demo für das Ereignis erläutert, das erfasst werden muss, wenn sich die Netze schneiden.

In der folgenden Demo haben wir die folgenden zwei Konzepte behandelt:

  • Mesh überschneiden
  • Schnittpunkt
<!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, 1, 1);
            
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var matcone = new BABYLON.StandardMaterial("mat1", scene);
            matcone.alpha = 1.0;
            matcone.diffuseColor = new BABYLON.Color3(0, 0, 0);
            matcone.wireframe = true;

            var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {height : 10, diameterTop: 10,diameterBottom:10, tessellation: 5}, scene);
            cone.position= new BABYLON.Vector3(12,1,0);
            cone.material = matcone;	

            var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
            var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
            var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 5, 1.0, scene);
            
            balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
            balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
            balloon3.material = new BABYLON.StandardMaterial("matBallon", scene);

            balloon1.position = new BABYLON.Vector3(4, 2, 0);
            balloon2.position = new BABYLON.Vector3(5, 1, 0);
            balloon3.position = new BABYLON.Vector3(7, 0, 0);

            var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
            var a = 0.01;
            
            scene.registerBeforeRender(function () {
               if (balloon1.intersectsMesh(cone, false)) {
                  balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
               } 
               else {
                  balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
               }

               if (balloon2.intersectsMesh(cone, false)) {
                  balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
               } 
               else {
                  balloon2.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
               }

               if (balloon3.intersectsMesh(cone, false)) {
                  balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
               } 
               else {
                  balloon3.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
               }

               if (balloon3.intersectsPoint(pointToIntersect)) {
                  balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
               }

               a += 0.01;
               balloon1.position.x += Math.cos(a) / 10;
               balloon2.position.x += Math.cos(a) / 10;
               balloon3.position.x += Math.cos(a) / 10;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Der obige Code generiert die folgende Ausgabe:

Erläuterung

Mit dem obigen Code haben wir einen Zylinder mit Drahtgitter als wahr erstellt. Wir haben 3 Kugeln erstellt. Die ursprüngliche Farbe der Kugel ist grün.

In dem scene.registerBeforeRender Funktion werden wir die Farbe der Kugel basierend auf dem Schnittpunkt mit dem Netz ändern, das hier der Zylinder ist.

Betrachten Sie den folgenden Code in registerBeforeRender - -

if (balloon1.intersectsMesh(cone, false)) {
   balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
   balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}

intersectsMesh gibt true oder false aus, wenn es sich mit dem Netz überschneidet, das in dem an ihn übergebenen Parameter angegeben ist.

Zum Beispiel,

balloon1.intersectsMesh(cone, false); //cone refers to the cylinder mesh here.

Die Farbe der Kugel wird in Rot geändert, sie schneidet den Zylinder. sonst ist es grün.

Der folgende Code wird für den Schnittpunkt verwendet -

var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
if (balloon3.intersectsPoint(pointToIntersect)) {
   balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
}

Hier, pointtoIntersectVariable ist der Positionsvektor, der 10 auf der x-Achse ist. Wenn die Kugel den Schnittpunkt kreuzt, wird die Farbe der Kugel in Schwarz geändert.

BabylonJS - MeshPicking Kollision

Wenn Sie eine Kollision auswählen, erhalten Sie tatsächlich die Koordinaten und können Ihr Netz an dieser Stelle positionieren. Das Objekt wird mit der Maus ausgewählt und Sie können einfach dort platzieren, wo Sie mit der Maus klicken. Beachten Sie, dass Sie ein Netz (Objekt) an einer Stelle platzieren müssen, an der der Benutzer mit der Maus klickt. Mithilfe der Auswahl der Kollision können Sie die Koordinaten an der Position der angeklickten Stelle ermitteln.

Demo

<!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, 1, 1);

            // setup environment
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10, 20), scene);
            var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);

            var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
            var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
            balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
            balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);

            balloon1.position = new BABYLON.Vector3(0, 0, -0.1);
            balloon2.position = new BABYLON.Vector3(0, 0, -0.1);
            balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
            balloon2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);

            //Wall
            var wall = BABYLON.Mesh.CreatePlane("wall", 30.0, scene);
            wall.material = new BABYLON.StandardMaterial("wallMat", scene);
            wall.material.emissiveColor = new BABYLON.Color3(0.5, 1, 0.5);

            //When pointer down event is raised

            scene.onPointerDown = function (evt, pickResult) {
               // if the click hits the ground object, we change the impact position
               if (pickResult.hit) {
                  var dateValue = new Date();
                  var secondNumber = dateValue.getSeconds();
                  if (secondNumber % 2 == 0) {
                  balloon1.position.x = pickResult.pickedPoint.x;
                  balloon1.position.y = pickResult.pickedPoint.y;
                  } else {
                     balloon2.position.x = pickResult.pickedPoint.x;
                     balloon2.position.y = pickResult.pickedPoint.y;
                  }
               }
            };
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Erläuterung

Im obigen Beispiel haben wir eine Ebene und 2 Kugeln verwendet. Verwenden Sie den folgenden Code, um diese Ausgabe zu generieren:

scene.onPointerDown = function (evt, pickResult) {
   
   // if the click hits the ground object, we change the impact position
   if (pickResult.hit) {
      var dateValue = new Date();
      var secondNumber = dateValue.getSeconds();
      if (secondNumber % 2 == 0) {
      balloon1.position.x = pickResult.pickedPoint.x;
      balloon1.position.y = pickResult.pickedPoint.y;
      } 
      else {
         balloon2.position.x = pickResult.pickedPoint.x;
         balloon2.position.y = pickResult.pickedPoint.y;
      }
   }
};

Das Ereignis scene.onPointerDown gibt Ihnen die koordinierten -x, y und z, die in unserem Beispiel ist pickResult.

Es gibt pickResult.hit als wahr, wenn Sie auf das Grundnetz klicken. Wir betrachten ungerade / gerade Sekunden und ändern die Position der Kugel, um die z- und y-Koordinaten des Ergebnisses wie oben gezeigt auszuwählen. Sobald die Position geändert wurde, wird die Kugel dort platziert, wo Sie klicken und Ihre Maus positionieren. Sie können die obige Demo für das gleiche versuchen.

BabylonJS - Raycasts

Raycasts sind wie Sonnenstrahlen und werden verwendet, um Kollisionen und Schnittpunkte in der Szene zu überprüfen.

Syntax

var ray = new BABYLON.Ray(origin, direction, length);

Parameter

Berücksichtigen Sie die folgenden Parameter für Raycasts:

  • Origin - Ort, an dem der Strahl beginnen soll.

  • Direction - Die Richtung zum Strahl wird wie folgt berechnet: -

var forward = new BABYLON.Vector3(0,0,1);		
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);

Um die Richtung zu erhalten, subtrahieren wir sie vom Ursprung, der Boxposition -

  • Length - Länge des Strahls.

Demo

<!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);

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);

            var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
            box.position.y = 2;
            box.scaling.z = 2;
           
            var matBox = new BABYLON.StandardMaterial("matBox", scene);
            matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
            box.material = matBox;
            box.isPickable = false; 

            var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
            box2.position = new BABYLON.Vector3(-20, 4, 0); 
            
            var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
            matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box2.material = matBox2;

            var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
            box3.position = new BABYLON.Vector3(20, 4, 0); 
            
            var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
            matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box3.material = matBox3;

            var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
            box4.position = new BABYLON.Vector3(0, 0, 20); 
            
            var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
            matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box4.material = matBox4;

            var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
            box5.position = new BABYLON.Vector3(0, 0, -20); 
            
            var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
            matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box5.material = matBox5;

            function mousemovef() {
               var pickResult = scene.pick(scene.pointerX, scene.pointerY);

               if (pickResult.hit) {
                  var diffX = pickResult.pickedPoint.x - box.position.x;
                  var diffY = pickResult.pickedPoint.z - box.position.z;
                  box.rotation.y = Math.atan2(diffX,diffY);			
               }	
            }

            scene.onPointerMove = function () {
               mousemovef();
            };

            function vecToLocal(vector, mesh) {
               var m = mesh.getWorldMatrix();
               var v = BABYLON.Vector3.TransformCoordinates(vector, m);
               return v;		
            }   

            scene.registerBeforeRender(function () {
               var origin = box.position;

               var forward = new BABYLON.Vector3(0,0,1);		
               forward = vecToLocal(forward, box);

               var direction = forward.subtract(origin);
               direction = BABYLON.Vector3.Normalize(direction);

               var length = 100;

               var ray = new BABYLON.Ray(origin, direction, length);
               // ray.show(scene, new BABYLON.Color3(1, 1, 0.1));

               var hit = scene.pickWithRay(ray);

               if (hit.pickedMesh) {
                  hit.pickedMesh.scaling.y  += 0.01;
               }
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Erläuterung

In der Mitte befindet sich eine Hauptbox, die als Raycast fungiert. Sobald es auf eine der Boxen zeigt, wird die Box größer. Dieses Konzept erweist sich beim Spielen als nützlich, um zu wissen, welches andere Objekt in Kontakt kommt, und um die erforderlichen Maßnahmen zu ergreifen.

Hinzufügen box.isPickable = false;so dass der Hauptkasten in der Mitte nicht berücksichtigt wird. Wenn Sie nicht möchten, dass ein Objekt in die Strahlen aufgenommen wird, fügen Sie hinzubox.isPickable = false; dazu.

Der folgende Code fügt die Skalierung der Box hinzu, die vom Strahl ausgewählt wird.

scene.registerBeforeRender(function () {
   var origin = box.position;	
   var forward = new BABYLON.Vector3(0,0,1);		
   forward = vecToLocal(forward, box);

   var direction = forward.subtract(origin);
   direction = BABYLON.Vector3.Normalize(direction);

   var length = 100;

   var ray = new BABYLON.Ray(origin, direction, length);

   var hit = scene.pickWithRay(ray);

   if (hit.pickedMesh) {
      hit.pickedMesh.scaling.y  += 0.01;
   }
});

var ray = new BABYLON.Ray(origin, direction, length); Erstellt einen Strahl und nimmt die Position des Hauptkastens als Ursprung.

Die Richtung zum Strahl wird wie folgt berechnet:

var forward = new BABYLON.Vector3(0,0,1);		
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);

Um die Richtung zu erhalten, subtrahieren wir sie vom Ursprung, der Boxposition. Die FunktionvecToLocal wurde entwickelt, um eine Position aus Sicht des Netzes zu transformieren, indem ein Vektor mit der Netzmatrix multipliziert wird.

Wir erhalten den Trefferpunkt vom Strahl mit var hit = scene.pickWithRay(ray);

Es gibt die Position an, an der der Strahl mit dem Netz zusammenfällt.

Die Skalierung wird auf das Netz angewendet, das durch Ausführen der folgenden Codezeile ausgewählt wird:

if (hit.pickedMesh) {
   hit.pickedMesh.scaling.y  += 0.01;
}

Versuchen Sie das obige Beispiel im Browser, um die Ausgabe zu sehen.

Raycast mit Prädikatfunktion

Lassen Sie uns nun sehen, wie der Raycast mit Prädikatfunktion funktioniert und welche Richtung mit rayhelper angezeigt wird.

Demo

<!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);

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);

            var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
            box.position.y = 2;
            box.scaling.z = 2;
            var matBox = new BABYLON.StandardMaterial("matBox", scene);
            matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
            box.material = matBox;
            box.isPickable = false; 

            var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
            box2.position = new BABYLON.Vector3(-20, 4, 0); 
            var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
            matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box2.material = matBox2;

            var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
            box3.position = new BABYLON.Vector3(20, 4, 0); 
            var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
            matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
            box3.material = matBox3;

            var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
            box4.position = new BABYLON.Vector3(0, 0, 20); 
            var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
            matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box4.material = matBox4;

            var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
            box5.position = new BABYLON.Vector3(0, 0, -20); 
            var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
            matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
            box5.material = matBox5;

            //ray showing the direction
            var ray = new BABYLON.Ray();
            var rayHelper = new BABYLON.RayHelper(ray);

            var localMeshDirection = new BABYLON.Vector3(0, 0, -1);
            var localMeshOrigin = new BABYLON.Vector3(0, 0, -.4);
            var length = 10;

            rayHelper.attachToMesh(box, localMeshDirection, localMeshOrigin, length);
            rayHelper.show(scene);

            function mousemovef() {
               var pickResult = scene.pick(scene.pointerX, scene.pointerY);

               if (pickResult.hit) {
                  var diffX = pickResult.pickedPoint.x - box.position.x;
                  var diffY = pickResult.pickedPoint.z - box.position.z;
                  box.rotation.y = Math.atan2(diffX,diffY);			
               }	
            }

            scene.onPointerMove = function () {
               mousemovef();
            };

            function vecToLocal(vector, mesh) {
               var m = mesh.getWorldMatrix();
               var v = BABYLON.Vector3.TransformCoordinates(vector, m);
               return v;		
            }   

            scene.registerBeforeRender(function () {
               var origin = box.position;
               function predicate(mesh) {
                  if (mesh == box2 || mesh == box || mesh == box5) {
                     return false;
                  }
                  return true;
               }
               
               var forward = new BABYLON.Vector3(0,0,1);		
               forward = vecToLocal(forward, box);

               var direction = forward.subtract(origin);
               direction = BABYLON.Vector3.Normalize(direction);

               var length = 100;

               var ray = new BABYLON.Ray(origin, direction, length);
               // ray.show(scene, new BABYLON.Color3(1, 1, 0.1));

               var hit = scene.pickWithRay(ray, predicate);
               if (hit.pickedMesh) {
                  hit.pickedMesh.scaling.y  += 0.01;
               }
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Erläuterung

Raycast mit Prädikatfunktion hilft bei der Auswahl des gewünschten Netzes. Wenn wir nicht möchten, dass ein Netz ausgewählt wird, können wir dasselbe ignorieren.

function predicate(mesh) {
   if (mesh == box2 || mesh == box || mesh == box5) {
      return false;
   }
   return true;
}

Die obige Funktion gibt das Netz an, das vom Strahl ausgewählt wird. Wenn das ausgewählte Netz Box2, Box oder Box5 ist, wird false zurückgegeben. sonst wahr.

Sie können das obige Beispiel für das gleiche versuchen.

BabylonJS - Mesh Shadows

Schatten werden basierend auf der Art und Weise gerendert, wie Licht auf das erstellte Netz fällt. Sie spielen eine wichtige Rolle, um die Ausgabe in der 3D-Welt realistisch erscheinen zu lassen.

Lassen Sie uns nun lernen, wie man mit Babylonjs Schatten erzeugt.

Syntax

var shadowGenerator00 = new BABYLON.ShadowGenerator(shadowsize, light);

Parameter

Berücksichtigen Sie die folgenden Parameter in Bezug auf Netzschatten:

  • Shadowsize - Größe des Schattens.

  • Light - In der Szene verwendetes Licht.

Demo

<!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, 1, 1);	
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
            // light1
            var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
            light.position = new BABYLON.Vector3(20, 40, 20);

            var ground01 = BABYLON.Mesh.CreateGround("Spotlight Hard Shadows", 24, 60, 1, scene, false);
            var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
            groundMaterial.diffuseTexture = new BABYLON.Texture("images/gr1.jpg", scene);
            groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            groundMaterial.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);

            ground01.material = groundMaterial;
            ground01.receiveShadows = true;
            ground01.position.x = -5;

            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position.x = -5;
            box.position.y = 5;
            var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);
            shadowGenerator00.getShadowMap().renderList.push(box);
            //shadowGenerator00.usePoissonSampling = true;
            //shadowGenerator00.useExponentialShadowMap = true;
            shadowGenerator00.useBlurExponentialShadowMap = true;
            shadowGenerator00.bias = 0.01;
            scene.registerBeforeRender(function() {
               box.rotation.x += 0.01;
               box.rotation.x += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Erläuterung

Um Schatten zu erstellen, müssen Sie den Schattengenerator erstellen. Betrachten Sie ein Beispiel, das unten gezeigt wird.

var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);

Um das Netz zu definieren, für das der Schatten benötigt wird, müssen Sie dasselbe zum obigen Generator hinzufügen.

shadowGenerator00.getShadowMap().renderList.push(box);

Jetzt haben wir einen Boden und eine Box darüber erstellt. Wir wollen, dass der Schatten der Kiste auf den Boden fällt. Dazu müssen wir sicherstellen, dass der Boden markiert ist, um Schatten zu erhalten. Dies geschieht wie folgt:

ground01.receiveShadows = true;

Für Schatten stehen folgende Filter zur Verfügung:

shadowGenerator.usePoissonSampling = true; - Called Poisson sampling 
shadowGenerator.useExponentialShadowMap = true; - Exponential Shadow Map
shadowGenerator.useBlurExponentialShadowMap= true;  - Blur Exponential Shadow Map

In unserer Demo haben wir shadowGenerator00.useBlurExponentialShadowMap = true verwendet. Sie können die anderen ausprobieren und sehen, wie die Ausgabe aussieht.

Hier haben wir ein Bild namens gr1.jpg verwendet. Die Bilder werden lokal im Ordner images / gespeichert. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

BabylonJS - Fortgeschrittene Texturen auf Maschen

In diesem Abschnitt lernen wir die erweiterten Texturen auf Netzen kennen. Die verschiedenen Texturen sind unten gezeigt -

  • Würfel-Textur

  • Spiegel- und Stoßstruktur

  • Videotextur

Wenden wir eine komplexe Textur auf das Netz an - Spiegel, Beule, Video und Brechung.

Sr.Nr. Mesh & Beschreibung
1 MeshHightlight-Ebene

Die Ebene "Hervorheben" wird verwendet, um das Netz in der Szene hervorzuheben. Sie können ihm Farbe geben und die Farbe wird auf die Ränder des Netzes angewendet. Für den Fall, dass Sie in einem Spiel ein Highlight erstellen möchten, kann die Mesh-Highlight-Ebene für dasselbe verwendet werden.

2 Verwandle ein Netz

Durch das Morphing wird die Form eines Objekts durch einen Übergang in ein anderes geändert. Wir haben den aktualisierbaren Parameter für die Formen gesehen; Andernfalls wird der Parameter auf false gesetzt. Für das Morphing wird es auf true gesetzt und das Netz wird aktualisiert, um die Form zu ändern.

3 Aktionen zu Mesh

Aktionen werden verwendet, um dem Netz eine Interaktion hinzuzufügen. Ereignisse werden aktiviert, wenn Sie auf das Netz klicken oder wenn sich das Netz schneidet oder kollidiert.

4 Mesh AssetsManager

Mit der Assestsmanager-Klasse können Sie Netze, Bilder und Binärdateien in die Szene laden.

5 Mesh importieren

Mit Import Mesh werden wir lernen.

6 Mesh Morph Ziele

Wir haben bereits Morhphing von Linien, Bändern, Polygonen usw. gesehen. Jetzt werden wir in dieser Demo Morphing von Kugel und Box sehen. Mit Morph-Zielen wird die Form der Kugel geändert, was in der folgenden Demo zu sehen ist.

7 Mesh-Instanzen

Wenn Sie identische Netze in Ihrer Szene zeichnen möchten, verwenden Sie die Instanzen.

8 Mesh LOD & Instanzen

LOD steht für Distanzlinie. Mit dieser Funktion können Sie Netze basierend auf der Entfernung des Betrachters angeben. Mit zunehmender Entfernung vom Betrachter zum Objekt wird der Detaillierungsgrad des Netzes mithilfe von LOD deutlich angezeigt.

9 Mesh VolumemetricLightScatteringPost-Prozess

Dieser Vorgang streut das Licht wie in der unten angegebenen Ausgabe gezeigt. Testen Sie dasselbe im Browser und Sie werden sehen, wie das Licht durch das Netz streut.

10 Mesh EdgesRenderer

EdgesRendering wird verwendet, um Egdes um das Netz zu zeichnen, wie in der obigen Ausgabe gezeigt.

11 Mesh BlendModes

Sie können einen Mischmodus erstellen, indem Sie die Alphamode der Materialien ändern.

12 Mesh SolidParticles

Das SolidParticle-System wird in einem Netz aktualisiert. Alle Eigenschaften, die wir auf einem Netz gesehen haben, können auf dem festen Teilkörper verwendet werden.

13 Mesh FacetData

Facettendaten beanspruchen viel Speicher und diese Funktion ist standardmäßig nicht aktiviert. Um es zu aktivieren, müssen wir nach Bedarf ein Netz erstellen und die Facettendaten aktualisieren.

Führen Sie die unten angegebenen Demo-Links in Ihrem Browser aus. In den unten angegebenen Demos haben wir die x-, y- und z-Achse gezeichnet. Auf der x-, y- und z-Achse sind Zahlen in positiver und negativer Richtung aufgetragen. Führen Sie dasselbe im Browser aus, ändern Sie die Werte, falls erforderlich, und zeichnen Sie Ihre Formen, Netze, positionieren Sie sie und sehen Sie, wie sie in der x-, y- und z-Achse gerendert werden. Mit den auf der x-, y- und z-Achse angegebenen Zahlen Es ist hilfreich zu sehen, wie das Netz positioniert wird.

Demo

<!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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(5, 10, -10));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            var spot = new BABYLON.SpotLight(
               "spot", 
               new BABYLON.Vector3(25, 15, -10), 
               new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            //mat.wireframe = true;

            // show axis
            var showAxis = function(size) {
               var makeTextPlane = function(text, color, size) {
                  var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
                  dynamicTexture.hasAlpha = true;
                  dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
                  
                  var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
                  plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
                  plane.material.backFaceCulling = false;
                  
                  plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
                  plane.material.diffuseTexture = dynamicTexture;
                  return plane;
               };

               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
               ], scene);
               
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);

               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);

               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);
            };
            showAxis(10);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Lassen Sie uns die Koordinaten entlang der x-, y- und z-Achse definieren.

Demo

<!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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(5, 10, -10));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            var spot = new BABYLON.SpotLight(
               "spot", new BABYLON.Vector3(25, 15, -10), 
               new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            
            //mat.wireframe = true;
            var makeTextPlane = function(text, color, size) {
               var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
               dynamicTexture.hasAlpha = true;
               dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
               
               var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
               plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
               plane.material.backFaceCulling = false;
               plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
               plane.material.diffuseTexture = dynamicTexture;
               return plane;
            };
            
            // show axis
            var showAxis = function(size) {
               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
               ], scene);
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);
               var xcor = [];
               for (i =- 10; i <= 10; i++) {
                  xcor[i] = makeTextPlane(i, "red", size / 10);
                  xcor[i].position = new BABYLON.Vector3(i, 0, 0);
               }

               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);

               var ycor = [];
               for (y=-10;y<=10;y++) {
                  xcor[y] = makeTextPlane(y, "green", size / 10);
                  xcor[y].position = new BABYLON.Vector3(0, y, 0);
               }		

               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);

               var zcor = [];
               for (z =- 10; z <= 10; z++) {
                  xcor[z] = makeTextPlane(z, "green", size / 10);
                  xcor[z].position = new BABYLON.Vector3(0, 0, z);
               }
            };	

            //Lets draw a mesh along the axis.

            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/bird.png", 1, 200, scene);
            var player = new BABYLON.Sprite("player", spriteManagerPlayer);
            player.position.x = 2;
            player.position.y = 2;	
            player.position.z = 0;	

            var zChardot = makeTextPlane(".", "red", 1);		
            zChardot.position = new BABYLON.Vector3(1.8, 1.8,0);

            var box = BABYLON.Mesh.CreateBox("box", '2', scene);
            box.position = new BABYLON.Vector3(-5,3,0); // center point of box x-axis is -5 and y axis is 3.

            var box = BABYLON.Mesh.CreateBox("box", '2', scene);
            box.position = new BABYLON.Vector3(0,3,-3); // center point of box x-axis is -5 and y axis is 3.

            var redSphere = BABYLON.Mesh.CreateSphere("red", 32, 1, scene); //no position for sphere so by default it takes 0,0,0
            showAxis(10);
            returnscene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir image bird.png verwendet. Die Bilder werden lokal im Ordner images / gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Images/bird.png

Demo

<!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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(5, 10, -10));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            
            var spot = new BABYLON.SpotLight(
               "spot", 
               new BABYLON.Vector3(25, 15, -10), 
               new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            
            //mat.wireframe = true;
            var makeTextPlane = function(text, color, size) {
               var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
               dynamicTexture.hasAlpha = true;
               dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
               var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
               plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
               plane.material.backFaceCulling = false;
               plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
               plane.material.diffuseTexture = dynamicTexture;
               return plane;
            };
            
            // show axis
            var showAxis = function(size) {	
               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)], scene);
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);
               var xcor = [];
               for (i =- 10; i <= 10; i++) {
                  xcor[i] = makeTextPlane(i, "red", size / 10);
                  xcor[i].position = new BABYLON.Vector3(i, 0, 0);
               }

               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);

               var ycor = [];
               for (y =- 10; y <= 10; y++) {
                  xcor[y] = makeTextPlane(y, "green", size / 10);
                  xcor[y].position = new BABYLON.Vector3(0, y, 0);
               }

               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);

               var zcor = [];
               for (z =- 10; z <= 10; z++) {
                  xcor[z] = makeTextPlane(z, "green", size / 10);
                  xcor[z].position = new BABYLON.Vector3(0, 0, z);
               }
            };

            var kite = BABYLON.Mesh.CreateLines("kite", [
               new BABYLON.Vector3(-4,0,0),
               new BABYLON.Vector3(0,4,0), 
               new BABYLON.Vector3(4,0,0), 
               new BABYLON.Vector3(0,-4,0),
               new BABYLON.Vector3(-4,0,0)
            ], scene);
            kite.color = new BABYLON.Color3(1, 1, 1);

            var path = [];
            path.push(new BABYLON.Vector3(-4, 0, 0));
            path.push(new BABYLON.Vector3(0, 0, 0));
            path.push(new BABYLON.Vector3(4, 0, 0));

            var lines1 = BABYLON.Mesh.CreateLines("lines",path, scene, true);
            lines1.color = new BABYLON.Color3(1, 1, 1);
            showAxis(10);	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Vektor drehen

Lassen Sie uns nun sehen, wie die Vektordrehung funktioniert.

Demo

<!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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            var spot = new BABYLON.SpotLight(
               "spot", 
               new BABYLON.Vector3(25, 15, -10), 
               new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            
            //mat.wireframe = true;
            var makeTextPlane = function(text, color, size) {
               var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
               dynamicTexture.hasAlpha = true;
               dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
               var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
               plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
               plane.material.backFaceCulling = false;
               plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
               plane.material.diffuseTexture = dynamicTexture;
               return plane;
            };
            // show axis
            var showAxis = function(size) {
               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
               ], scene);
               
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);
               var xcor = [];
               for (i =- 10; i <= 10; i++) {
                  xcor[i] = makeTextPlane(i, "red", size / 10);
                  xcor[i].position = new BABYLON.Vector3(i, 0, 0);
               }

               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);

               var ycor = [];
               for (y =- 10; y <= 10; y++) {
                  xcor[y] = makeTextPlane(y, "green", size / 10);
                  xcor[y].position = new BABYLON.Vector3(0, y, 0);
               }

               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);

               var zcor = [];
               for (z =- 10; z <= 10; z++) {
                  xcor[z] = makeTextPlane(z, "green", size / 10);
                  xcor[z].position = new BABYLON.Vector3(0, 0, z);
               }
            };

            var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere",32, 1, scene);
            yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
            var yellowMaterial = new BABYLON.StandardMaterial("yellowMaterial", scene);
            yellowMaterial.diffuseColor = BABYLON.Color3.Yellow();
            yellowSphere.material = yellowMaterial;

            var wheel1 = BABYLON.MeshBuilder.CreateTorus('t1', {diameter: 2.0}, scene);
            wheel1.position.x = -2.0
            wheel1.position.z = -2.0;

            showAxis(10);	
            var k = 0.0;
            var y = 0.0;
            var x = 0.0;
            scene.registerBeforeRender(function () {
               wheel1.rotation.copyFromFloats(0.0, 0.0, Math.PI / 2);
               wheel1.addRotation(0.0, y, 0.0); 
               wheel1.addRotation(x, 0.0, 0.0);
               yellowSphere.rotation.y += 0.01;
               y += 0.05; 
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Abziehbilder sind wie Aufkleber, die auf ein Objekt geklebt werden. Das Zeichnen der Aufkleber erfolgt mit Hilfe eines 2D-Bildes, das auf dem Netz gezeichnet wird (z. B. Objekt im Spiel). Wenn Sie in Spielen eine Armee haben, die Kugeln abfeuert, muss der Kugelabdruck auf dem Objekt sichtbar sein. In Babylonjs werden Abziehbilder verwendet, bei denen Sie beim Klicken auf ein Objekt ein 2D-Bild an der Stelle zeichnen, an der Sie darauf geklickt haben.

Abziehbilder werden verwendet, um Details zum erstellten Netz hinzuzufügen - Details wie Aufzählungszeichen, Löcher usw. In dem unten angegebenen Demo-Link verwenden wir ein Bild und fügen dasselbe dem importierten Netz hinzu.

Um einen Aufkleber hinzuzufügen, können Sie den folgenden Code verwenden:

var newDecal = BABYLON.Mesh.CreateDecal("decal", mesh, decalPosition, normal, decalSize, angle);

Der folgende Code wird ausgeführt, um Abziehbilder auf dem Netz hinzuzufügen -

BABYLON.SceneLoader.ImportMesh("Shcroendiger'scat", "scenes/", "SSAOcat.babylon", scene, function (newMeshes) {
   var cat = newMeshes[0]; / /this is mesh shown on the screen.

   // Set the target of the camera to the first imported mesh
   camera.target = cat;

   var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
   decalMaterial.diffuseTexture = new BABYLON.Texture("images/impact1.jpg", scene);
   decalMaterial.diffuseTexture.hasAlpha = true;
   decalMaterial.zOffset = -2;

   var onPointerDown = function (evt) {
      if (evt.button !== 0) {
         return;
      }

      // check if we are under a mesh
      var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh === cat; 
      // this will give all the meshes , but it will pick the mesh whch is same as cat and return true if it is found });
      if (pickInfo.hit) { // if true
         var decalSize = new BABYLON.Vector3(5, 5, 5); //size of decal is defined

         var newDecal = BABYLON.Mesh.CreateDecal("decal", cat, pickInfo.pickedPoint, pickInfo.getNormal(true), decalSize); //decal is created 
         newDecal.material = decalMaterial; //decal material is added.
      }
   }
   var canvas = engine.getRenderingCanvas();
   canvas.addEventListener("pointerdown", onPointerDown, false);

   scene.onDispose = function () {
      canvas.removeEventListener("pointerdown", onPointerDown);
   }
});

Demo

<!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);

            //Adding a light
            var light = new BABYLON.HemisphericLight("Hemi", new BABYLON.Vector3(0, 1, 0), scene);

            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", -1.85, 1.2, 200, BABYLON.Vector3.Zero(), scene);

            camera.attachControl(canvas, true);

            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("Shcroendiger'scat", "scenes/", "SSAOcat.babylon", scene, function (newMeshes) {
               var cat = newMeshes[0];

               // Set the target of the camera to the first imported mesh
               camera.target = cat;

               var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
               decalMaterial.diffuseTexture = new BABYLON.Texture("images/impact1.jpg", scene);
               decalMaterial.diffuseTexture.hasAlpha = true;
               decalMaterial.zOffset = -2;

               var onPointerDown = function (evt) {
                  if (evt.button !== 0) {
                     return;
                  }

                  // check if we are under a mesh
                  var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh === cat; });
                  if (pickInfo.hit) {
                     var decalSize = new BABYLON.Vector3(5, 5, 5);

                     var newDecal = BABYLON.Mesh.CreateDecal("decal", cat, pickInfo.pickedPoint, pickInfo.getNormal(true), decalSize);
                     newDecal.material = decalMaterial;
                  }
               }
               var canvas = engine.getRenderingCanvas();
               canvas.addEventListener("pointerdown", onPointerDown, false);

               scene.onDispose = function () {
                  canvas.removeEventListener("pointerdown", onPointerDown);
               }
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Im obigen Demo-Link haben wir SSAOcat.babylon mesh verwendet. Sie können die json-Datei für SSAOcat.babylon hier herunterladen -

SSAOcat.babylon

Speichern Sie die Datei in Szenen / Ordner. Auf diese Weise erhalten Sie die unten gezeigte Ausgabe.

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir Bild verwendet impact1.jpg. Die Bilder werden lokal im Ordner images / gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

images/impact1.jpg

BabylonJS hat eine API eingebaut, um einige der komplexen mathematischen Kurven zu erstellen. Wir haben zuvor Bänder gesehen, Linien, die unter Verwendung einer komplexen Gleichung erstellt wurden, um das Muster zu zeichnen und die Koordinaten für die Pfade zu berechnen, die dem Netz gegeben wurden. Wir haben hier eine integrierte API, um komplexe Berechnungen zu vermeiden, genau wie in der Kurven-API.

Die Kurven, die erklärt werden, sind wie folgt:

  • Quadratische Bezier-Kurve
  • Kubische Bezier-Kurve
  • Hermite Spline
  • Catmull-Rom Spline

Quadratische Bezierkurve

In diesem Abschnitt lernen wir die quadratische Bezierkurve kennen.

Syntax

var bezier = BABYLON.Curve3.CreateQuadraticBezier(origin, control, destination, nb_of_points);

Parameter

Berücksichtigen Sie die folgenden Parameter in Bezug auf die quadratische Bezier-Kurve.

  • Origin - Ursprungspunkt für die Kurve.

  • Control - Kontrollpunkte für die Kurve.

  • Destination - Zielpunkt.

  • Noofpoints - Punkte im Array.

Kubische Bezeir-Kurve

In diesem Abschnitt lernen wir die Cubic Bezier-Kurve kennen.

Syntax

var bezier3 = BABYLON.Curve3.CreateCubicBezier(origin, control1, control2, destination, nb_of_points)

Parameter

Berücksichtigen Sie die folgenden Parameter für die Cubic Bezier-Kurve.

  • Origin - Ursprungspunkt.

  • control1 - Erster Kontrollpunkt in Vektorform.

  • control2 - Zweiter Kontrollpunkt in Vektorform.

  • Destination - Zielpunkt in Vektorform.

  • no_of_points - Anzahl der Punkte in Arrayform.

HermiteSpline-Kurve

In diesem Abschnitt lernen wir die Hermite Spline Curve kennen.

Syntax

var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);

Parameter

Berücksichtigen Sie die folgenden Parameter im Zusammenhang mit der Hermite-Spline-Kurve:

  • p1 - Ursprungspunkt für die Kurve.

  • t1 - Ursprungstangensvektorpunkt.

  • p2 - Zielpunkt.

  • t2 - Zieltangensvektor.

  • NbPoints - Array von Punkten für die endgültige Kurve.

Catmull-Rom Spline-Kurve

In diesem Abschnitt lernen wir die Catmull-Rom-Spline-Kurve kennen.

Syntax

var nbPoints = 20;   // the number of points between each Vector3 control points
var points = [vec1, vec2, ..., vecN];  // an array of Vector3 the curve must pass through : the control points
var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints);

Parameter

Berücksichtigen Sie die folgenden Parameter im Zusammenhang mit der Catmull-Rom-Spline-Kurve:

  • Points - Bei einem Array von Vector3 muss die Kurve durch die Kontrollpunkte verlaufen.

  • NbPoints - Die Anzahl der Punkte zwischen den einzelnen Vector3-Kontrollpunkten.

var path = catmullRom.getPoints(); // getPoints() returns an array of successive Vector3.
var l = catmullRom.length(); // method returns the curve length.

Demo

<!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( .5, .5, .5);

            // camera
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);
            
            // lights
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            light.intensity = 0.8;
            var spot = new BABYLON.SpotLight(
            "spot", 
            new BABYLON.Vector3(25, 15, -10), 
            new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);
            spot.intensity = 0.2; 
            
            // material
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
            mat.backFaceCulling = false;
            
            //mat.wireframe = true;
            var makeTextPlane = function(text, color, size) {
               var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
               dynamicTexture.hasAlpha = true;
               dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
               
               var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
               
               plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
               plane.material.backFaceCulling = false;
               plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
               plane.material.diffuseTexture = dynamicTexture;
               return plane;
            };
            
            // show axis
            var showAxis = function(size) { 
               var axisX = BABYLON.Mesh.CreateLines("axisX", [ 
                  new BABYLON.Vector3(-size * 0.95, 0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0), 
                  new BABYLON.Vector3(-size * 0.95, -0.05 * size, 0),
                  new BABYLON.Vector3(-size, 0, 0),
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), 
                  new BABYLON.Vector3(size, 0, 0), 
                  new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
               ], scene);
               
               axisX.color = new BABYLON.Color3(1, 0, 0);
               var xChar = makeTextPlane("X", "red", size / 10);
               xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);			
               
               var xChar1 = makeTextPlane("-X", "red", size / 10);
               xChar1.position = new BABYLON.Vector3(-0.9 * size, 0.05 * size, 0);
               
               var xcor = [];
               for (i =- 20; i <= 20; i++) {
                  xcor[i] = makeTextPlane(i, "red", size / 10);
                  xcor[i].position = new BABYLON.Vector3(i, 0, 0);
               }
               
               var axisY = BABYLON.Mesh.CreateLines("axisY", [
                  new BABYLON.Vector3( -0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3(0.05 * size, -size * 0.95, 0),
                  new BABYLON.Vector3(0, -size, 0),
                  new BABYLON.Vector3.Zero(),
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), 
                  new BABYLON.Vector3(0, size, 0), 
                  new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)
               ], scene);
               
               axisY.color = new BABYLON.Color3(0, 1, 0);
               var yChar = makeTextPlane("Y", "green", size / 10);
               yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
               var yChar1 = makeTextPlane("-Y", "green", size / 10);
               yChar1.position = new BABYLON.Vector3(0, -0.9 * size, 0.05 * size);
               var ycor = [];
               for (y =- 20; y <= 20; y++) {
                  xcor[y] = makeTextPlane(y, "green", size / 10);
                  xcor[y].position = new BABYLON.Vector3(0, y, 0);
               }


               var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                  new BABYLON.Vector3( 0 , -0.05 * size, -size * 0.95), 
                  new BABYLON.Vector3(0, 0, -size),
                  new BABYLON.Vector3( 0 , 0.05 * size, -size * 0.95),
                  new BABYLON.Vector3(0, 0, -size), 
                  new BABYLON.Vector3.Zero(), 
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),
                  new BABYLON.Vector3(0, 0, size), 
                  new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)
               ], scene);
               axisZ.color = new BABYLON.Color3(0, 0, 1);
               var zChar = makeTextPlane("Z", "blue", size / 10);
               zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
               var zChar1 = makeTextPlane("-Z", "blue", size / 10);
               zChar1.position = new BABYLON.Vector3(0, 0.05 * size, -0.9 * size);

               var zcor = [];
               for (z =- 20; z <= 20; z++) {
                  xcor[z] = makeTextPlane(z, "green", size / 10);
                  xcor[z].position = new BABYLON.Vector3(0, 0, z);
               }
            };

            var quadraticBezierVectors = BABYLON.Curve3.CreateQuadraticBezier( 
            BABYLON.Vector3.Zero(), 
            new BABYLON.Vector3(10, 5, 5), 
            new BABYLON.Vector3(5, 10, 0), 15);
            var quadraticBezierCurve = BABYLON.Mesh.CreateLines("qbezier", quadraticBezierVectors.getPoints(), scene);
            quadraticBezierCurve.color = new BABYLON.Color3(1, 1, 0.5);

            var cubicBezierVectors = BABYLON.Curve3.CreateCubicBezier( 
            BABYLON.Vector3.Zero(), 
            new BABYLON.Vector3(10, 5, 20), 
            new BABYLON.Vector3(-50, 5, -20), 
            new BABYLON.Vector3( -10, 20, 10), 60);
            var cubicBezierCurve = BABYLON.Mesh.CreateLines("cbezier", cubicBezierVectors.getPoints(), scene);
            cubicBezierCurve.color = new BABYLON.Color3(1, 0, 0);

            var continued = cubicBezierVectors.continue(cubicBezierVectors).continue(quadraticBezierVectors);

            var points = continued.getPoints();
            var nbPoints = 60;
            var l = continued.length() / 2;
            var p1 = points[points.length - 1];
            var t1 = (p1.subtract(points[points.length - 2])).scale(l);
            var p2 = points[0];
            var t2 = (points[1].subtract(p2)).scale(l);

            var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);

            continued = continued.continue(hermite);

            var points = continued.getPoints();
            var continuedCurve = BABYLON.Mesh.CreateLines("continued", points, scene);
            continuedCurve.position = new BABYLON.Vector3(20, -20, 20);
            continuedCurve.color = new BABYLON.Color3(0, 0, 0);

            var nbPoints = 20;                     // the number of points between each Vector3 control points
            var points = [new BABYLON.Vector3(10, 5, 20), 
            new BABYLON.Vector3(-20, 5, -20), 
            new BABYLON.Vector3(-25, 5, -20), 
            new BABYLON.Vector3( -30, 20, 10),];  // an array of Vector3 the curve must pass through : the control points
            var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints);

            var path = catmullRom.getPoints();
            var l = catmullRom.length();

            var finalcatmullCurve = BABYLON.Mesh.CreateLines("continued", path, scene);

            var mySinus = [];
            for (var i = 0; i < 30; i++) {
               mySinus.push( new BABYLON.Vector3(i, Math.sin(i / 10), 0) );
            }

            var mySinusCurve3 = new BABYLON.Curve3(mySinus);
            var myFullCurve = mySinusCurve3.continue(cubicBezierVectors).continue(quadraticBezierVectors);
            var points1 = myFullCurve.getPoints();
            var curve3d = BABYLON.Mesh.CreateLines("continued", points1, scene);
            curve3d.color = new BABYLON.Color3(0.9, 1, 0.2);
            showAxis(20);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Die dynamische Textur von BabylonJS erstellt eine Leinwand und Sie können problemlos Text auf die Textur schreiben. Außerdem können Sie mit Canvas arbeiten und alle mit HTML5 Canvas verfügbaren Funktionen für die Verwendung mit dynamischer Textur verwenden.

Wir werden an einem Beispiel arbeiten, das zeigt, wie Text auf die Textur geschrieben wird, und eine Bezierkurve auf das von uns erstellte Netz zeichnet.

Syntax

Es folgt die Syntax zum Erstellen einer dynamischen Textur:

var myDynamicTexture = new BABYLON.DynamicTexture(name, option, scene);

Parameter

Im Folgenden sind die erforderlichen Parameter zum Erstellen einer dynamischen Textur aufgeführt:

  • name - Name der dynamischen Textur

  • option - hat die Breite und Höhe der dynamischen Textur

  • scene - Szene erstellt

Syntax

Es folgt die Syntax zum Schreiben von Text auf die Textur -

myDynamicTexture.drawText(text, x, y, font, color, canvas color, invertY, update);

Parameter

Im Folgenden sind die erforderlichen Parameter aufgeführt, um Text auf die Textur zu schreiben:

  • text - zu schreibender Text;

  • x - Abstand vom linken Rand;

  • Y - Abstand von der Ober- oder Unterkante, je nach Umkehrung;

  • font - Schriftdefinition in der Form Schriftart, Schriftgröße, Schriftname;

  • invertY - standardmäßig true. In diesem Fall ist y der Abstand von oben. Wenn false, ist y der Abstand von unten und die Buchstaben sind umgekehrt.

  • update - true standardmäßig wird die dynamische Textur sofort aktualisiert.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "https://end3r.github.io/MDN-Games-3D/Babylon.js/js/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);

            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI / 3, 25, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	

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

            //Create dynamic texture		
            var textureGround = new BABYLON.DynamicTexture("dynamic texture", {width:512, height:256}, scene);   
            var textureContext = textureGround.getContext();

            var materialGround = new BABYLON.StandardMaterial("Mat", scene);    				
            materialGround.diffuseTexture = textureGround;
            box.material = materialGround;

            //Add text to dynamic texture
            var font = "bold 60px Arial";
            textureGround.drawText("Box", 200, 150, font, "green", "white", true, true);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die dynamische Textur ermöglicht auch das Arbeiten mit HTML5-Canvas-Methoden und -Eigenschaften für die dynamische Textur wie folgt:

Syntax

var ctx = myDynamicTexture.getContext();

Demo

<!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);

            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI / 3, 25, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;		

            var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);

            //Create dynamic texture
            var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);   
            var textureContext = textureGround.getContext();

            var materialGround = new BABYLON.StandardMaterial("Mat", scene);    				
            materialGround.diffuseTexture = textureGround;
            ground.material = materialGround;

            //Draw on canvas
            textureContext.beginPath();
            textureContext.moveTo(75,40);
            textureContext.bezierCurveTo(75,37,70,25,50,25);
            textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
            textureContext.bezierCurveTo(20,80,40,102,75,120);
            textureContext.bezierCurveTo(110,102,130,80,130,62.5);
            textureContext.bezierCurveTo(130,62.5,130,25,100,25);
            textureContext.bezierCurveTo(85,25,75,37,75,40);
            textureContext.fillStyle = "red";
            textureContext.fill();
            textureGround.update();
            
            return scene;
         };
         var scene = createScene();
            engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Erläuterung

Wir haben ein Grundnetz erstellt und eine dynamische Textur hinzugefügt.

//ground mesh
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);

//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);   

//adding dynamic texture to ground using standard material
var materialGround = new BABYLON.StandardMaterial("Mat", scene);    			
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;

Um mit Canvas auf dynamischer Textur zu arbeiten, müssen wir zuerst die Canvas-Methode aufrufen -

var textureContext = textureGround.getContext()

Zur Leinwand fügen wir die bezierCurve wie folgt hinzu:

textureContext.beginPath();
textureContext.moveTo(75,40);

textureContext.bezierCurveTo(75,37,70,25,50,25);
textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
textureContext.bezierCurveTo(20,80,40,102,75,120);
textureContext.bezierCurveTo(110,102,130,80,130,62.5);
textureContext.bezierCurveTo(130,62.5,130,25,100,25);
textureContext.bezierCurveTo(85,25,75,37,75,40);

textureContext.fillStyle = "red";
textureContext.fill();
textureGround.update();

Das Parallaxen-Mapping wird auch als Offset-Mapping bezeichnet. Es wird eine Höhenkarte verwendet, die als Versatz auf die Texturen des Materials angewendet wird, um den Effekt des Reliefs auf der Oberfläche der Geometrie hervorzuheben. In der 3Dworld sehen Steinmauern mit einer darauf aufgetragenen Tiefe offensichtlicher aus und sehen für den Endbenutzer realistisch aus. Bei steileren Blickwinkeln werden die Texturkoordinaten stärker verschoben, wodurch die Illusion von Tiefe aufgrund von Parallaxeneffekten entsteht, wenn sich die Ansicht ändert.

Parallex-Mapping wird mit Standardmaterial verwendet. Dies haben wir im Kapitel Standardmaterial erfahren.

Es gibt 3 Eigenschaften, die bei der Parallex-Zuordnung vorhanden sind.

  • material.useParallax = true;- Dies aktiviert die Parallex-Zuordnung. Um diese Eigenschaft zu verwenden, müssen Sie dem Material zuerst eine Höckertextur zuweisen.

  • material.useParallaxOcclusion = true;- Um diese Eigenschaft zu verwenden, müssen Sie useParallax auf true setzen. Es aktiviert Parallax Occlusion.

  • material.parallaxScaleBias = 0.1;- Wendet einen Skalierungsfaktor für die Tiefe an, die auf das Netz abgestimmt werden soll. Ein Wert zwischen 0,05 und 0,1 ist für Parallaxe in Ordnung. Für die Okklusion können Sie 0,2 erreichen.

Demo

<!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() {
            // This creates a basic Babylon Scene object (non-mesh)
            var scene = new BABYLON.Scene(engine);

            // This creates and positions a free camera (non-mesh)
            var camera = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI / 2, 100, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, false);

            // This targets the camera to scene origin
            camera.setTarget(BABYLON.Vector3.Zero());

            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;

            var mesh = BABYLON.Mesh.CreateBox("box01", 25, scene);
            mesh.position = new BABYLON.Vector3(0, 0, 0);

            var brickWallDiffURL = "images/a1.png";
            var brickWallNHURL = "images/a2.png";
            var stoneDiffURL = "images/pebble.jpg";
            var stoneNHURL = "images/a3.png";

            var stoneDiffuseTexture = new BABYLON.Texture(stoneDiffURL, scene);
            
            var stoneNormalsHeightTexture = new BABYLON.Texture(stoneNHURL, scene);
            
            var wallDiffuseTexture = new BABYLON.Texture(brickWallDiffURL, scene);
            
            var wallNormalsHeightTexture = new BABYLON.Texture(brickWallNHURL, scene);
            
            var normalsHeightTexture = stoneNormalsHeightTexture;

            var material = new BABYLON.StandardMaterial("mtl01", scene);
            material.diffuseTexture = stoneDiffuseTexture;
            material.bumpTexture = stoneNormalsHeightTexture;
            
            material.useParallax = true;
            material.useParallaxOcclusion = true;
            material.parallaxScaleBias = 0.1;
            material.specularPower = 1000.0;
            material.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
            mesh.material = material;	
            return scene;		
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir Bilder verwendet a1.png, a2.png, pebble.jpg und a3.png. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Bilder / a1.png

Bilder / a2.png

Images / pebble.jpg

images / a3.png

Wenn Licht gestreut wird und auf das Bild fällt, sehen Sie ein anderes Bild in Bezug auf das Aussehen und die Farbe ändert sich ebenfalls. Wenn Sie ein Spiel entwickeln, um ein realistisches Auftreten des Lichteffekts zu zeigen, wird Lens Flare verwendet. Betrachten Sie Sonnenstrahlen, die auf den Spiegel fallen, und der Effekt, den man davon sieht, wird meistens als Lens Flare bezeichnet.

Syntax

Im Folgenden finden Sie die Syntax zum Erstellen von Linseneffekten:

var lensFlareSystem = new BABYLON.LensFlareSystem("lensFlareSystem", light0, scene);

Parameter

Berücksichtigen Sie die folgenden Parameter, um einen Linseneffekt zu erzeugen:

  • Name - Name des Linsenfackelsystems.

  • Light - Dies kann eine Lichtquelle oder eine Kamera sein.

  • Scene - Szene, zu der der Linseneffekt hinzugefügt wird.

Führen Sie den folgenden Befehl aus, um der Szene Fackeln hinzuzufügen:

var flare1 = new BABYLON.LensFlare(0.5, 0.15, new BABYLON.Color3(1, 1, 1), "images/sun1.png", lensFlareSystem);
  • Size - Gleitender Wert zwischen 0 und 1.

  • Position - Die Quelle (der Emitter) der Linseneffekte (es kann sich um eine Kamera, ein Licht oder ein Netz handeln).

  • Lensflaresystem - Objekt, das mit der Lensflaresystem-Klasse erstellt wurde.

Demo

<!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 = BABYLON.Color3.Gray();
            var camera = new BABYLON.ArcRotateCamera(
               "Camera", -Math.PI / 2, 1.5, 15, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, -1, 0), scene);
            light1.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2);
            light1.intensity = 0.5;
            
            var bigdiamond = BABYLON.Mesh.CreateSphere("sphere", 32,6, scene);
            bigdiamond.visibility = 0.6;
            var dmat = new BABYLON.StandardMaterial("dmat", scene);
            dmat.diffuseColor = BABYLON.Color3.Blue();
            
            var texture = new BABYLON.Texture("images/earth.jpg", scene);
            dmat.diffuseTexture = texture;		
            dmat.specularColor = BABYLON.Color3.White();
            bigdiamond.material = dmat;

            var lensflare1 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare1 = new BABYLON.LensFlare(
               Math.random(), 0.15, new BABYLON.Color3(1, 1, 1), "images/sun1.png", lensflare1);

            var lensflare2 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare2 = new BABYLON.LensFlare(
               Math.random()/2, 0.1, new BABYLON.Color3(1, 0, 0), "images/sun1.png", lensflare2);

            var lensflare3 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare3 = new BABYLON.LensFlare(
               Math.random()/8, 0.1, new BABYLON.Color3(1, 0, 1), "images/sun1.png", lensflare3);

            var lensflare4 = new BABYLON.LensFlareSystem("lensFlareSystem", camera, scene);
            var flare4 = new BABYLON.LensFlare(
               Math.random()/12, 0.1, new BABYLON.Color3(0, 1, 0), "images/sun1.png", lensflare4);

            scene.registerBeforeRender(function() {
               scene.getCameraByID("Camera").alpha += 0.01;
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

earth.jpg

images / sun1.png

Um den Bildschirm aufzunehmen, auf dem Sie gerade arbeiten, ist es nicht möglich, mit dem Druckbildschirm-Tastendruck einen Screenshot mit hoher Auflösung aufzunehmen. BabylonJS bietet eine API zum Erstellen von Screenshots, die dabei hilft. Es speichert die Datei als PNG-Format und die Qualität des Bildes wird nicht beeinträchtigt.

Syntax

Um einen Screenshot des Bildschirms zu machen, müssen wir Motor, Kamera und die unten gezeigte Größe angeben.

BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 }, function (data) {
   var img = document.createElement("img");
   img.src = data;
   document.body.appendChild(img);	
});

Eine Schaltfläche, die die Screenshot-API aufruft, wenn ein Benutzer darauf klickt, wird eingefügt.

Änderungen werden an der Engine vorgenommen, die an die Screenshot-API übergeben wird.

var engine = new BABYLON.Engine(canvas, true, { 
   preserveDrawingBuffer: true, stencil: true 
});

Es erfordert Optionen wie preserveDrawingBuffer und stencil auf true setzen.

Die Schaltfläche wird wie folgt hinzugefügt:

ssButton = document.createElement("input");
document.body.appendChild (ssButton);

Klickereignis wird der Schaltfläche oben und dem hinzugefügt createscreenshotwird genannt. Der Screenshot wird am Ende des Bildschirms aktualisiert. Für die für image src verwendeten Daten wurde die Screenshot-URL erstellt.

Demo

<!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, { preserveDrawingBuffer: true, stencil: true });	
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            
            // Setup environment
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
            
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;
            
            //gmat.diffuseColor = new BABYLON.Color3(1, 0, 0);
            var texture = new BABYLON.Texture("images/mat.jpg", scene);
            gmat.diffuseTexture = texture;

            var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 150, height:15}, scene);
            ground.material = gmat;

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(1, 0, 0);
            
            var texture = new BABYLON.Texture("images/rugby.jpg", scene);
            mat.diffuseTexture = texture;

            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, diameterX: 3}, scene);
            sphere.position= new BABYLON.Vector3(15,1,0);
            sphere.material = mat;

            var faceColors = new Array();
            faceColors[1] = new BABYLON.Color4(0,1,0,1);   // green front

            var matcone = new BABYLON.StandardMaterial("mat1", scene);
            matcone.alpha = 1.0;
            matcone.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
            
            var texture = new BABYLON.Texture("images/cone.jpg", scene);
            matcone.diffuseTexture = texture;

            var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);
            cone.position= new BABYLON.Vector3(12,1,0);
            cone.material = matcone;

            var matplane = new BABYLON.StandardMaterial("matplane", scene);
            matplane.alpha = 1.0;
            matplane.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
            
            var texture = new BABYLON.Texture("images/board.jpg", scene);
            matplane.diffuseTexture = texture;
            var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 5, height : 5}, scene);
            plane.position= new BABYLON.Vector3(9,2.5,0);
            plane.material = matplane;		
            
            var disc = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 3}, scene);
            disc.position= new BABYLON.Vector3(5,1,0);		

            var mattorus = new BABYLON.StandardMaterial("matoct", scene);
            mattorus.alpha = 1.0;
            
            var texture = new BABYLON.Texture("images/ring.jpg", scene);
            mattorus.diffuseTexture = texture;
            
            var torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.5}, scene);		
            torus.position= new BABYLON.Vector3(3,1,0);
            torus.material = mattorus;

            var matoct = new BABYLON.StandardMaterial("matoct", scene);
            matoct.alpha = 1.0;
            
            var texture = new BABYLON.Texture("images/d1.png", scene);
            matoct.diffuseTexture = texture;
            var octahedron = BABYLON.MeshBuilder.CreatePolyhedron("oct", {type: 1, size: 3}, scene);
            
            octahedron.position= new BABYLON.Vector3(-2,5,0);
            octahedron.material = matoct;	

            var matico = new BABYLON.StandardMaterial("matico", scene);
            matico.alpha = 1.0;
            
            var texture = new BABYLON.Texture("images/diamond.jpg", scene);
            matico.diffuseTexture = texture;		
            
            var icosphere = BABYLON.MeshBuilder.CreateIcoSphere("ico", {radius: 5, radiusY: 3, subdivisions: 2}, scene);
            icosphere.position= new BABYLON.Vector3(-13,3,0);		
            icosphere.material = matico;		
            
            //add screenshot button
            var ssButton = document.getElementById("takescreenshot");
            if (ssButton == null) {
               ssButton = document.createElement("input");
               document.body.appendChild(ssButton);
            }
            
            ssButton.id = "takescreenshot";
            ssButton.type = "button";
            ssButton.style.position = "fixed";
            ssButton.style.right = "0px";
            ssButton.style.top = "100px";
            ssButton.value = "create screenshot";
            
            ssButton.onclick = function () {
               BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 },
               function (data) {
                  var img = document.createElement("img");
                  img.src = data;
                  document.body.appendChild(img);
               });
            };			
            return scene;
         }
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });	
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir Bilder verwendet mat.jpg, rugby.jpg, cone.jpg, board.jpg, ring.jpg, d1.png, diamond.jpg. Die Bilder werden lokal im Ordner images / gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Images / mat.jpg

Images / rugby.jpg

Images / cone.jpg

Images / board.jpg

Images / ring.jpg

Images / d1.png

Images / diamant.jpg

Reflexionssonden werden verwendet, um eine spiegelähnliche Szene zu erstellen. Dies hilft dabei, die Reflexion der darin enthaltenen Netze zu erkennen. Um eine spiegelähnliche Szene zu erstellen, müssen Sie die Klasse und die erforderlichen Netze aufrufen, in denen Sie die Reflexion sehen möchten. Später müssen Sie die Netze wie unten gezeigt zur Renderliste hinzufügen. Angenommen, Sie haben eine Skybox mit Wasseroberfläche und müssen die Wolken oder die Baumreflexion oder den im Wasser fliegenden Vogel anzeigen. Sie können dies mit einer Reflexionssonde tun und die erstellten Netze können wie unten gezeigt zur Renderliste hinzugefügt werden.

Syntax

var probe = new BABYLON.ReflectionProbe("main", 512, scene);
probe.renderList.push(yellowSphere);
probe.renderList.push(greenSphere);	
probe.renderList.push(blueSphere);	
probe.renderList.push(mirror);

Demo

<!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);

            var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 10, BABYLON.Vector3.Zero(), scene);

            camera.setPosition(new BABYLON.Vector3(0, 5, -10));
            camera.attachControl(canvas, true);

            camera.upperBetaLimit = Math.PI / 2;
            camera.lowerRadiusLimit = 4;

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            var knot = BABYLON.Mesh.CreateTorusKnot("knot", 1, 0.4, 128, 64, 2, 3, scene);

            var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere", 16, 1.5, scene);
            yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(3, 0, 0));

            var blueSphere = BABYLON.Mesh.CreateSphere("blueSphere", 16, 1.5, scene);
            blueSphere.setPivotMatrix(BABYLON.Matrix.Translation(-1, 3, 0));

            var greenSphere = BABYLON.Mesh.CreateSphere("greenSphere", 16, 1.5, scene);
            greenSphere.setPivotMatrix(BABYLON.Matrix.Translation(0, 0, 3));

            // Mirror
            var mirror = BABYLON.Mesh.CreateBox("Mirror", 1.0, scene);
            mirror.scaling = new BABYLON.Vector3(100.0, 0.01, 100.0);
            mirror.material = new BABYLON.StandardMaterial("mirror", scene);
            mirror.material.diffuseTexture = new BABYLON.Texture("images/square.jpg", scene);
            
            mirror.material.diffuseTexture.uScale = 10;
            mirror.material.diffuseTexture.vScale = 10;
            mirror.material.reflectionTexture = new BABYLON.MirrorTexture("mirror", 1024, scene, true);
            
            mirror.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -2.0);
            mirror.material.reflectionTexture.renderList = [greenSphere, yellowSphere, blueSphere, knot];
            mirror.material.reflectionTexture.level = 0.5;
            mirror.position = new BABYLON.Vector3(0, -2, 0);	

            // Main material	
            var mainMaterial = new BABYLON.StandardMaterial("main", scene);
            knot.material = mainMaterial;

            var probe = new BABYLON.ReflectionProbe("main", 512, scene);
            probe.renderList.push(yellowSphere);
            probe.renderList.push(greenSphere);	
            probe.renderList.push(blueSphere);	
            probe.renderList.push(mirror);	
            
            mainMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);	
            mainMaterial.reflectionTexture = probe.cubeTexture;
            mainMaterial.reflectionFresnel<h3>Parameters</h3> = new BABYLON.Fresnel<h3>Parameters</h3>();
            mainMaterial.reflectionFresnel<h3>Parameters</h3>.bias = 0.02;

            // Fog
            scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR;
            scene.fogColor = scene.clearColor;
            scene.fogStart = 20.0;
            scene.fogEnd = 50.0;

            // Animations
            scene.registerBeforeRender(function () {
               yellowSphere.rotation.y += 0.01;
               greenSphere.rotation.y += 0.01;
               blueSphere.rotation.y += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

In dieser Demo haben wir Bild verwendet square.jpg. Die Bilder werden lokal im Ordner images / gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

images / square.jpg

StandardRenderingPipeline bietet eine Reihe von Nachbearbeitungseffekten, die sich auf die reale Welt beziehen. Es gibt verschiedene Nachbearbeitungseffekte wie Lichteffekt und Beleuchtungseffekt.

Im folgenden Beispiel sehen Sie verschiedene Effekte wie Linseneffekt, Nachbearbeitungseffekt von Lichtern usw.

Es wird eine HDR-Cube-Textur verwendet und die Textur muss .hdr sein. Diese Textur erzeugt einen panaromischen Effekt, der beim Drehen der Kamera sichtbar wird.

var hdrTexture = new BABYLON.HDRCubeTexture("images/GravelPlaza_REF.hdr", scene, 512);

Die Standard-Rendering-Pipeline-Klasse wird aufgerufen, um den Effekt mit der folgenden Codezeile zu erzielen:

// Create rendering pipeline
var pipeline = new BABYLON.StandardRenderingPipeline("standard", scene, 1.0 / devicePixelRatio, null, [camera]);
pipeline.lensTexture = new BABYLON.Texture("images/lensdirt.jpg", scene)

In der unten gezeigten Demo erstellen wir die Cubetexture-Umgebung. Wir werden das gleiche Grundnetz verwenden und die Standard-Rendering-Pipeline auf die gesamte Szene anwenden.

Die Textur wird ihm mit objectTexture zugewiesen, einem Bild, und Sie können dieselbe Textur sehen, wenn Sie die Szene verschieben.

Demo

<!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);
            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 4, Math.PI / 2.5, 200, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);
            camera.minZ = 0.1;

            // Light
            new BABYLON.PointLight("point", new BABYLON.Vector3(0, 40, 0), scene);

            // Environment Texture
            var hdrTexture = new BABYLON.HDRCubeTexture("images/GravelPlaza_REF.hdr", scene, 512);

            // Skybox
            var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
            var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", scene);
            hdrSkyboxMaterial.backFaceCulling = false;
            hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
            hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            hdrSkyboxMaterial.microSurface = 1.0;
            hdrSkyboxMaterial.cameraExposure = 0.6;
            hdrSkyboxMaterial.cameraContrast = 1.6;
            hdrSkyboxMaterial.disableLighting = true;
            hdrSkybox.material = hdrSkyboxMaterial;
            hdrSkybox.infiniteDistance = true;

            // Create mesh
            var woodbox = BABYLON.MeshBuilder.CreateBox("plane", { 
               width: 40, 
               height: 50, 
               depth: 65 
            }, scene);

            var wood = new BABYLON.PBRMaterial("wood", scene);
            wood.reflectionTexture = hdrTexture;
            wood.directIntensity = 1.5;
            wood.environmentIntensity = 0.5;
            wood.specularIntensity = 0.3;
            wood.cameraExposure = 0.9;
            wood.cameraContrast = 1.6;

            wood.reflectivityTexture = new BABYLON.Texture("images/reflectivity.png", scene);
            wood.useMicroSurfaceFromReflectivityMapAlpha = true;

            wood.albedoColor = BABYLON.Color3.White();
            wood.albedoTexture = new BABYLON.Texture("images/albedo.png", scene);
            woodbox.material = wood;

            // Create rendering pipeline
            var pipeline = new BABYLON.StandardRenderingPipeline("standard", scene, 1.0 / devicePixelRatio, null, [camera]);
            pipeline.lensTexture = new BABYLON.Texture("images/lensdirt.jpg", scene);

            // Return scene
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Erstellen Sie einen Bilderordner und speichern Sie die .hdr-Datei darin. Wir haben Bilder / GravelPlaza_REF.hdr von www.hdrlabs.com verwendet .

Sie können Dateien vom Typ .hdr Ihrer Wahl herunterladen und im Demo-Link verwenden.

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir Bilder verwendet images/GravelPlaza_REF.hdr, images/reflectivity.png, images/albedo.png, images/lensdirt.jpg. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können alle Bilder Ihrer Wahl herunterladen und im Demo-Link verwenden. Bitte beachten Sie, dass es schwierig ist, die .hdr-Dateien hier einzufügen, da sie sehr groß sind.

Bilder / Reflektivität.png

Images / albedo.png

Images / objectdirt.png

Shader-Material gibt Ihnen ein Material als Ausgabe. Sie können dieses Material auf jedes Netz anwenden. Grundsätzlich werden die Daten aus Ihrer Szene an die Vertex- und Fragment-Shader übergeben.

Um das Shader-Material zu erhalten, heißt die folgende Klasse:

var myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);

Parameter

Berücksichtigen Sie die folgenden Parameter in Bezug auf das Shader-Material:

  • Name - Eine Zeichenfolge, die den Shader benennt.

  • Scene - Die Szene, in der der Shader verwendet werden soll.

  • Route - Die Route zum Shader-Code auf eine der drei Arten -

object - {
   vertex: "custom", 
   fragment: "custom" 
}, used with 
BABYLON.Effect.ShadersStore["customVertexShader"] and
BABYLON.Effect.ShadersStore["customFragmentShader"]

object - { 
   vertexElement: "vertexShaderCode", 
   fragmentElement: "fragmentShaderCode" 
}, 
used with shader code in <script> tags

string - "./COMMON_NAME",

Die am Ende erwähnte Syntax wird mit externen Dateien COMMON_NAME.vertex.fx und COMMON_NAME.fragment.fx im Ordner index.html verwendet.

  • Options - Objekt mit Attributen und Uniformen Arrays mit ihren Namen als Zeichenfolgen.

Die Shader-Syntax mit Werten sieht wie folgt aus:

var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
   vertex: "custom",
   fragment: "custom",
},
{
   attributes: ["position", "normal", "uv"],
   uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});

Attribute müssen in Array-Form vorliegen. Diese enthalten Position, Normal und UV, die Vektor3-3D-Gleitkomma-Vektoren sind.

  • vec2 - Ein zweidimensionaler Vektor von Gleitkommazahlen.

  • vec3 - Ein dreidimensionaler Vektor von Gleitkommazahlen.

  • mat4 - Eine Matrix mit 4 Spalten und 4 Zeilen Gleitkommazahlen.

  • gl_Position - Es liefert Positionsdaten für Bildschirmkoordinaten.

  • gl_FragColor - Es liefert Farbdaten für die Darstellung einer Facette auf dem Bildschirm.

Die oben genannten Variablen sind in der GLSL-Sprache integriert.

Da Scheitelpunktpositionen so genau wie möglich sein müssen, sollten alle Gleitkommazahlen mit hoher Genauigkeit eingestellt werden. Dies erfolgt zu Beginn des Codes für jeden Shader mit -precision highp float. Der Präzisions-Highp-Float bestimmt, wie viel Präzision für einen Float verwendet wird.

Die folgende Demo basiert auf der ersten Objektmethode.

Demo

<!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">
         //downloaded HDR files from :http://www.hdrlabs.com/sibl/archive.html
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);

            var camera = new BABYLON.ArcRotateCamera(
               "Camera", Math.PI / 4, Math.PI / 4, 4, BABYLON.Vector3.Zero(), scene);

            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

            BABYLON.Effect.ShadersStore["customVertexShader"] = "\r\n" + 
               "precision highp float;\r\n" + 
               "// Attributes\r\n" + 
               "attribute vec3 position;\r\n" + 
               "attribute vec2 uv;\r\n" + 
               "// Uniforms\r\n" + 
               "uniform mat4 worldViewProjection;\r\n" + 

               "// Varying\r\n" + 
               "varying vec2 vUV;\r\n" + 
               "void main(void) {
                  \r\n" + 
                  "gl_Position = worldViewProjection * vec4(position, 1.0);\r\n" + 
                  "vUV = uv;\r\n"+"
               }
               \r\n";
               BABYLON.Effect.ShadersStore["customFragmentShader"] = "\r\n"+
                  "precision highp float;\r\n" + 
                  "varying vec2 vUV;\r\n" + 
                  "uniform sampler2D textureSampler;\r\n" + 
               "void main(void) {
                  \r\n"+
                  "gl_FragColor = texture2D(textureSampler, vUV);\r\n"+"
               }
               \r\n";

            var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
               vertex: "custom",
               fragment: "custom",
            },
            
            {
               attributes: ["position", "normal", "uv"],
               uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
            });

            var mainTexture = new BABYLON.Texture("images/mat.jpg", scene);

            shaderMaterial.setTexture("textureSampler", mainTexture);

            shaderMaterial.backFaceCulling = false;

            var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
            box.material = shaderMaterial;
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir Bild verwendet mat.jpg. Die Bilder werden lokal im Ordner images / gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

Images / mat.jpg

Babylonjs bietet APIs zum Erstellen von Skeletten und Knochen.

Syntax

Lassen Sie uns nun die Syntax für verschiedene Funktionen sehen.

Für das Skelett

BABYLON.Skeleton = function (name, id, scene)

Für Knochen

BABYLON.Bone = function (name, skeleton, parentBone, matrix)

Skeletons and Bones kann mit einem Mixer erstellt und in .babylonjs exportiert werden.

Demo

<!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);

            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            BABYLON.SceneLoader.ImportMesh(
               "him", "scenes/Dude/", "Dude.babylon", scene, function (newMeshes, particleSystems, skeletons) {
               var dude = newMeshes[0];
               console.log(dude);
               dude.rotation.y = Math.PI;
               dude.position = new BABYLON.Vector3(0, 0, -80);
               scene.beginAnimation(skeletons[0], 0, 100, true, 1.0);
            })
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Im obigen Demo-Link haben wir Dude.babylon Mesh verwendet. Sie können die json-Datei für Dude.babylon hier herunterladen -

Dude.babylon

Speichern Sie die Datei in Szenen, um die Ausgabe wie unten gezeigt zu erhalten.

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Erläuterung

Für das Importnetz haben wir babylonjs Dude-Netz verwendet.

Das Netz gibt uns Skelette. Zum Beispiel Skelett = Skelette [0];

Führen Sie den folgenden Befehl aus, um Knochen von den Skeletten zu erhalten:

skeleton.bones; //it gives a array.

In der obigen Demo haben wir 2 Kugeln erstellt und an das Netz weitergegeben. Dazu haben wir folgende Befehle ausgeführt:

sphere.attachToBone(skeleton.bones[30], dude);

Und,

sphere1.attachToBone(skeleton.bones[40], dude);

attachToBone ist eine Funktion, bei der Sie dem Knochen ein beliebiges Netz geben können.

Skeleton.bones[30] und skeleton.bones[40] bezieht sich auf die Hände des Skeletts.

Babylon.js verfügt über ein Plugin-System für die Physik-Engine, mit dessen Hilfe Interaktionen zur Szene hinzugefügt werden können. Es zeigt die Kollision und das Abprallen zwischen zwei Objekten und ähnelt eher einer realen Interaktion. Die Demo zeigt, wie die Bälle miteinander kollidieren und sich bewegen Wir bemerken das gleiche Verhalten bei Spielen wie Billard, bei denen der Spieler den Ball mit dem Schläger schlägt und die Bälle mit den anderen Bällen kollidieren und so weiter. Hier versucht die Physik-Engine, eine realistische Sicht auf Bälle zu geben kollidieren und hüpfen, wenn sie auf die Bodenoberfläche treffen. Die Engine verfügt über Klassen und APIs, die beim Anwenden von Impuls-, Kraft-, Geschwindigkeitsänderungs- und Rückruffunktionen helfen, die bei Bedarf aufgerufen werden müssen, und auch, wenn bestimmte Aktionen ausgeführt werden müssen, wenn die Netze mit anderen Netzen kollidieren.

Es gibt 3 Physik-Plugins, die verwendet werden können -

  • Cannon.js
  • Oimo.js
  • Energy.js

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Ball/Ground Demo</title>
      <script type = "text/javascript" src="https://cdn.babylonjs.com/Oimo.js"></script>
      <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 v3 = BABYLON.Vector3;
         
         var createScene = function () {	
            // This creates a basic Babylon Scene object (non-mesh)
            var scene = new BABYLON.Scene(engine);

            var camera = new BABYLON.ArcRotateCamera("Camera", 0.86, 1.37, 250, BABYLON.Vector3.Zero(), scene);
            
            camera.attachControl(canvas);
            camera.maxZ = 5000;
            camera.lowerRadiusLimit = 120;
            camera.upperRadiusLimit = 430;
            camera.lowerBetaLimit =0.75;
            camera.upperBetaLimit =1.58 ;

            new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

            var randomNumber = function (min, max) {
               if (min == max) {
                  return (min);
               }
               var random = Math.random();
               return ((random * (max - min)) + min);
            };

            var mat = new BABYLON.StandardMaterial("ground", scene);
            var t = new BABYLON.Texture("images/gr1.jpg", scene);
            t.uScale = t.vScale = 10;
            mat.diffuseTexture = t;
            mat.specularColor = BABYLON.Color3.Black();
            
            var g = BABYLON.Mesh.CreateBox("ground", 200, scene);
            
            g.position.y = -20;
            g.position.x = 0
            g.scaling.y = 0.01;
            g.material = mat;	
            
            scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.OimoJSPlugin());
            
            g.physicsImpostor = new BABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, { 
               mass: 0, 
               restitution: 0.9 
            }, scene);
            
            var getPosition = function(y) {
               return new v3(randomNumber(-100, 100), y, randomNumber(-100, 100));
            };
            
            var allspheres = [];
            var y = 50;
            var max = 50;
            
            for (var index = 0; index < max; index++) {
               var redSphere = BABYLON.Mesh.CreateSphere("s" + index, 32, 8, scene);
               redSphere.position = getPosition(y);
               redSphere.physicsImpostor = new BABYLON.PhysicsImpostor(redSphere, BABYLON.PhysicsImpostor.SphereImpostor,{
                  mass: 1, restitution:0.9
               }, scene);
               
               redSphere.physicsImpostor.applyImpulse(new BABYLON.Vector3(1, 2, -1), new BABYLON.Vector3(1, 2, 0));
               
               var redMat = new BABYLON.StandardMaterial("ground", scene);
               redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
               redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
               redMat.emissiveColor = BABYLON.Color3.Red();
               redSphere.material = redMat;
               
               // push all spheres in the allspheres variable
               allspheres.push(redSphere);			
               y += 10; // increment height
            }
            scene.registerBeforeRender(function() {
               allspheres.forEach(function(obj) { 
                  // if the sphers falls down its updated again over here
                  // If object falls
                  if (obj.position.y < -100) {
                     obj.position = getPosition(200);				
                  }
               });
            })
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir Bild verwendet images/gr1.jpg. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.

images / gr1.jpg

Erläuterung

scene.enablePhysics(new BABYLON.Vector3(0,-10,0), new BABYLON.OimoJSPlugin());

Die obige Zeile aktiviert das Physik-Plugin. Sie können das Plugin Ihrer Wahl verwenden. Wir haben OimoJsplugin () verwendet.

g.physicsImpostor = newBABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, { 
   mass: 0, 
   restitution: 0.9 
}, scene);

Für die Interaktion verwendet die Physik-Engine einen Betrüger. Bei Anwendung auf Betrüger kann die Form des Objekts nicht geändert werden. Wenn geändert, muss ein neuer Betrüger erstellt werden.

Für die Kugel setzen wir den Betrüger und fügen ihm einen Impuls für einen Bounce-Effekt hinzu, wie gezeigt -

redSphere.physicsImpostor = new BABYLON.PhysicsImpostor(
   redSphere, BABYLON.PhysicsImpostor.SphereImpostor, { 
      mass: 1, 
      restitution:0.9
   }, scene
);

redSphere.physicsImpostor.applyImpulse(
   new BABYLON.Vector3(1, 2, -1), 
   new BABYLON.Vector3(1, 2, 0)
);

Parameter für physicsImposter

Berücksichtigen Sie die folgenden Parameter für Physik-Effekte:

Objekt

Hier ist das Objekt, auf das Sie die Interaktion anwenden möchten. Zum Beispiel Kugel, Box usw.

Art

Typ kann einer der folgenden sein -

  • BABYLON.PhysicsImpostor.SphereImpostor;
  • BABYLON.PhysicsImpostor.BoxImpostor;
  • BABYLON.PhysicsImpostor.PlaneImpostor;
  • BABYLON.PhysicsImpostor.MeshImpostor;
  • BABYLON.PhysicsImpostor.CylinderImpostor;
  • BABYLON.PhysicsImpostor.ParticleImpostor;
  • BABYLON.PhysicsImpostor.HeightmapImpostor;

Masse

Der einzige obligatorische Parameter ist Masse, dh die Masse des Objekts in kg. Eine 0 als Wert erzeugt einen statischen Betrüger - gut für Fußböden.

Restitution

Dies ist die Kraft, die der Körper bei einer Kollision "zurückgibt". Ein niedriger Wert erzeugt keinen Sprung und ein Wert von 1 ist eine sehr springende Interaktion.

scene.registerBeforeRender(function() {
   allspheres.forEach(function(obj) { 
      // if the sphers falls down its updated again over here
      // If object falls
      if (obj.position.y < -100) {
         obj.position = getPosition(200);
      }					
   });
})

Der obige Code bringt die gefallenen Kugeln auf den Boden zurück. Es aktualisiert ständig den Boden für jede gefallene Kugel. Probieren Sie die obige Demo im Browser aus, um den Physik-Effekt zu sehen.

Ohne Ton und Musik ist ein Spiel unvollständig. Die BabylonJS Sound Engine enthält eine API, mit der Sie dem Spiel Soundeffekte hinzufügen können. Wenn es einen Kampf im Spiel gibt, muss der Schuss abgefeuert werden. Dasselbe kann hier mit der Babylonjs Sound Engine erreicht werden. Sie können den Soundeffekt basierend auf dem Tastatur- / Maussteuerungseffekt für die Spiele erhalten. Die Sound Engine bietet Umgebungsgeräusche, Spezialgeräusche und Richtungsgeräusche. Die Engine unterstützt die Soundformate .mp3 und .wav.

Syntax

var music = new BABYLON.Sound(
   "Music", "sound.wav", scene, null, { 
      loop: true, 
      autoplay: true 
   }
);

Parameter

Berücksichtigen Sie die folgenden Parameter für die Sound Engine:

  • Name - Name des Tons.

  • URL - URL des abzuspielenden Sounds.

  • Scene - Szene, zu der der Ton abgespielt werden muss.

  • Callbackfunction- Die Rückruffunktion, die aufgerufen wird, wenn der Sound wiedergegeben werden kann. Derzeit ist sie null. Wir werden einige Beispiele durchgehen und lernen, wie man es benutzt.

  • Json object - Dieses Objekt enthält grundlegende Details zu den erforderlichen Aktionen.

  • sound.autoplay - Damit wird der Sound automatisch abgespielt, sobald die Datei heruntergeladen wurde.

  • loop:true - Dies bedeutet, dass der Sound kontinuierlich in einer Schleife abgespielt wird.

Erstellen Sie einen Soundordner in Ihrem Projektverzeichnis und laden Sie eine Beispiel-Audiodatei herunter, um die Ausgabe zu testen.

Fügen wir nun der bereits erstellten Szene Sound hinzu.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true);
            
            var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, { 
               loop: true, 
               autoplay: true 
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Lassen Sie uns nun überprüfen, wie die callbackFunktion funktioniert. Wenn Sie nicht möchten, dass der Sound automatisch wiedergegeben wird, oder wenn Sie den Sound nur dann wiedergeben möchten, wenn Sie möchten, können Sie dies mit der Rückruffunktion tun.

Zum Beispiel,

Var music = new BABYLON.Sound ("Music", "music.wav", scene, function callback() {music.play();});

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true)
            
            var music = new BABYLON.Sound(
               "sound", "sounds/scooby.wav", scene, function callback() { setTimeout(function() {music.play();}, 5000)});	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Im Rückruf verwenden wir setTimeout. Das heißt, wir möchten, dass der Sound erst nach einer bestimmten Zeit abgespielt wird. Wir haben 5s als Timer hinzugefügt, damit der Sound abgespielt wird, wenn die Dateien Scooby.wav heruntergeladen und 5s abgeschlossen sind.

Spielen Sie Sounds mit Klicks und Tasten auf der Tastatur ab

Wenn Sie auf eine beliebige Stelle in der Szene klicken, hören Sie einen explosiven Soundeffekt. Wenn Sie eine der Pfeiltasten nach links, rechts, oben oder unten drücken, wird der explosive Soundeffekt abgespielt.

Zum Klicken hängen wir das Ereignis an onmousedownZum Fenster und für Schlüssel verwenden wir das Keydown-Ereignis. Basierend auf dem Keycode wird der Sound abgespielt.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true)
            
            var sound = new BABYLON.Sound("gunshot", "sounds/explosion.wav", scene);

            window.addEventListener("mousedown", function (evt) {	
               if (evt.button === 0) { // onclick
                  sound.play();
               }
            });

            window.addEventListener("keydown", function (evt) { // arrow key left right up down
               if (evt.keyCode === 37 || evt.keyCode === 38 || evt.keyCode === 39 || evt.keyCode === 40) {
                  sound.play();
               }
            });		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

Sie können die Lautstärke des Sounds im json-Objekt steuern, auf das wir am Anfang gestoßen sind.

Zum Beispiel,

Var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, { 
   loop: true, 
   autoplay: true, 
   volume:0.5 
});

Um zu wissen, wann eine Audiodatei fertig ist, gibt es ein Ereignis, das wie folgt verwendet werden kann:

music.onended = function () {	
   console.log("sound ended");
   
   //you can do the required stuff here like play it again or play some other sound etc.
};

Die SetVolume-Eigenschaft ist auch verfügbar, wenn Sie den Sound neben dem Konstruktor steuern möchten.

Zum Beispiel,

music.setVolume(volume);

Wenn Sie mehr als einen Sound in Ihrer Szene abspielen, können Sie einen globalen Sound für alle erstellten Sounds festlegen.

Zum Beispiel,

BABYLON.Engine.audioEngine.setGlobalVolume(0.5);

Erstellen eines räumlichen 3D-Sounds

Wenn Sie den Sound in räumlichen Sound konvertieren möchten (Sound ähnlich dem Space Sound), müssen Sie Ihrem Soundkonstruktor Optionen hinzufügen.

Zum Beispiel,

var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, { 
   loop: false, 
   autoplay: true, 
   spatialSound: true 
});

Im Folgenden sind die verschiedenen Optionen für räumlichen Klang aufgeführt:

  • DistanceModel- Standardmäßig wird eine „lineare“ Gleichung verwendet. Andere Optionen sind "invers" oder "exponentiell".

  • MaxDistance - Es ist auf 100 eingestellt. Dies bedeutet, dass die Lautstärke 0 ist, sobald der Hörer mehr als 100 Einheiten vom Ton entfernt ist. Sie können den Ton nicht mehr hören

  • PanningModel- Es ist auf "HRTF" eingestellt. Die Spezifikation besagt, dass es sich um einen höherwertigen Räumlichkeitsalgorithmus handelt, der eine Faltung mit gemessenen Impulsantworten von menschlichen Subjekten verwendet. Es bezieht sich auf den Stereoausgang.

  • MaxDistance - Es wird nur verwendet, wenn distanceModel linear ist. Es wird nicht mit invers oder exponentiell verwendet.

Demo mit räumlichem Sound

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true);	
            
            var music = new BABYLON.Sound(
               "music", "sounds/explosion.wav", scene, null, {
                  loop: false, autoplay: true, spatialSound: true, distanceModel: "exponential"
               }
            );
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Anbringen eines Klangs an einem Netz

Mit BABYLON.Sound können Sie Ihrem Netz Sound hinzufügen. Wenn sich das Netz bewegt, bewegt sich der Ton mit.AttachtoMesh (mesh) ist die zu verwendende Methode.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</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);
            camera.attachControl(canvas, true);

            var materialforbox = new BABYLON.StandardMaterial("texture1", scene);
            var box = BABYLON.Mesh.CreateBox("box", '2', scene);	
            box.material  = materialforbox;
            materialforbox.ambientColor = new BABYLON.Color3(1, 0, 0.2);

            var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, { 
               loop: false, 
               autoplay: true, 
               spatialSound: true, 
               distanceModel: "exponential"
            });	
            music.attachToMesh(box);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe: