三个js学习的兰博和Phong资料

序

材质是与渲染效果相关的属性，与对象顶点信息无关。您可以更改颜色、纹理贴图、照明模式等。通过设置材料来描述物体。

MeshBasicMaterial:对光照不敏感，给几何体一个简单的颜色或显示线框。

MeshLambertMaterial:这种材料对光有反应，用于创建暗淡和不发光的对象。

网状材料：这种材料也对光有反应，用于制造明亮的金属物体。

1.碱性材料

对于由基本材质制成的对象，渲染对象的颜色将始终是材质的颜色，并且不会因光照而产生明暗效果。如果没有指定材质颜色，则颜色是随机的。它的构造函数是：

三个。MeshLambertMaterial(opt)，其中opt可以是默认值或包含各种属性的值。例如，创建不透明度为0.75的新黄色材质：

新的三。mesh basicmaterial({ color :0x ffff 00，opa city 3360 0.75 })；将其应用于立方体(方法见《Three.js学习之几何形状》，效果为：

源代码：

！doctype HTML HTML Head Metacharset=' UTF-8 ' Title 3 . js Test 7.1/Title/Head Body Onload=' init()' Canvas ID=' Main Canvas ' Width=' 400 px ' Height=' 300 px '/Canvas/Body脚本类型=' text/JavaScript ' src=' http 3360 js/THREE . min . js '/脚本脚本脚本类型=' text/JavaScript ' function init(){ var renderer=new THREE。WebGLRenderer({ canvas : document . getelementbyid(' mainCanvas ')})；renderer . SetClearColor(0x 000000)；var场景=新三。场景()；//相机var camera=new THREE。正投影摄像机(-5，5，3.75，-3.75，0.1，100)；camera.position.set(25，25，25)；相机。看(新的三。Vector3(0，0，0))；scene.add(摄像机)；//light var light=new THREE。PointLight(0xffffff，1，100)；light.position.set(10，15，5)；场景添加(光)；var material=new THREE。mesh basicmaterial({ color :0x ffff 00，opa city 3360 0.75 })；var cube=new THREE。网状(新三。立方体几何(5，5，5)，材料；scene.add(立方体)；renderer.render(场景、摄像机)；} /script/html BasicMaterial的几个常用属性：

可见：无论是否可见，默认为真

侧面：渲染补丁的正面或背面，默认为正面三。正面，可以设置为背面三。背面或双三。双面

线框：是否渲染线而不是面，默认值为假

颜色：十六进制RGB颜色，如红色，为0xff0000

贴图：使用纹理贴图

对于基础材质来说，即使场景中的光源发生了变化，使用该材质的物体在任何地方都将始终具有相同的颜色。当然，这不是很逼真，所以我们将介绍更逼真的照明模型：Lambert照明模型和Phong照明模型。

2.朗伯材料和峰材料

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

光照模型的公式为：

Idiffuse=Kd * Id * cos()，其中Idiffuse为漫反射光强，Kd为物体表面的漫反射性质，Id为光强，为光的入射角弧度。

当然，使用Three.js的Lambert材料可以直接使用，不需要知道上面的公式。

创建黄色兰伯特材质的方法是：

新的三个。mesh Lambert material({ color :0 xfff00 })在使用照明后会获得以下效果：

颜色用来表示材料对散射光的反射能力，也是设置材料颜色最常用的属性。此外，您还可以使用环境色和发射色来控制材料的颜色。

环境光表示对环境光的反射能力，仅当设置了环境光时才有效。材料对环境光的反射能力乘以环境光强度，以获得材料的实际颜色。

发射性是材料的自发光颜色，可以用来表示光源的颜色。它不是光源，而是一种不受光照影响的颜色。单独使用红色自发光：

new three . meshambert material({ missive :0 xff 0000 })的效果是：

如果同时使用红色自发光光和黄色散射光：

new three . meshlambertmaterial({ color : xfff00，missive:xff0000})的效果如下：

球体的效果：

总结朗伯材料的独特性能：

环境色：设置材质的环境色，与环境光源配合使用。该颜色将乘以环境光的颜色。也就是响应光源。

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

源代码：

！doctype HTML HTML Head Metacharset=' UTF-8 ' Title 3 . js Test 7.2/Title/Head Body Onload=' init()' Canvas ID=' Main Canvas ' Width=' 400 px ' Height=' 300 px '/Canvas/Body脚本类型=' text/JavaScript ' src=' http 3360 js/THREE . min . js '/脚本脚本脚本类型=' text/JavaScript ' function init(){ var renderer=new THREE。WebGLRenderer({ canvas : document . getelementbyid(' mainCanvas ')})；renderer . SetClearColor(0x 000000)；var场景=新三。场景()；//相机var camera=new THREE。正投影摄像机(-5，5，3.75，-3.75，0.1，100)；camera.position.set(25，25，25)；相机。看(新的三。Vector3(0，0，0))；scene.add(摄像机)；//light var light=new THREE。PointLight(0xffffff，1，100)；light.position.set(10，15，5)；场景添加(光)；var material=new THREE。MeshLambertMaterial({ color :0x ffff 00，emissiv e :0x ff 0000 })；var cube=new THREE。网状(新三。立方体几何(5，5，5)，材料；scene.add(立方体)；//var sphere=new THREE。网状(新三。球面测量法(3，20，8)，材料；//scene.add(球体)；renderer.render(场景、摄像机)；} /script/html3.phong材料

Phong材质(网格材质)是一种符合Phong照明模型的材质。与Lambert模型不同，Phong模型考虑了镜面反射的影响，因此特别适用于金属和镜面。

漫反射和朗伯照明的模型是一样的，镜面反射的模型是：

Ispecular=Ks * Is * (cos(alpha)) ^ n

其中，Ispregular为镜面光强度，Ks为材料表面的镜面反射系数，is为光源强度，为反射光与视线的夹角，n为高光指数，光斑越高，高光光斑越小。

由于漫反射部分与Lambert模型一致，如果只设置漫反射而不指定镜面反射系数，其效果与Lambert相同：

新的三。meshyphongmaterial({ color :0x ffff 00 })；

同样，您可以指定发射值和环境值，这里不再描述。以下是通过镜面值指定镜面反射系数的描述。首先，我们只使用镜面反射，将高光设置为红色，并将其应用于球体：

var material=new THREE。meshyphongmaterial({镜象：0x ff 0000 })；var sphere=new THREE。网状(新三。球面测量法(3，20，8)，材料；效果是：

您可以通过shinines属性控制照明模型中的n值。当shinines值较大时，高光的光斑较小，默认值为30。当我们将其设置为1000时：

新的三。meshyphongmaterial({镜象：0xff0000，shinines 3360 1000 })；效果是：

使用黄色镜面光和红色散射光：

材料=新的三。meshyphongmaterial({ color :0x ff 0000，镜象：0xffff00，shinines 3360 100 })；总结Phong材料的独特性能：

环境色：设置材质的环境色，与环境光源配合使用。该颜色将乘以环境光的颜色。也就是响应光源。

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

镜面反射：指定材质的亮度及其高光的颜色。如果将其设置为与颜色属性相同的颜色，将获得与金属更相似的另一种材质。如果设置为灰灰色，它将看起来像塑料

亮度：指定高光的亮度。默认值为30。

源代码：

！DOCTYPE html html head meta charset=' UTF-8 '标题3。射流研究…测试7.3/title/head body on load=' init()' canvas id=' mainCanvas ' width=' 400 px ' height=' 300 px '/canvas/body script type=' text/JavaScript ' src=' http : js/THREE。量滴js '/script type=' text/JavaScript '函数init(){ var renderer=new THREE .WebGLRenderer({ canvas :文档。getelementbyid(' mainCanvas ')})；渲染器。SetClearColor(0x 000000)；定义变量场景=新三。场景();//相机var相机=新三.正投影摄像机(-5,5,3.75,-3.75,0.1,100);摄像机位置设置(25，25，25)；相机。看（新的三Vector3(0，0，0))；scene.add(摄像机);//light var light=new THREE .PointLight(0xffffff，1，200)；light.position.set(10，15，25)；场景添加（光);可变材料=新的三.mesh Phong material({//镜象：0xff0000，color:0xff0000，镜象：0xffff00，shinines 3360 100 })；//var cube=new THREE .网状（新三。立方体几何(5,5,5),材料；//场景。add(立方体)；var sphere=new THREE .网状（新三。球面测量法(3,20,8),材料；scene.add(球体);renderer.render(场景、摄像机);}/脚本/html总结

本文的内容到这就结束了，文章通过详细实例及图片介绍了三。射流研究…中的琥珀与Phong，希望对大家的学习有所帮助，小编会陆续整理三。射流研究…的相关文章，对三。射流研究…感兴趣的朋友们请继续支持我们。