three.js 之旅（二）

three.js中各种场景的使用方法：

　　当然首先要先引入three.js库；其次，手动定义一个 canvas 标签。

　　<script type="text/javascript" src="../bower_components/three/three.js"></script>

　　<canvas id="test1" width="400" height="300"></canvas>

1. 创建渲染器renderer：

　　var renderer = new THREE.WebGLRenderer({

    　　canvas:document.getElementById("test1")

　　});
 　　renderer.setClearColor('#000');

2. 创建场景：

　　var scene = new THREE.Scene();

3. 创建照相机
　　（创建透视照相机）：
　　　var camera = new THREE.PerspectiveCamera(45,4/3,0.1,6000);

　　 camera.position.set(0,0,8);

 　　scene.add(camera);

（创建正交照相机）：

　　var camera = new THREE.OrthographicCamera(-2,2,1.5,-1.5,1,10);

　　camera.position.set(4,3,5);
　　camera.lookAt(scene.position);

4.创建模型：

　　var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),
            new THREE.MeshBasicMaterial({
                color :'#ccc',
                wireframe:true
            })
　　);
5.将创建的对象添加到场景中：

　　scene.add(cube);
　　renderer.render(scene,camera);

three.js 之旅 （二）

three.js 之旅（二）