Web 3D应用的基本原理

阿里云 F2E 正邪 - 2011.08.20

3Dimension

1

一点透视

2

两点透视

3

三点透视

4

人眼的感知

5

3D到2D的转换

perspective = viewDistance / (z + viewDistance);
x = x * perspective;
y = y * perspctive;
z = 0;
6

透视

透视因子：300

7

3个img标签组成的一个小例子

8

3D场景

9

材质

context.drawImage(image, x, y, width, height);

context.transform(m11, m12, m21, m22, dx, dy);

10

灯光

点光源
电灯泡 THREE.PointLight
平行光
太阳光 THREE.DirectionalLight
聚光灯
手电筒 THREE.SpotLight
环境光
自然光 THREE.AmbientLight
11

12

消隐

背面剔除
视域消隐
遮挡剔除
13

一个例子

14

扭曲特效

15

扭曲特效

16

Q&A

Thank You!

新浪微博：@正邪邪邪
17