three.js光源与材质(三)

Posted by 姚飞亮 on 2019-01-17

three.js光源与材质(三)

环境光和方向光

接下来,我们来看看多种光源同时存在于场景之中,对物体颜色的影响。
当环境光和方向光同时存在的时候,会出现怎么样的情况呢?可以把这种情况想成两种光源同时作用于物体,它产生的情况,和每种光源分别作用于物体,然后将两者的结果相加,是一样的效果。首先看看下面的代码:

1
2
3
4
5
6
7
8
9
function initLight() {
light = new THREE.AmbientLight(0x00FF00);
light.position.set(100, 100, 200);
scene.add(light);
// 方向光
light = new THREE.DirectionalLight(0xFF0000);
light.position.set(0, 0,1);
scene.add(light);
}

从代码上可以看出,环境光是绿色0x00FF00,方向光是红色0xFF0000,
我们来看看只有环境光,把方向光去掉的时候,渲染的结果是怎么样的

反过来,只有方向光的情况,没有环境光的时候,渲染的结果又会是怎么样呢?看看下图:

是的,总结一下,当方向光照射过来的时候,被照射的表面呈现光的颜色,而由于是方向光,没有照射到的表面,就呈现暗色,一般是黑色,表示没有任何光源照到该表面。

ok,好了,现在我们将环境光和方向光都加上,看看会出现什么效果,也会你已经猜到了效果,不过我还是不厌其烦的给你演示一次。

好了,我们马上来总结一下:

1.首先方向光,是如图箭头的方向着色到物体的。而环境光由于与位置没有关系,方向又是任何方向都可以照射的,所以我们不管光的方向。
2、图中绿色的部分,是由环境光造成的。由于方向光根本照射不到绿色的部分,所以,这部分只有环境光对其影响。
3、图中黄色的部分是由环境光和方向光共同作用而成的,其实是两种光源颜色的简单相加,
0x00FF00 + 0xFF0000 = 0xFFFF00,oxFFFF00 就是黄色。

点光源

点光源是理想化为质点的向四面八方发出光线的光源。点光源是抽象化了的物理概念,为了把物理问题的研究简单化。就像平时说的光滑平面,质点,无空气阻力一样,点光源在现实中也是不存在的,指的是从一个点向周围空间均匀发光的光源。
点光源的特点是发光部分为一个小圆面,近似一个点
下面的例子介绍了怎么使用点光源:

1
2
3
light = new THREE.PointLight(0xFF0000);
light.position.set(0, 0,50);
scene.add(light);

效果如下图:

点光源就是在一个点向周围发出的光,所以,你会看到照在物体上的光,有点像球的形状。改变点光源的位置,那么得到的效果图又会有一些区别。
将光源的位置改在(0, 0,25),则刚好在一个长方体的边上,效果图如下所示:

比较上面两幅图,你会发现,第二幅图和第一幅被照射的位置是不一样的。第二幅图,由于刚好在中间的一个长方形的边上,所以被边挡住,只有长方体内部受到光源,而外部面没有受到光源的,所以呈现黑色。
从这里也反应出了,一个面分前后两个面的,只有被光源照射的那个面才能够被看到。

混合光源

将方向光和点光源混合使用。
效果如图所示:

1
2
3
4
5
6
7
8
9
function initLight() {
// 方向光
light = new THREE.DirectionalLight(0xFF0000);
light.position.set(0, 0,1);
scene.add(light);
light = new THREE.PointLight(0x00FF00);
light.position.set(0, 0,25);
scene.add(light);
}

全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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 = 600 ;
camera.position.y = 0;
camera.position.z = 600;
camera.lookAt(new THREE.Vector3(0,0,0));
}
var scene;
function initScene() {
scene = new THREE.Scene();
}

var light;
function initLight() {
// 方向光
light = new THREE.DirectionalLight(0xFF0000);
light.position.set(0, 0,1);
scene.add(light);
light = new THREE.PointLight(0x00FF00);
light.position.set(0, 0,25);
scene.add(light);
}

var cube;
function initObject() {


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.set(0,0,0);
scene.add(mesh);

var geometry2 = new THREE.CubeGeometry( 200, 100, 50,4,4);
var material2 = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
var mesh2 = new THREE.Mesh( geometry2,material2);
mesh2.position.set(-300,0,0);
scene.add(mesh2);

var geometry3 = new THREE.CubeGeometry( 200, 100, 50,4,4);
var material3 = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
var mesh3 = new THREE.Mesh( geometry3,material3);
mesh3.position.set(0,-150,0);
scene.add(mesh3);

var mesh4 = new THREE.Mesh( geometry3,material3);
mesh4.position.set(0,150,0);
scene.add(mesh4);

var mesh5 = new THREE.Mesh( geometry3,material3);
mesh5.position.set(300,0,0);
scene.add(mesh5);

var mesh6 = new THREE.Mesh( geometry3,material3);
mesh6.position.set(0,0,-100);
scene.add(mesh6);
}
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>



Ω