three.js光源与材质(一)

世界有了光，就不在黑暗

宇宙间的物体有的是发光的，有的是不发光的，我们把发光的物体叫做光源。太阳、电灯、燃烧着的蜡烛等都是光源。

在Threejs的世界里，有了光，就不会在黑暗。

Threejs中的各种光源

作为3D技术的发展趋势，浏览器端3D技术越来越被一些技术公司重视。由此，Threejs非常注重3D渲染效果的真实性，对渲染真实性来说，使用光源是比不可少的技巧。Threejs，在光源方面提供了多种光源供选择。

1、光源基类

在Threejs中，光源用Light表示，它是所有光源的基类。它的构造函数是：

THREE.Light ( hex )

它有一个参数hex，接受一个16进制的颜色值。例如要定义一种红色的光源，我们可以这样来定义：

Var redLight = new THREE.Light(0xFF0000);

2、由基类派生出来的其他种类光源

THREE.Light只是其他所有光源的基类，要让光源除了具有颜色的特性之外，我们需要其他光源。看看，下面的类图，是目前光源的继承结构。

graph TD
A[THREE.Light] --> B(THREE.AmbientLight 环境光)
A[THREE.Light] --> C(THREE.PointLight 点光源)
A[THREE.Light] --> D(THREE.SpotLight 聚光灯)
A[THREE.Light] --> E(THREE.AreaLight 区域光)
A[THREE.Light] --> F(THREE.DirectionalLight 方向光)

可以看出，所有的具体光源都继承与THREE.Light类。下面我们来具体看一下，其他光源。

环境光 THREE.AmbientLight

环境光是经过多次反射而来的光称为环境光，无法确定其最初的方向。环境光是一种无处不在的光。环境光源放出的光线被认为来自任何方向。因此，当你仅为场景指定环境光时，所有的物体无论法向量如何，都将表现为同样的明暗程度。（这是因为，反射光可以从各个方向进入您的眼睛）

环境光用THREE.AmbientLight来表示，它的构造函数如下所示：

1	THREE.AmbientLight( hex )

它仍然接受一个16进制的颜色值，作为光源的颜色。环境光将照射场景中的所有物体，让物体显示出某种颜色。环境光的使用例子如下所示：

1
2
3

var light = new THREE.AmbientLight( 0xff0000 );

scene.add( light );

只需要将光源加入场景，场景就能够通过光源渲染出好的效果来了。

点光源 THREE.PointLight

点光源：由这种光源放出的光线来自同一点，且方向辐射自四面八方。例如蜡烛放出的光，萤火虫放出的光。

点光源用PointLight来表示，它的构造函数如下所示：

PointLight( color, intensity, distance )

这个类的参数稍微复杂一些，我们花点时间来解释一下：
Color：光的颜色
Intensity：光的强度，默认是1.0,就是说是100%强度的灯光，
distance：光的距离，从光源所在的位置，经过distance这段距离之后，光的强度将从Intensity衰减为0。默认情况下，这个值为0.0，表示光源强度不衰减。

聚光灯 THREE.SpotLight

聚光灯：这种光源的光线从一个锥体中射出，在被照射的物体上产生聚光的效果。使用这种光源需要指定光的射出方向以及锥体的顶角α。聚光灯示例如图所示：

聚光灯的构造函数是：
THREE.SpotLight( hex, intensity, distance, angle, exponent )

函数的参数如下所示：
Hex：聚光灯发出的颜色，如0xFFFFFF
Intensity：光源的强度，默认是1.0，如果为0.5，则强度是一半，意思是颜色会淡一些。和上面点光源一样。
Distance：光线的强度，从最大值衰减到0，需要的距离。默认为0，表示光不衰减，如果非0，则表示从光源的位置到Distance的距离，光都在线性衰减。到离光源距离Distance时，光源强度为0.
Angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度。
exponent：光源模型中，衰减的一个参数，越大衰减约快。

区域光

THREE.AreaLight

方向光

THREE.DirectionalLight

材质与光源的关系

材质与光源有什么关系，这是一个容易傻傻分不清的问题。在没有深入讲解前，我们只能说它们是相互联系，相互依托的关系。
1、材质的真相
材质就是物体的质地。我们可以用撤分文字的方法来理解。材质就是材料和质感的完美结合。
如果你还不理解，那么看看下面我引用的这段话：
在渲染程序中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。正是有了这些属性，才能让我们识别三维中的模型是什么做成的，也正是有了这些属性，我们计算机三维的虚拟世界才会和真实世界一样缤纷多彩。　
这就是材质的真相吗？答案是否定的。不要奇怪，我们必须仔细分析产生不同材质的原因，才能让我们更好的把握质感。那么，材质的真相到底是什么呢？仍然是光，离开光材质是无法体现的。举例来说，借助夜晚微弱的天空光，我们往往很难分辨物体的材质，因为他们很多都表现出黑色，我们难以区分是铝合金，还是塑料的。而在正常的照明条件下，则很容易分辨。另外，在彩色光源的照射下，我们也很难分辨物体表面的颜色，在白色光源的照射下则很容易。这种情况表明了物体的材质与光的微妙关系。下面，我们将具体分析两者间的相互作用。

