BabylonJS - Grundelemente
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 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 BABYLON-Objekt 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 diese 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 weiterer 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 | |
| 2 | Kugel | |
| 3 | Flugzeug | |
| 4 | Rabatt | |
| 5 | Zylinder | |
| 6 | Torus | |
| 7 | Knoten | |
| 8 | Liniennetz | |
| 9 | Striche Linien | |
| 10 | Band | |
| 11 | Tube | |
| 12 | Boden | |
| 13 | Boden von HeightMap | |
| 14 | Gefliester Boden | |
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 Textur abdeckt, die für das Material verwendet wird. 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 auf allen sechs Seiten Flächen des Würfels. 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 wie in der obigen Funktion in einer Schleife 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;
};sWir 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
