本文是一篇three.js的入门文章，将介绍three.js的一些基本概念，并一步步搭建一个简单的场景模型：
在线预览：
场景元素
概念
用three.js构建场景，有三个不可或缺的场景元素：
scene：可以把它想象成一个容器，用来放置你场景中的所有元素（光源，物体）
camera：即相机被相机拍摄到的物体才能最终被呈现出来
renderer：三维的物体最终要呈现在二维的画布中，需要通过render来实现
其中透视相机由四个必要参数控制：
fov：决定了从相机位置可以看到的场景大小
aspect：呈现场景水平尺寸与垂直尺寸的比值，对于需要全屏显示场景该参数是window.innerWidth/window.innerHeight
near：物体呈现最小距离，小于该距离将不再呈现
far：物体呈现的最大距离，超过该距离物体将不再呈现
代码实现
// 配置参数var HEIGHT = window.innerHeightvar WIDTH = window.innerWidthvar aspect = WIDTH / HEIGHTvar fov = 35var near = .1var far = 1500// 创建 scenevar scene = new THREE.Scene()// 创建 cameravar camera = new THREE.PerspectiveCamera(fov,aspect,near,far)// 设置相机位置camera.position.set(0, 0, 20)// 创建 rendererrenderer = new THREE.WebGLRenderer({ // 透明 alpha: true, // 注意抗锯齿会影响性能，请酌情使用 antialias: true })// 定义了最终呈现的尺寸renderer.setSize(WIDTH, HEIGHT)// 需要分清该尺寸与相机中的aspect的区别// 前者就好比一部电影可以在电脑上看也可以在手机上看(这里的尺寸是最终呈现的尺寸)// 后者好比一部电影我用绿幕拍和实景拍都可以（这里的尺寸指物理空间的大小） // 添加到DOM中document.body.appendChild(renderer.domElement) 预览
这时候打开浏览器就是一片白什么也没有，
因为scene里面什么都没有设置光源
光源是场景中重要的组成部分，同样的场景使用不同的光源可以达到迥然不同的效果
概念
AmbientLight：环境光可在场景中添加无差别的光，对整个场景与对象都有效
PointLight：点光源由一点散射出来的光
SpotLight：聚光灯由一点发出的光锥效果的光(自行脑补聚光灯吧)
DirectionalLight：一组平行光，通常被用来模拟太阳光
以上四种是比较常用的光
代码实现
// 环境光var ambientLight = new THREE.AmbientLight(0xffe8d8, 0.6)// 主光var mainLight = new THREE.DirectionalLight(0xffe8d8, .8)mainLight.position.set(-50, 40, -40)
预览
这时候打开浏览器依旧是一片白什么也没有，
不要打我，因为场景里面还没有添加物体
添加物体
概念
不负责任地说，一个场景中的物体其实是由两部分组成的geometry和material
geometry：就是物体的骨架，决定了物体在三维空间中的形状
material：就是物体的皮肤，决定了物体在三维空间的呈现（自身颜色，是否反光，是否透明）
代码实现
var geometry = new THREE.BoxGeometry(1, 1, 1)// 创建一个边长为1的立方体var material = new THREE.MeshLambertMaterial({ color:0x6699ff })// 创建颜色为0x6699ff的Lambert材质var cube = new THREE.Mesh(geometry, material)// 将骨架与材质合成物体scene.add(cube)// 添加这个物体 预览
这样在浏览器中就可以看见一个物体了
运动
这样一个物体显得单调乏味，想个办法让他动起来
概念
帧：动画都是一帧一帧呈现的，就意味着我们需要一个循环，不断地在画布上绘制
requestAnimationFrame：它不是一个以时间为基准的API，所以你不必设定调用时间，它会在浏览器准备好绘制帧的时候调用
代码实现
改造一下render：
function loop() { renderer.render(scene, camera) // 每一帧都渲染一次 cube.rotation.x += 0.01 // 立方体繞x轴转动 cube.rotation.z += 0.05 // 立方体繞z终转动 requestAnimationFrame(loop) // 循环 } loop() 预览
在浏览器中可以看见立方体转动起来了
后续
下一节将介绍模型中各物体如山坡，房子的构建，以及如何创建阴影