BabylonJS - Bahan

Bahan seperti pakaian untuk benda. Anda dapat menambahkan warna, tekstur dan membungkus jerat Anda dengannya. Anda dapat menggunakan bahan yang sama untuk menutupi banyak mata jaring. Jala bisa menjadi pemandangan yang baru saja kita lihat pada contoh di bab sebelumnya - pesawat yang melewati langit.

Di bab ini, kita akan belajar cara menambahkan warna, tekstur, refleksi untuk mata jaring di bab ini.

Kami akan menambahkan materi ke adegan yang sudah dibuat. Kami akan melanjutkan dengan menambahkan materi ke semua bentuk yang kami buat.

Mari kita perhatikan beberapa contoh untuk melihat cara kerja penambahan materi.

Sintaksis

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

Materi di atas tidak akan mengubah apapun karena ini adalah standar. Kami akan menggunakan properti yang tersedia untuk membuat objek terlihat lebih menarik.

Properti yang tersedia adalah sebagai berikut -

Transparency
Diffuse
Emissive
Ambient
Specular
Pemusnahan Wajah Belakang
WireFrame

Perhatikan bagaimana properti ini yang diterapkan pada material mengubah tampilan dan nuansa mesh.

Properti Material Dasar - FresnelParameters

Fresnel adalah hal baru yang ditambahkan oleh BabylonJS standardmaterial. Ini memungkinkan untuk mengubah warna yang diterapkan pada bentuk. Anda bisa mendapatkan kaca seperti refleksi dengan menggunakan Fresnel sederhana. Fresnel akan membuat Anda memiliki lebih banyak refleksi di tepinya dan tidak semuanya di tengah.

Properti berikut tersedia untuk Fresnel

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>

Keluaran

Baris kode di atas menghasilkan output berikut -

Penjelasan

Kode berikut menerapkan efek Fresnel. Warna kiri dan kanan diterapkan ke tepi mata jaring.

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

Bias dan properti daya mengontrol efek Fresnel di permukaan.

Dalam demo ini, kami telah menggunakan gambar yang disebut rainbow.png. Gambar disimpan dalam gambar / folder secara lokal. Anda dapat mengunduh gambar apa pun pilihan Anda dan menggunakannya di tautan demo.