学习材料和材料阅读Threejs朗伯-Phong

前言

材质是与渲染效果无关的属性，它可以通过设置材质来改变颜色、纹理映射、光模式等。

MeshBasicMaterial：没有，一个简单的颜色或显示线框几何。

MeshLambertMaterial：这种材料对光的反应和用于创建模糊和非发光物体。

MeshPhongMaterial：这种材料对光的反应，它是用来创造明亮的金属物体。

1。基本材料

When using the object of basic material (BasicMaterial), the color of the object after rendering is always the color of the material, and it will not produce shading or shadow effect due to illumination.If the color of the material is not specified, the color is random.Its constructor is:
three.meshlambertmaterial（选择）
在这一点上，选择可以是默认值，也可以是包含属性的值。例如，一个新的黄色材质，有0.75的不透明度：
新的three.meshbasicmaterial（{

颜色：0xffff00，

不透明度：0.75

}）；
应用于多维数据集（参见三）学习几何，效果：
源代码 uff1a

3.js测试7.1

函数init（）{
VaR渲染=新three.webglrenderer（{
帆布：document.getelementbyid（'maincanvas）
}）；
Renderer.setClearColor（0x000000）；
var场景=新三。场景（）；

相机
VaR相机=新three.orthographiccamera（5, 5，3.75，-3.75，0.1，100）；
（25, 25, 25）camera.position.set；
Camera.lookAt（新three.vector3（0, 0, 0））；
Scene.add（相机）；
VAR光=新three.pointlight（0xffffff，1, 100）；
（10, 15, 5）light.position.set；
Scene.add（光）；

VaR材料=新three.meshbasicmaterial（{
颜色：0xffff00，
不透明度：0.75
}）；

VaR的立方体=新三。网（新three.cubegeometry（5, 5, 5）、材料）；
Scene.add（立方体）；

Renderer.render（场景，相机）；
}

BasicMaterial的几个比较常用的属性：

可见：如果是可见的，则默认为真。

方：渲染的正面或背面，默认的是积极的three.frontside，可设置反向three.backside，或双面three.doubleside

线框：是否呈现线而不是面，默认为false

颜色：十六波段的RGB颜色，如红色为0xFF0000

贴图：纹理映射

为基本材料，即使场景中的光源改变时，使用的材料都是颜色相同的效果。当然，这是很不现实的，所以我们将引入更多的真正的光模式：朗伯照明模型和Phong光照模型。

2 Lamber的材料和Phong材料。

Lambert材料（meshlambertmaterial）是符合朗伯照明模型的材料。Lambert光照模型的主要特点是只考虑漫反射的影响不考虑镜面反射的效果。因此，它不适用于诸如金属、镜子等需要镜面反射效应的物体，也适用于大多数其他物体。

照明模型公式如下：
idiffuse = KD ID * cos（θ）
其中，Idiffuse是漫反射光的强度，Kd是物体表面的漫反射特性，ID是光的强度，和θ是入射光的角度。

当然，使用阅读Three js Lambert材质，上面的公式可以直接使用而不理解上面的公式。

创建黄色兰伯特材料的方法是：
新的three.meshlambertmaterial（{

颜色：0xffff00

}）
在使用光之后，得到这种效果。
颜色是用来反射材料散射光的反射能力，也是最常用的用来设置材料颜色的特性。此外，还可以使用环境和发射物来控制材料的颜色。

环境代表反射环境光的能力。只有当AmbientLight设立的，价值是有效的。当材料反射环境光和环境强度的能力成倍增加时，材料的颜色就会被获得。

发射是材料的自发光颜色，它可以用来显示光源的颜色，而不是光源，而是一种不受光影响的颜色：
新的three.meshlambertmaterial（{

发射：0xFF0000

}）
效果是：
如果同时使用红光和黄散光：
新的three.meshlambertmaterial（{

颜色：0xffff00，

发射：0xFF0000

}）
效果是：
球体的作用：
总结材料的特性曲线：

环境：设置材料的环境色彩和使用它的环境光源的光源。这种颜色会随着环境光的颜色而增加，这是对光源的反应。

发射：设置发射材料的颜色不是光源，而是一种不受光线影响的颜色。默认为黑色。

源代码：

3.js测试7.2

