Three.js入门

Three.js封装了底层的图形接口，使得我们能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。

准备

开发之前先下载Three.js或者Three.min.js，然后在页面上添加标签

<script src="/js/three.js" ></script>

Hello World

使用Three.js要分为五个步骤：

1. 设置渲染器(render)
2. 设置场景(scene)
3. 设置摄像机(camera)
4. 设置光源(light)
5. 设置物体(object)

渲染器

三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。

var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('canvas')//这个是渲染所用的canvas标签
});
renderer.setClearColor(0x000000);//背景

场景(scene)

var scene = new THREE.Scene();

摄像机(camera)

OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。

var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);//将摄像机放入场景中

光源(light)

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。

var light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
light.position.set( 200, 200, 200 );//设置光源向量
scene.add(light);// 追加光源到场景

物体(object)

//声明一个正方形
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
        new THREE.MeshBasicMaterial({
              color: 0xff0000
       })
);
scene.add(cube);

渲染(render)

renderer.render(scene, camera);

把上面的代码全部合并到一个页面上就是一个最简单的demo。