-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathcanvas_lights_pointlights.html
200 lines (171 loc) · 7.87 KB
/
canvas_lights_pointlights.html
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js canvas - point light</title>
<meta charset="utf-8">
<!--
如果没有设置viewport的width的话，网页很可能会超出手机屏幕宽度，具体多宽，要看浏览器定义的默认宽度是多少
user-scalable=no，规定了用户不能缩放网页，但有些浏览器对该项支持不是很好，故需要设置minimum-scale和maximum-scale相同来限制用户缩放
-->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
}
a {
color: #ff0080;
text-decoration: none;
}
a:hover {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - point lights demo.<br />
Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank">David OReilly</a>
</div>
<script src="../build/three.js"></script>
<!--
想要使用CanvasRenderer，必须添加如下两个js文件
Projector.js顾名思义上将3d图像投影到Canvas("2d")上，如果没有该文件会报如下错误
THREE.Projector has been moved to /examples/js/renderers/Projector.js. three.js:42883:3
TypeError: THREE.RenderableVertex is not a constructor
-->
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>
<script>
var camera, scene, renderer,
light1, light2, light3,
loader, mesh;
init();
animate();
function init() {
var container = document.getElementById( 'container' );
/*
透视相机
PerspectiveCamera(fov, aspect, near, far)
fov(视场)：从相机位置能够看到的部分场景。推荐默认值45
aspect(长宽比)：渲染结果输出区域的横向长度和纵向长度的比值。推荐默认值window.innerWidth/window.innerHeight
near(近面)：定义从距离相机多近的地方开始渲染场景。推荐默认值0.1
far(远面)：定义相机可以从它所处的位置看多远。默认值1000
*/
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
//定义相机的位置，有如下两种方式。如果不设置的话，相机位置为默认的Vector3{x:0,y:0,z:0}
camera.position.set( 0, - 6, 100 );
//camera.position.y = -6;
//camera.position.z = 100;
scene = new THREE.Scene();
/*
环境光，这是一种基础光源，它的颜色会添加到整个场景和所有对象的当前颜色上 |
AmbientLight( color, intensity)
color 光源的颜色
intensity 光照强度，默认为1
*/
scene.add( new THREE.AmbientLight( 0x00020 ) );
/*
点光源，空间中的一点，朝所有方向发射光线
PointLight( color, intensity, distance, decay );
color：光的颜色
intensity：光照强度，默认为1
distance：光最长能照射的距离，默认为0
decay：光的衰减系数，默认为1
*/
light1 = new THREE.PointLight( 0xff0040, 1, 50 );
scene.add( light1 );
light2 = new THREE.PointLight( 0x0040ff, 1, 50 );
scene.add( light2 );
light3 = new THREE.PointLight( 0x80ff80, 1, 50 );
scene.add( light3 );
var PI2 = Math.PI * 2;
var program = function ( context ) {
context.beginPath();
//填充一个半径为0.5的圆
context.arc( 0, 0, 0.5, 0, PI2, true );
context.fill();
};
/*
雪碧图材质，也叫精灵图
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
在Three.js中意思有点稍微不一样
A sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied.
Sprites do not cast shadows, setting castShadow = true will have no effect.
一个精灵也就是一个平面，它的面总是朝向相机，通常来说会采用一个部分透明的纹理
精灵不能投影出阴影，设置 castShadow = true 没有任何效果
SpriteCanvasMaterial:
Create a material that can draw custom sprites using a 2d canvas.
创建一个使用2d画布绘制的自定义精灵图材质
材质color会在program之前被设置到context.fillStyle上。因此如果内部还有对fillStyle的设置，将会直接覆盖掉外部的颜色配置
*/
var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xff0040, program: program } ) );
light1.add( sprite );
var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x0040ff, program: program } ) );
light2.add( sprite );
var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x80ff80, program: program } ) );
light3.add( sprite );
loader = new THREE.JSONLoader();
loader.load( 'obj/WaltHeadLo.js', function ( geometry ) {
/*
MeshLambertMaterial，这种材质会考虑光照的影响，可以用来创建颜色暗淡的、不光亮的物体
color: 即diffuse，漫射颜色，默认为0xffffff，白色
ambient: 环境色，默认为0xffffff, 白色, 乘以环境光得到对象的颜色
emissive: 自发光(荧光)颜色，默认为0x000000,黑色，实体颜色，不受其他灯光的影响.
overdraw: 过渡描绘。如果用THREE.CanvasRenderer对象，有缝隙时需设置该值。例如当前如果使用0.5以下的值，三角形的分界线就很明显。但是使用WebGLRenderer则不会有分割线
morphTargets: 表示是否启用变形
*/
mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ) );
scene.add( mesh );
} );
renderer = new THREE.CanvasRenderer();
//设置屏幕像素比，与Android上的DIP相仿，作用是在所有设备上的显示效果都相近
renderer.setPixelRatio( window.devicePixelRatio );
//设置待渲染场景的大小
renderer.setSize( window.innerWidth, window.innerHeight );
//将渲染器的DOM元素(即Canvas)添加到HTML中
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
//重新设置相机的宽高比。如果宽高比不对，那么正方形可能就不是正方形了
camera.aspect = window.innerWidth / window.innerHeight;
//更新透视相机的投影矩阵
camera.updateProjectionMatrix();
//更新待渲染场景的大小
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
//Date.now()得到的是当前时间戳，单位毫秒
var time = Date.now() * 0.0005;
//绕着Y轴按右手螺旋定则进行旋转
if ( mesh ) mesh.rotation.y -= 0.01;
light1.position.x = Math.sin( time * 0.7 ) * 30;
light1.position.y = Math.cos( time * 0.5 ) * 40;
light1.position.z = Math.cos( time * 0.3 ) * 30;
light2.position.x = Math.cos( time * 0.3 ) * 30;
light2.position.y = Math.sin( time * 0.5 ) * 40;
light2.position.z = Math.sin( time * 0.7 ) * 30;
light3.position.x = Math.sin( time * 0.7 ) * 30;
light3.position.y = Math.cos( time * 0.3 ) * 40;
light3.position.z = Math.sin( time * 0.5 ) * 30;
renderer.render( scene, camera );
}
</script>
</body>
</html>