- BabylonJS 教程
- BabylonJS - 主页
- BabylonJS - 简介
- BabylonJS - 环境设置
- BabylonJS - 概述
- BabylonJS - 基本元素
- BabylonJS - 材料
- BabylonJS - 动画
- BabylonJS - 相机
- BabylonJS - 灯
- BabylonJS - 参数化形状
- BabylonJS - 网格
- 矢量位置和旋转
- BabylonJS - 贴花
- BabylonJS - Curve3
- BabylonJS - 动态纹理
- BabylonJS - 视差映射
- BabylonJS - 镜头光晕
- BabylonJS - 创建屏幕截图
- BabylonJS - 反射探针
- 标准渲染管线
- BabylonJS - 着色器材质
- BabylonJS - 骨骼和骨骼
- BabylonJS - 物理引擎
- BabylonJS - 播放声音和音乐
- BabylonJS 有用资源
- BabylonJS - 快速指南
- BabylonJS - 有用的资源
- BabylonJS - 讨论
BabylonJS - 材料
材料就像物体的衣服。您可以添加颜色、纹理并用它包裹您的网格。您可以使用相同的材质来覆盖多个网格。网格可以是我们在上一章示例中看到的场景 - 飞机穿过天空。
在本章中,我们将学习如何为本章中的网格添加颜色、纹理、反射。
我们将向已创建的场景添加材质。我们将通过向我们创建的所有形状添加材料来取得进展。
让我们考虑几个例子来了解添加材料的工作原理。
句法
var materialforshapes = new BABYLON.StandardMaterial("texture1", scene);
上述材料不会改变任何内容,因为它是默认材料。我们将使用可用的属性使对象看起来更有吸引力。
可用的属性如下 -
看一下应用于材质的这些属性如何改变网格的外观和感觉。
基本材料属性 - FresnelParameters
Fresnel 是 BabylonJS 在standardmaterial上添加的新东西。它允许更改应用于形状的颜色。通过使用简单的菲涅耳,您可以获得像玻璃一样的反射。菲涅尔将使您在边缘而不是全部在中心获得更多反射。
菲涅耳具有以下属性
StandardMaterial.diffuseFresnelParameters StandardMaterial.opacityFresnelParameters StandardMaterial.reflectionFresnelParameters StandardMaterial.emissiveFresnelParameters StandardMaterial.refractionFresnelParameters
演示
<!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>
输出
上面的代码行生成以下输出 -
解释
以下代码应用菲涅尔效应。左侧和右侧的颜色应用于网格的边缘。
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 的图像。图像存储在本地的 images/ 文件夹中。您可以下载您选择的任何图像并在演示链接中使用。