谈论three.js之前我们需要了解一下WebGL...先自问自答一下
1:什么是WebGL ?
webGL是基于OpenGL es 2.0 的web标准,可以通过html5 canvas元素作为dom访问接口。
2:WebGL可以做什么?
现在大部分浏览器都实现了WebGL。它不仅可以创建二维图形和应用,还可以利用CPU,来创建漂亮的、高效的三维应用。
3:那什么是Three.js?
Three.js封装了底层的图形接口,提供了基于WebGL的非常易用的JavaScript API。且简化WebGL的开发。
一个典型的Three.js程序至少包括 渲染器、场景、照相机、以及场景中创建的物体。如下所示:
//渲染器
var renderer = new THREE.WebGLRenderer({
canvas:document.getElementById('myCanvas')
});
renderer.setClearColor(0x000000);
//场景
var scene = new THREE.Scene();
//照相机
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
//物体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
//渲染
renderer.render(scene,camera);
第一部分:相机
1.1什么是照相机?
他定义了三维空间到二维空间屏幕的投影方式。
Three.js中有两种不同的相机。正交投影相机 和 透视投影相机
透视投影(a):近大远小效果
正交投影(b):在三维空间内平行的线,在二维空间也一定是平行的。
(1)正交投影相机
//设置正交投影相机
THREE.OrthographicCamera(left, right, top, bottom, near, far)