三要素：scene（场景）、camera（相机）、renderer（渲染器）
scene变量是一个容器，用来保存并跟踪所有我们想渲染的物体。
camera变量定义了我们能够在渲染好的scene里看到什么。
renderer对象负责计算制定相机角度下，浏览器中scene的样子。
三维对象：Plane（平面）、Cube（方块）、Sphere（球体）、Camera（相机）、Axes（轴）
renderer
var renderer = new THREE.WebGLRenderer() renderer.setClearColorHex(0xEEEEEE) renderer.setSize(window.innerWidth,window.innerHeight)
renderer.shadowMapEnabled = true
setClearColorHex() 设置renderer背景色
setSize() 设置scene渲染成多大尺寸
shadowMapEnabled 设置是否有阴影
axes 坐标轴
var axes = new THREE.AxisHelper(20) scene.add(axes)
创建平面
定义面板尺寸，宽60高20。创建材质，颜色。把这两个对象合并到名为plane的Mesh对象中。
添加到场景前 首先放置到合适的位置。 先将它绕着x轴旋转90度，然后position定义它在场景中的位置。
var planeGeometry = new THREE.PlaneGeometry(60,20) var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc}) var plane = new THREE.Mesh(planeGeometry,planeMaterial) plane.rotation.x = -0.5*Math.PI plane.position.x = 15 plane.position.y = 0 plane.position.z = 0 scene.add(plane)
创建光源
var spotLight = new THREE.SpotLight(0xffffff) spotLight.position.set(-40,60,-10) scene.add(spotLight)
不同材质对光源的反应不同，基础材质（MeshBasicMaterial）不会对场景中的光源产生反应，只会以制定的颜色渲染物体。
MeshLambertMaterial,MeshphongMaterial对光源有反应。
创建阴影
1、renderer.shadowMapEnabled = true
2、哪个物体接受阴影 哪个物体投射阴影 plane.receiveShadow = true cube.castShadow = true
3、定义光源 不是所有的光源都能产生阴影 spotLight.castShadow = true
引入requestAnimationFrame()方法
通过它你可以指定一个函数，按照浏览器定义的时间间隔调用。
function renderScene(){ requestAnimationFrame(renderScene) renderer.render(scene,camera) }
递归调用，让动画持续运行。在整个场景创建完毕后，调用一次renderScene()函数来启动动画。
document.getElementById("WebGL-output").appendChild(renderer.domElement)
renderScene()
辅助库：检测动画运行的帧频。当我们显示动画时，该库可以在一个小图片里显示每秒显示的帧数
<script src="../libs/stats.js"></script> <div id="Stats-output"></div> function initStats(){ var stats = new Stats() stats.setNode(0) stats.domElement.style.position = ‘absolute‘ stats.domElement.style.left = ‘0px‘ stats.domElement.style.top = ‘0px‘
document.getElementById("Statsoutput").appendChild(stats.domElement) return stats }
$(function(){
var stats = initStats()
})
原文：http://www.cnblogs.com/jszabc/p/6268727.html