初探three.js
相信大多数选择前端的小伙伴都有一个设计师的梦，今天我来说一说three.js。three.js是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。学习了它之后，就可以在3D发挥你无穷的想象力和设计能力。虽说他是js，但是实际上是对WebGL的封装，对于不那么international得小伙伴来说文档可能不那么友好，相关中文文章零零散散又多又单薄，今天记录一下最近学习的情况，让广大萌新少走一些弯路。
1.渲染3D场景的一些条件
首先3D场景渲染的主角当然是一个场景啦，这个场景就是我们多能看到的全部内容，它包括一些光源light，和一个网格mesh。而网格又可以分成几何体geometry和材质material,几何体和材质又可以分成好多种，我们一会再说。
场景有了，那么在一个空间中，我们以什么视角去看这个场景呢？所以说我们还需要一个摄像机camera，他的功能其实就类似于我们的眼睛。常见的相机有两种，一种是正交投影相机orthographicCamera，另一种是透视相机，区别我们以后说。
2. 简单几何体
几何体按照维度分为二维几何体和三维几何体，二维几何体就是各种面，它们默认都在XY轴组成的平面上。三维几何体有宽度（X轴）高度（Y轴）和深度（Z轴）的划分。
日后还会记录复杂几何体。
3.材质
材质是几何体面的皮肤，决定几何体的外表。
这些材料都是比较常用的,我们也可以在一种几何体上面使用多种材质（其实是在对象的children中生成了多个网格）。
4.光源
three.js的光源都是从生活中抽象出来的，效果也和我们生活中的相差无几。下面前四种是经常用的
注意，这些光源的默认值有阴影的区分。
5. 摄像机
之前说过摄像机有正交投影相机和透视相机之分，我们使用不同的摄像机，所呈现的东西也不一样。正交相机的距离对于渲染的结果没有什么影响，多数用在游戏中，他有7个参数分别是左边界、有边界、上边界、下边界、近面距离、远面距离、变焦。透视相机和我们人的眼睛看到的十分相近，都是近大远小，他有5各参数，分别是视场（视野所及的范围角），长宽比，近面距离，远面距离，变焦。我们经常使用透视相机。
6.渲染器
渲染器实际上就是调用GL底层的渲染方法，如果不使用渲染器，我们什么都看不到。渲染起的也分好多种，使用最多的是WebGLRender();他有两个参数，分别是场景scene和相机camera。
7. 小demo
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
sphere.castShadow = true;
scene.add(sphere);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
预览demo请移步至原文http://www.bettersmile.cn
下一章我们详细的讲一讲几何体。