学习目标：
当项目越来越复杂的时候，之前的写法就会显得很乱，很难看懂。所以我们要使用模块化开发，这样可读性会好很多，而且易于维护。用之前的一个球体的例子。代码：
提示：
<!DOCTYPE html>
<html>
<head>
<title>球体贴图</title>
<style type="text/css">
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="./three.js-dev/build/three.js"></script>
<script src="./three.js-dev/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript" >
var scene, camera, renderer, controls;//定义场景，相机，渲染器，控制器
/*
创建场景
*/
function scene(){
scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry(100,40,50);//创建一个球体几何对象
var material = new THREE.MeshLambertMaterial({
color:0x0000ff
});//创建材质对象
var mesh = new THREE.Mesh(geometry,material);//网格模型对象
scene.add(mesh);//mesh1添加到场景中
}
/*
光源设置
*/
function pointLight(){
var point = new THREE.PointLight(0Xffffff);//点光源
point.position.set(400,100,200)//光源位置
scene.add(point)//点光源添加到场景中
var ambient = new THREE.AmbientLight(0x444444);//环境光
scene.add(ambient);//添加到场景中
}
/*
相机设置
*/
function camera(){
var width = window.innerWidth;//窗口宽度
var height = window.innerHeight;//窗口高度
var k = width/height;
var s = 200;//三维场景显示范围控制系数，系数越大，显示范围越大
camera = new THREE.OrthographicCamera( -s*k, s*k,s,-s,1,1000 );
camera.position.set(200,300,200);//设置相机位置
camera.lookAt(scene.position);//设置相机方向
}
/*
辅助坐标系
*/
function axisHelper(){
var axisHelper = new THREE.AxisHelper(250)//辅助线的长度
scene.add(axisHelper)
}
/*
渲染器对象
*/
function renderer(){
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xb9d3ff,0.3);//设置背景颜色
document.body.appendChild( renderer.domElement );
}
function render(){
renderer.render(scene,camera)
}//封装一个渲染函数,调用一次渲染一次
/*
控制器对象
*/
function controls(){
controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控制对象，把相机作为参数。
controls.addEventListener('change',render);//监听鼠标事件，触发渲染函数。
}
/*
自动旋转函数
*/
function animate() {
requestAnimationFrame( animate );
scene.rotation.y += 0.01;
scene.rotation.x += 0.01;
render()
};//创建一个旋转的方法
/*
初始化对象
*/
function init(){
scene();//场景
pointLight();//点光源
camera();//相机
//axisHelper();//辅助坐标
renderer();//渲染器对象
controls();//控制器对象
animate();//旋转动画方法
render();//进来时渲染一次
}
init()//初始化
</script>
</body>
</html>
总结：
像这样把场景，相机，渲染器，控制器这些用函数封装起来，划分成一个个模块。这样后期维护起来也容易了很多。