不带任何光源的物体

我们首先在屏幕上画一个物体，不带任何的光源，定义物体的颜色为黑色，其值为0x000000，定义材质如下：

1 2	var material = new THREE.MeshLambertMaterial( { color:0x000000} ); // 这是兰伯特材质，材质中的一种

先看看最终的运行截图，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="/javascripts/three.min.js"></script>
    <script src="/javascripts/stats.min.js"></script>
    <script src="/javascripts/Tween.min.js"></script>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<script>
  var renderer;
  var stats;
  function initThree() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0xFFFFFF, 1.0);
    document.body.appendChild( renderer.domElement );

    stats = new Stats();
    //stats.setMode(1); // 0: fps, 1: ms
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
  }
  var camera;
  function initCamera() {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 600;
  }
  var scene;
  function initScene() {
    scene = new THREE.Scene();
  }

  var light;
  function initLight() {
    /*light = new THREE.AmbientLight(0xFF0000);
    light.position.set(100, 100, 200);
    scene.add(light);*/

    // light = new THREE.PointLight(0xFF0000);
    // light.position.set(0, 0,300);
    // scene.add(light);

    /*light = new THREE.SpotLight(0xFFFFFF,0.5,10000);
    light.position.set(100, 100, 200);
    scene.add(light);*/
  }

  var cube;
  function initObject() {
    /*var geometry = new THREE.CylinderGeometry( 100,150,400);
    var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} );
    var mesh = new THREE.Mesh( geometry,material);
    mesh.position = new THREE.Vector3(0,0,0);

    var tween = new TWEEN.Tween( mesh.position)
      .to( { x: -400 }, 3000 ).repeat( Infinity ).start();
    scene.add(mesh);*/

    var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
    var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
    var mesh = new THREE.Mesh( geometry,material);
    mesh.position = new THREE.Vector3(0,0,0);
    scene.add(mesh);
  }
  function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    animation();
  }


  function animation()
  {
    //camera.position.x =camera.position.x +1;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
    stats.update();
    TWEEN.update();
  }

  threeStart();
</script>
</body>
</html>

现在我们来解析一下：
1、在A处，关于灯光的代码，什么也没有做。也就是Threejs中没有添加任何灯光。
2、在B处，我们使用了兰伯特材质，并将这种材质赋予了黑色，所以，你才会发现最后的效果是黑色。如果，我们把材质颜色设置为红色，那么物体是不是就会显示红色呢？

答案是否定的，这是因为，在场景中没有任何光源的情况下，物体不能反射光源到人的眼里，所以物体应该是黑色的。这与物体的材质颜色几乎没有关系。打个比方，在月高风黑夜，伸手不见五指的夜晚，一群穿着彩衣的美女在你面前跳舞，你能分辨出他们是穿的彩色衣服吗？不能。

结论：当没有任何光源的时候，最终的颜色将是黑色，无论材质是什么颜色。

兰伯特材质与光源

最常见的材质之一就是Lambert材质，这是在灰暗的或不光滑的表面产生均匀散射而形成的材质类型。比如一张纸就是Lambert表面。首先它粗糙不均匀，不会产生镜面效果。我们在阅读书籍的时候，没有发现书上一处亮，一处不亮吧，它非常均匀，这就是兰伯特材质。
有的朋友觉得纸不粗糙啊，你怎么说它粗糙吗？人的肉眼是不好分辨出来，它粗不粗糙的。
Lambert材质表面会在所有方向上均匀地散射灯光，这就会使颜色看上去比较均匀。想想一张纸，无论什么颜色，是不是纸的各个部分颜色都比较均匀呢。
Lambert材质的图例如下所示：

Lambert材质会受环境光的影响，呈现环境光的颜色，与材质本身颜色相互作用。
我们现在来做一个例子
例子：红色环境光照射下的长方体，它用的是淡红色(0x880000)的兰伯特材质。效果如下图：

