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);