函数init（）{
VaR渲染=新three.webglrenderer（{
帆布：document.getelementbyid（'maincanvas）
}）；
Renderer.setClearColor（0x000000）；
var场景=新三。场景（）；

相机
VaR相机=新three.orthographiccamera（5, 5，3.75，-3.75，0.1，100）；
（25, 25, 25）camera.position.set；
Camera.lookAt（新three.vector3（0, 0, 0））；
Scene.add（相机）；
VAR光=新three.pointlight（0xffffff，1, 100）；
（10, 15, 5）light.position.set；
Scene.add（光）；

VaR材料=新three.meshlambertmaterial（{
颜色：0xffff00，
发射：0xFF0000
}）；

VaR的立方体=新三。网（新three.cubegeometry（5, 5, 5）、材料）；
Scene.add（立方体）；

球=新（three.mesh / /无功新three.spheregeometry（3, 20, 8）、材料）；
/ / scene.add（球）；

Renderer.render（场景，相机）；
}

3.phong材料

Phong材料（meshphongmaterial）是符合Phong光照模型的材料。不像Lambert，Phong模型考虑镜面反射的效果，所以对于金属和镜子的性能特别适合。

漫反射部分与朗伯光照模型相同，镜面反射部分的模型如下：

ispecular = KS *是*（cos（α））^ n
其中，ispecular是镜面反射的强度，Ks是材料表面的镜面反射系数，是光源强度，α是反射光和视线之间的夹角，N是高光指数，亮点和更大的是，较小的高光点。

由于漫反射部分与朗伯模型一致，如果不指定镜面反射系数，只设置漫反射，效果与朗伯相同。
新的three.meshphongmaterial（{

颜色：0xffff00

}）；
同样地，可以指定发射和环境值，这里没有解释。镜面反射系数是由镜面反射值指定的。首先，我们只使用镜面反射，将高光设置为红色，然后将其应用到一个球体上。
VaR材料=新three.meshphongmaterial（{

镜面：0xFF0000

}）；

VaR球=三。网（新three.spheregeometry（3, 20, 8）、材料）；
效果是：
那光亮的属性可以用来控制n值在光照模型。当亮度值越大，光斑越高，默认值是30。我们将它设置为1000：
新的three.meshphongmaterial（{

镜面：0xFF0000，

亮度：1000

}）；
效果是：
使用黄镜灯，红色散射光：
材料=新three.meshphongmaterial（{

颜色：0xFF0000，

镜面：0xffff00，

亮度：100

}）；
总结Phong材料的特性：

环境：设置材料的环境色彩和使用它的环境光源的光源。这种颜色会随着环境光的颜色而增加，这是对光源的反应。

发射：设置发射材料的颜色不是光源，而是一种不受光线影响的颜色。默认为黑色。

镜面：指定材料的亮度和高光泽的颜色。如果设置为与颜色属性相同的颜色，它将得到与金属类似的另一种材质。如果它被设置为灰色灰色，它看起来像塑料。

Shininess: specifying the luminance of the high light part, the default value is 30.

源代码：

3.js测试7.3

函数init（）{
VaR渲染=新three.webglrenderer（{
帆布：document.getelementbyid（'maincanvas）
}）；
Renderer.setClearColor（0x000000）；
var场景=新三。场景（）；

相机
VaR相机=新three.orthographiccamera（5, 5，3.75，-3.75，0.1，100）；
（25, 25, 25）camera.position.set；
Camera.lookAt（新three.vector3（0, 0, 0））；
Scene.add（相机）；
VAR光=新three.pointlight（0xffffff，1, 200）；
（10, 15, 25）light.position.set；
Scene.add（光）；

VaR材料=新three.meshphongmaterial（{
镜面： / / 0xFF0000，
颜色：0xFF0000，
镜面：0xffff00，
亮度：100
}）；

立方体=新（three.mesh / /无功新three.cubegeometry（5, 5, 5）、材料）；
/ / scene.add（立方体）；

VaR球=三。网（新three.spheregeometry（3, 20, 8）、材料）；
Scene.add（球）；

Renderer.render（场景，相机）；
}

总结

这篇文章的内容已经结束了。本文介绍了琥珀和Phong在阅读Three js通过详细的实例和图片，希望能帮助大家学习。萧边将梳理阅读Three js的相关文章，并继续支持阅读Three js有兴趣的朋友。