Three.js入门（一）

谈论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中有两种不同的相机。正交投影相机 和 透视投影相机

th1.png

透视投影(a)：近大远小效果
正交投影(b)：在三维空间内平行的线，在二维空间也一定是平行的。

（1）正交投影相机

    //设置正交投影相机
    THREE.OrthographicCamera(left, right, top, bottom, near, far)

th2.png