从0开始搭建基于Three.js的3D场景（1）

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

2. 创建场景
要想实现个性化的页面结构，你可以自定义一个容器，用来存放渲染的场景。

<div class="treediv" id="Treediv"></div>

然后需要创建场景对象，之后所有的物体等元素都需要add到这个scene中来。

/*创建场景对象Scene*/
 var scene = new THREE.Scene();
 var width = $("#Treediv").width();//容器宽度
 var height = $("#Treediv").height();//容器高度
 var renderer = new THREE.WebGLRenderer();
     renderer.setSize(width, height); //设置渲染区域尺寸
     renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
$("#Treediv").append(renderer.domElement); //向容器中插入canvas对象

3. 创建光源
要实现更加细腻的渲染效果，例如物体阴影等，则需要加载一个光源。
此处注意：光源有很多种，SpotLight可以投射阴影，如AmbientLight、HemisphereLight等不能投射阴影，具体情况需要具体分析。
默认Three.js是不渲染阴影的，因为会用到大量计算。

/* 光源设置*/
 var spotLight = new THREE.SpotLight(0xffffff);
     spotLight.position.set(400, 200, 300);//光源位置
//spotLight.castShadow = true;（如果需要投射阴影则需要加上这句，接收阴影的元素也要设置receiveShadow）
     scene.add(spotLight);

4. 创建相机

相机位置决定了你的视角、观察物体的距离、如果有阴影还会影响阴影的渲染

/*相机设置*/
var k = width / height; //窗口宽高比
var s = 300; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(100, 300, 400); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

5. 渲染

所有准备做好后需要渲染我们的场景了

//执行渲染操作
function render() {
         renderer.render(scene, camera); //执行渲染操作
         requestAnimationFrame(render); //请求再次执行渲染函数render
}
 render();

下一章讲如何向场景中添加物体，如何使用鼠标旋转场景等操作。