-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathcanvas_ascii_effect.html
195 lines (163 loc) · 7.31 KB
/
canvas_ascii_effect.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - ASCII Effect</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 {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<!-- 轨迹控制，鼠标左键旋转，右键平移，中键缩放 -->
<script src="js/controls/TrackballControls.js"></script>
<!-- ASCII文本画效果 -->
<script src="js/effects/AsciiEffect.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>
<!--
统计插件(FPS，渲染时间，chrome内存使用率)，min表示js代码经过压缩
-->
<script src="js/libs/stats.min.js"></script>
<script>
var container, stats;
var camera, controls, scene, renderer;
var sphere, plane;
//Date.now()得到的是当前时间戳，单位毫秒
var start = Date.now();
init();
animate();
function init() {
//这里的或是为了防止获取不到的情形，其实并无必要
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
/*
relative的div：width默认是window.innerWidth
absolute的div：width默认是内容大小
*/
info.style.width = '100%';
info.style.textAlign = 'center';
info.textContent = 'Drag to change the view';
//info.innerHTML = 'Drag to change the view';
container.appendChild( info );
/*
透视相机
PerspectiveCamera(fov, aspect, near, far)
fov(视场)：从相机位置能够看到的部分场景。推荐默认值45
aspect(长宽比)：渲染结果输出区域的横向长度和纵向长度的比值。推荐默认值window.innerWidth/window.innerHeight
near(近面)：定义从距离相机多近的地方开始渲染场景。推荐默认值0.1
far(远面)：定义相机可以从它所处的位置看多远。默认值1000
*/
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
//定义相机的位置，有如下两种方式。如果不设置的话，相机位置为默认的Vector3{x:0,y:0,z:0}
//camera.position.set(0,150,500);
camera.position.y = 150;
camera.position.z = 500;
//设置鼠标控制的对象为相机
controls = new THREE.TrackballControls( camera );
scene = new THREE.Scene();
/*
点光源，空间中的一点，朝所有方向发射光线
PointLight( color, intensity, distance, decay );
color：光的颜色
intensity：光照强度，默认为1
distance：光最长能照射的距离，默认为0
decay：光的衰减系数，默认为1
*/
var light = new THREE.PointLight( 0xffffff );
//设置点光源的位置
light.position.set( 500, 500, 500 );
scene.add( light );
var light = new THREE.PointLight( 0xffffff, 0.25 );
light.position.set( - 500, - 500, - 500 );
scene.add( light );
sphere = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 10 ), new THREE.MeshLambertMaterial() );
//没有设置position，默认是{x:0,y:0,z:0}
scene.add( sphere );
// Plane
/*
MeshBasicMaterial：与光照无关，仅根据材质的颜色或贴图来渲染物体
color：材质的颜色
map：材质的贴图
wireframe: 显示三角形线框还是显示面
side：可选的值有THREE.FrontSide(仅渲染正面)、THREE.BackSide(仅渲染背面)、THREE.DoubleSide(双面渲染)
overdraw:过渡描绘。如果用THREE.CanvasRenderer对象，有缝隙时需设置该值。例如当前如果使用0.5以下的值，三角形的分界线就很明显。但是使用WebGLRenderer则不会有分割线
*/
plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
plane.position.y = - 200;
plane.rotation.x = - Math.PI / 2;
scene.add( plane );
renderer = new THREE.CanvasRenderer();
//设置渲染器的"清除色"和"透明度"
renderer.setClearColor( 0xf0f0f0 );
//设置待渲染场景的大小
renderer.setSize( width, height );
// container.appendChild( renderer.domElement );
//使用renderer初始化Ascii效果
effect = new THREE.AsciiEffect( renderer );
//设置需要ASCII渲染场景的大小，如果不设置则不会渲染出任何图像，如果设置的比renderer的小(或大)则会进行缩放(或放大)
effect.setSize( width, height );
container.appendChild( effect.domElement );
//如果不适用AsciiEffect，则直接将renderer的domElement元素加入布局即可
//container.appendChild( renderer.domElement );
//统计插件(FPS，渲染时间，chrome内存使用率)
stats = new Stats();
//这里注意，统计插件的dom元素是"dom"，而不是domElement
container.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
//更新透视相机的宽高比。如果宽高比不对，那么正方形可能就不是正方形了
camera.aspect = window.innerWidth / window.innerHeight;
//更新透视相机的投影矩阵
camera.updateProjectionMatrix();
//重新设置渲染场景的大小
renderer.setSize( window.innerWidth, window.innerHeight );
effect.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
//这里可以在render前后使用stats.begin和stats.end，也可以在每次渲染的时候调用一次stats.update
stats.begin();
render();
stats.end();
}
function render() {
//计算从开始到现在一共经过了多少毫秒
var timer = Date.now() - start;
sphere.position.y = Math.abs( Math.sin( timer * 0.002 ) ) * 150;
//按照右手螺旋定则绕X轴旋转
//sphere.rotation.x = timer * 0.0003;
sphere.rotateX(timer * 0.0003);
//按照右手螺旋定则绕Z轴旋转
//sphere.rotation.z = timer * 0.0002;
sphere.rotateZ(timer * 0.0002);
//更新轨迹控制器，这里轨迹控制器与相机关联，所以也会更新相机的位置和角度。注意这里就不用设置相机的lookAt了
controls.update();
effect.render( scene, camera );
//renderer.render( scene, camera );
}
</script>
</body>
</html>