BabylonJS - Vật liệu

Vật liệu giống như quần áo cho các đối tượng. Bạn có thể thêm màu sắc, kết cấu và quấn lưới của mình với nó. Bạn có thể sử dụng cùng một vật liệu để bọc nhiều mắt lưới. Các lưới có thể là cảnh mà chúng ta vừa thấy trong ví dụ ở chương trước - máy bay bay qua bầu trời.

Trong chương này, chúng ta sẽ học cách thêm màu sắc, họa tiết, độ phản chiếu cho các mắt lưới trong chương này.

Chúng tôi sẽ thêm vật liệu vào cảnh đã tạo. Chúng tôi sẽ tiến bộ bằng cách thêm chất liệu vào tất cả các hình dạng chúng tôi đã tạo.

Chúng ta hãy xem xét một vài ví dụ để xem việc bổ sung vật liệu hoạt động như thế nào.

Cú pháp

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

Nguyên liệu trên sẽ không thay đổi bất cứ điều gì vì nó là nguyên liệu mặc định. Chúng tôi sẽ sử dụng các thuộc tính có sẵn để làm cho các đối tượng trông hấp dẫn hơn.

Các thuộc tính có sẵn như sau:

Transparency
Diffuse
Emissive
Ambient
Specular
Mặt sau Culling
WireFrame

Hãy xem các thuộc tính này được áp dụng trên vật liệu thay đổi giao diện của lưới như thế nào.

Thuộc tính vật liệu cơ bản - FresnelParameters

Fresnel là thứ mới được BabylonJS thêm vào standardmaterial. Nó cho phép thay đổi màu được áp dụng trên các hình dạng. Bạn có thể có được thủy tinh giống như phản chiếu bằng cách sử dụng Fresnel đơn giản. Fresnel sẽ cho phép bạn phản chiếu nhiều hơn ở các cạnh chứ không phải tất cả ở trung tâm.

Các thuộc tính sau có sẵn cho Fresnel

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

Bản giới thiệu

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

Đầu ra

Dòng mã trên tạo ra kết quả sau:

Giải trình

Mã sau áp dụng hiệu ứng Fresnel. Màu sắc bên trái và bên phải được áp dụng cho các cạnh của mắt lưới.

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

Thuộc tính quyền lực và thiên vị kiểm soát hiệu ứng Fresnel trên bề mặt.

Trong bản demo này, chúng tôi đã sử dụng một hình ảnh có tên là Rainbow.png. Hình ảnh được lưu trữ trong hình ảnh / thư mục cục bộ. Bạn có thể tải xuống bất kỳ hình ảnh nào bạn chọn và sử dụng trong liên kết demo.