THREE.JS学习笔记四:材质

材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性。通过设置材质可以 改变物体的颜色、纹理贴图、光照模式等。

1、基本材质(BasicMaterial)

THREE.MeshLambertMaterial(opt),opt 可以缺省,或者为包含各属性的值。如新建一个不透明度为 0.75 的黄色材质:

new THREE.MeshBasicMaterial({
 color: 0xffff00,
 opacity: 0.75
});

几个较为常用的属性:

visible :是否可见,默认为 true

side :渲染面片正面或是反面,默认为正面 THREE.FrontSide ,可设置为反面 THREE.BackSide ,或双面 THREE.DoubleSide

wireframe :是否渲染线而非面,默认为 false

color :十六进制 RGB 颜色,如红色表示为 0xff0000

map :使用纹理贴图

对于基本材质,即使改变场景中的光源,使用该材质的物体也始终为颜色处处相同的效果。

2、Lambert 材质

Lambert 材质(MeshLambertMaterial)是符合 Lambert 光照模型的材质。Lambert 光照模型 的主要特点是只考虑漫反射而不考虑镜面反射的效果,因而对于金属、镜子等需要镜面反 射效果的物体就不适应,对于其他大部分物体的漫反射效果都是适用的。

创建一 个黄色的 Lambert 材质的方法为:

new THREE.MeshLambertMaterial({
 color: 0xffff00
})

color 是用来表现材质对散射光的反射能力,也是最常用来设置材质颜色的属性。除此之 外,还可以用 ambient 和 emissive 控制材质的颜色。

ambient 表示对环境光的反射能力,只有当设置了 AmbientLight 后,该值才是有效的, 材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色。

emissive 是材质的自发光颜色,可以用来表现光源的颜色。单独使用红色的自发光:

new THREE.MeshLambertMaterial({
 emissive: 0xff0000
})

3、Phong 材质

Phong 材质(MeshPhongMaterial)是符合 Phong 光照模型的材质。和 Lambert 不同的是, Phong 模型考虑了镜面反射的效果,因此对于金属、镜面的表现尤为适合。例:

new THREE.MeshPhongMaterial({
 color: 0xffff00
});

4、法向材质

法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助。 法向材质的设定很简单,甚至不用设置任何参数:new THREE.MeshNormalMaterial()

5 、材质的纹理贴图

在此之前,我们使用的材质都是单一颜色的,有时候,我们却希望使用图像作为材质。这 时候,就需要导入图像作为纹理贴图,并添加到相应的材质中

单张图像应用于长方体  将其导入纹理中:var texture = THREE.ImageUtils.loadTexture('../img/0.png');

然后,将材质的 map 属性设置为 texture :var material = new THREE.MeshLambertMaterial({ map: texture });

这样就完成了将图片应用于材质的基本步骤。

猜你喜欢

转载自blog.csdn.net/joyvonlee/article/details/85775722