材质主要是用来表现物体对光的交互（反射、折射等）性质的。譬如金属对光的反射和毛毯对光的反射性质完全不一样，那么对3D程序来说，这样的差别就通过材质这个属性来计算出不同的颜色。
贴图是图，最简单的形式是ps之类的软件做出来的一张图，这些图在3D中用来贴到物体的表面，用来表现物体的“纹理”
可以用 material = new BABYLON.StandardMaterial("texture1", scene); 的方法创建一个材质
material.diffuseColor = new BABYLON.Color3(0.0, 0.7, 0.95); //漫射色
material2.bumpTexture = new BABYLON.Texture("img/bump.png", scene); //凹凸贴图
将上面这张贴图存到 img 目录下，命名为 bump.png
马上有惊奇的效果
material.emissiveColor = new BABYLON.Color3(.2, .8, .3); //发光色
material.specularColor = new BABYLON.Color3(0.8, 0.2, 0.7); //反射色
material.alpha = 0.6; //调整透明度
material.diffuseTexture = new BABYLON.Texture('http://www.babylonjs-playground.com/textures/tree.png', scene)
material.diffuseTexture.hasAlpha = true; //显示为透明
material.backFaceCulling = false; //使透明在背面也显示贴图，而不是裁切后显示为空
material.wireframe = true // 显示网格
material.diffuseTexture = new BABYLON.Texture("http://www.babylonjs-playground.com/textures/grass.jpg", scene); // 使用贴图
material.diffuseTexture.uScale = 5.0;//垂直方向重复5次
material.diffuseTexture.vScale = 5.0;//水平方向重复5次
material.reflectionTexture = new BABYLON.Texture("http://www.babylonjs-playground.com/textures/tree.png", scene); // 反射贴图
material.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE; // 反射模式
最后把材质附加到模型上
sharp.material = material
就可以出现各种颜色
完整的 TestGeometries 代码如下
'use strict';
function TestGeometries (scene) {
// 创建一堆材质
const material1 = new BABYLON.StandardMaterial("texture1", scene);
material1.diffuseColor = new BABYLON.Color3(0.0, 0.7, 0.95); //漫射色
const material2 = material1.clone()
// material2.emissiveColor = new BABYLON.Color3(.2, .8, .3); //发光色
material2.ambientColor = new BABYLON.Color3(.1, .3, .0); //发光色
material2.bumpTexture = new BABYLON.Texture("img/bump.png", scene); //凹凸贴图
const material3 = material1.clone()
material3.specularColor = new BABYLON.Color3(0.8, 0.2, 0.7); //反射色
material3.alpha = 0.6; //调整透明度
const material4 = material1.clone()
material4.diffuseTexture = new BABYLON.Texture('http://www.babylonjs-playground.com/textures/tree.png', scene)
material4.diffuseTexture.hasAlpha = true; //显示为透明
material4.backFaceCulling = false; //使透明在背面也显示贴图，而不是裁切后显示为空
const material5 = material1.clone()
material5.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.15); //漫射色
material5.reflectionTexture = new BABYLON.Texture("http://www.babylonjs-playground.com/textures/tree.png", scene); // 反射贴图
material5.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE; // 反射模式
const materialWireframe = new BABYLON.StandardMaterial("materialWireframe", scene);
materialWireframe.wireframe = true // 显示网格
const materialGrass = new BABYLON.StandardMaterial("materialGrass", scene);
materialGrass.diffuseTexture = new BABYLON.Texture("http://www.babylonjs-playground.com/textures/grass.jpg", scene);
materialGrass.diffuseTexture.uScale = 5.0;//垂直方向重复5次
materialGrass.diffuseTexture.vScale = 5.0;//水平方向重复5次
// 创建一个盒子
//参数为: 名字,盒子大小, 它们将放到场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面). 如果你需要默认表现那么最后两个参数可以忽略: BABYLON.Mesh.CreateBox("box", 6.0, scene);
const box = BABYLON.Mesh.CreateBox("box", 1.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
// box.position.x = -1; //移动一下它的默认位置，x轴移到-3的位置
//Apply the materials to meshes
box.material = material1;
// 创建一个球体
//参数为: 名字, 细分段数 (高度细节或不需), 大小, 将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面). 如果你需要默认的表现那么最后两个参数可以忽略: BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);
const sphere = BABYLON.Mesh.CreateSphere("sphere", 8.0, 1.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
sphere.position.x = -1.5; //移动一下x轴的默认位置
sphere.material = material2
// 创建一个平面 (注意这个面是竖立着的)
//参数为: 名字, 大小, 和将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向
const plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene, false, BABYLON.Mesh.DOUBLESIDE); //这里怕看不出来用了双面贴图
// const plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);
plane.position.y = -1;
plane.rotation.x = Math.PI / 2 //转动x轴成平面
plane.material = materialGrass
// 创建一个盘片 或着一个规则多边形 这里创建了一个8边型
const disc = BABYLON.Mesh.CreateDisc("disc", 1, 8, scene, false, BABYLON.Mesh.DOUBLESIDE);
// 参数为: 名字, 半径, 边数, 场景, 可更新否和可选的朝向(参见下面). 如果你需要默认的表现,那么最后两个参数参数可以忽略:
// const disc = BABYLON.Mesh.CreateDisc("disc", 1, 8, scene);
disc.position.x = -3;
disc.rotation.x = Math.PI / 2 //转动x轴成平面
disc.material = material3
//创建一个圆柱体
// 参数为: 名称, 高度, 顶直径, 底直径, 边数, 高向细分度, 场景, 可更新否和可选的朝向(参见下面). 如果你需要默认表现,那么最后两个参数可以忽略:
const cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 1, 1, 6, 1, scene);
cylinder.position.x = 1.5;
cylinder.material = material4
// 创建一个环体
// var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);
// 参数为: 名称, 直径, 厚度, 边数(高度细节或不是), 场景, 可更新否和可选的朝向(参见下面). 如果你使用默认表现那么最后两个参数可忽略 :
const torus = BABYLON.Mesh.CreateTorus("torus", 1, 0.5, 10, scene);
torus.position.x = 3;
torus.material = material5
// 创建一个结
// const knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);
// 参数为: 名称, 半径, tube, 半径上分段数, tubularSegments, p, q, 场景, 可更新否和可选的朝向(参见下面). 如果你使用默认的表现那么最后的两个参数可以忽略 :
const knot = BABYLON.Mesh.CreateTorusKnot("knot", 1, 0.2, 32, 16, 2, 3, scene);
knot.position.x = 5.5;
knot.material = materialWireframe // 赋予材质
// 创建线
// 参数为: 名称, [都好分隔的向量数组], 场景.
const lines = BABYLON.Mesh.CreateLines("lines", [
new BABYLON.Vector3(-2, 0, 0),
new BABYLON.Vector3(2, 0, 0),
new BABYLON.Vector3(0, 0, -2),
new BABYLON.Vector3(0, 0, 2),
new BABYLON.Vector3(-2, 0, 0)
], scene);
lines.position.y = 3
//绘制点划线
// 参数为 : 名称, [三元向量数组], 划线大小, 间隙大小, 段划线数, 场景. 作为许多线段, 每条段先都是以三元向量组的方式呈现在空间里. 上面函数设置了这条点划线里线段的数量, 每段都是由两个连续三元向量定义. 划线大小 和 间隙大小 是指点划线里每个划线和之间间隙的相对大小.
const dashedlines = BABYLON.Mesh.CreateDashedLines("dashedLines",
[
new BABYLON.Vector3(-2, 0, 0),
new BABYLON.Vector3(2, 0, 0),
new BABYLON.Vector3(0, 0, -2),
new BABYLON.Vector3(0, 0, 2)
]
, 1, 1, 100, scene);
dashedlines.position.x = -4
dashedlines.position.y = 3
}
实际场景中反射贴图的效果很美妙
