BabylonJS - 材料

BabylonJS材料 - 从简单和简单的步骤学习BabylonJS，从基本到高级概念，包括简介，环境设置，概述，基本元素，材料，动画，相机，灯光，参数形状，网格，矢量位置和旋转，贴花，曲线3，动态纹理，视差映射，镜头光晕，创建ScreenShot，反射探测器，标准渲染管道，ShaderMaterial，骨骼和骨架，物理引擎，播放声音和音乐。

材料就像物体的衣服.您可以添加颜色，纹理并用它包裹网格.您可以使用相同的材质来覆盖许多网格.网格可以是我们刚才在章节的例子中看到的场景 - 穿过天空的平面.

在本章中，我们将学习如何添加颜色，纹理，本章中网格的反射.

我们将向已创建的场景添加材质.我们将通过向我们创建的所有形状添加材料来进步.

让我们考虑一些示例来了解添加材料的工作原理.

语法

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

上述材料不会改变任何东西，因为它是默认的.我们将使用可用属性使对象看起来更具吸引力.

可用属性如下 :

Transparency
Diffuse
Emissive
Ambient
Specular
Back-Face Culling
WireFrame

看看这些属性如何应用于材质会改变网格的外观.

基本材料属性 - FresnelParameters

菲涅耳是BabylonJS在 standardmaterial 上添加的新东西.它允许更改应用在形状上的颜色.通过使用简单的菲涅耳，您可以获得像反射一样的玻璃.菲涅耳将让你对边缘有更多的反思，而不是所有在中心.

以下属性可用于菲涅耳

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

演示

               BabylonJs - Basic Element-Creating Scene                                       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.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();            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();         });

输出

上面的代码行生成以下输出 :

基本材料属性 - FresnelParameters

解释

以下代码适用于菲涅耳效应.左右颜色应用于网格的边缘.

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

偏差和幂属性控制表面上的菲涅尔效应.

在这个演示中，我们使用了一个图像叫rainbow.png.图像存储在本地的图像/文件夹中.您可以下载您选择的任何图像，并在演示链接中使用.