我们来看看代码，这里不存在环保问题，所以，我把所有代码都列出来了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="/javascripts/three.min.js"></script>
    <script src="/javascripts/stats.min.js"></script>
    <script src="/javascripts/Tween.min.js"></script>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<script>
  var renderer;
  var stats;
  function initThree() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0xFFFFFF, 1.0);
    document.body.appendChild( renderer.domElement );

    stats = new Stats();
    //stats.setMode(1); // 0: fps, 1: ms
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
  }
  var camera;
  function initCamera() {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 600;
  }
  var scene;
  function initScene() {
    scene = new THREE.Scene();
  }

  var light;
  function initLight() {
    /*light = new THREE.AmbientLight(0xFF0000);
    light.position.set(100, 100, 200);
    scene.add(light);*/

    // light = new THREE.PointLight(0xFF0000);
    // light.position.set(0, 0,300);
    // scene.add(light);

    /*light = new THREE.SpotLight(0xFFFFFF,0.5,10000);
    light.position.set(100, 100, 200);
    scene.add(light);*/
    // A start
    light = new THREE.AmbientLight(0xFF0000);
    light.position.set(100, 100, 200);
    scene.add(light);
    // A end
  }

  var cube;
  function initObject() {
    /*var geometry = new THREE.CylinderGeometry( 100,150,400);
    var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} );
    var mesh = new THREE.Mesh( geometry,material);
    mesh.position = new THREE.Vector3(0,0,0);

    var tween = new TWEEN.Tween( mesh.position)
      .to( { x: -400 }, 3000 ).repeat( Infinity ).start();
    scene.add(mesh);*/

    var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
    var material = new THREE.MeshLambertMaterial( { color:0x880000} );
    var mesh = new THREE.Mesh( geometry,material);
    mesh.position = new THREE.Vector3(0,0,0);
    scene.add(mesh);
  }
  function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    animation();
  }


  function animation()
  {
    //camera.position.x =camera.position.x +1;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
    stats.update();
    //TWEEN.update();
  }

  threeStart();
</script>
</body>
</html>

我们现在一直在使用环境光，从环境光的构造函数来看，它只有颜色，其位置对场景中的物体并没有影响，因为他是均匀的反射到物体的表面的。
材质本身的颜色。黑色最强（000000），白色最弱（FFFFFF），如果环境光比材质的颜色还强的话就显示环境光的颜色，如果是材质的颜色比较强的话那么就显示的材质的光。
（RGB色拆分）
我理解的材质颜色：材质在白色光中呈现的颜色
我理解的材质颜色原理：白色光源经过材质过滤后，不能被吸收掉的颜色（可拆分为RGB色）
再举例说明一下：
例1：如果光源为000000，那么不管什么材质，颜色都是000000，因为没有光（RGB）进入材质，也就不存在光被过滤的情况，所以看到是黑色
例2：如果光源为红色FF0000，材质为888888，光源经过材质过滤，因为R色FF比88强，而材质最强只能反射88的R光，多余的R光会被材质吸收掉，而光源中G和B根本就没，所以材质不会存在G和B光，即呈现880000
例3：如果光源为888888，材质为FF0000，因光源R部分比材质弱，即使材质吸收G光的能力为0，所以反射的R光为88，同理GB被材质吸收，反射00，最后呈现880000
（结论：呈现颜色=材质颜色+光源颜色的并集（即取小），即FF0000 U 888888 = 880000）
RGB色取拆分后，再取各自的：并集、并集、并集

环境光对物体的影响

环境光就是在场景中无处不在的光，它对物体的影响是均匀的，也就是无论你从物体的那个角度观察，物体的颜色都是一样的，这就是伟大的环境光。
你可以把环境光放在任何一个位置，它的光线是不会衰减的，是永恒的某个强度的一种光源。

Y Blog服务器是收费的，感谢您的捐助。

three.js光源与材质(一)

three.js光源与材质(一)

世界有了光，就不在黑暗

Threejs中的各种光源

1、光源基类

2、由基类派生出来的其他种类光源

环境光 THREE.AmbientLight

点光源 THREE.PointLight

聚光灯 THREE.SpotLight

区域光

方向光

材质与光源的关系

不带任何光源的物体

兰伯特材质与光源

环境光对物体的影响

FEATURED TAGS

FRIENDS

three.js光源与材质(一)

世界有了光，就不在黑暗

Threejs中的各种光源

1、 光源基类

2、 由基类派生出来的其他种类光源

环境光 THREE.AmbientLight

点光源 THREE.PointLight

聚光灯 THREE.SpotLight

区域光

方向光

材质与光源的关系

不带任何光源的物体

兰伯特材质与光源

环境光对物体的影响

FEATURED TAGS

FRIENDS

1、光源基类

2、由基类派生出来的其他种类光源