BabylonJS - Materialien

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 das neue Ding, das 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.