学习目标：
理解3D 场景前置知识学习内容：
1、场景(Scene): 场景是[物体,光源等元素]的容器.可以配合 chorme 插件使用,抛出 window.scene 对象,即可实时调整和场景相关的所有对象数据,包括物体,光源等.
2、相机(Camera): 场景中的相机,代替人眼去观察.一个场景中有且只能有一个相机,一般常用的是透视相机(perspectiveCamera),遵循真实的物理场景法则 – 远小近大. 还有一个叫正交相机(一般 2D 平面场景游戏使用的比较多,物体的大小和远近无关)
3、物体对象(Mesh): 包括二维物体(点,线,面),三维物体和模型等.
4、光源(Light): 场景中的光源,如果场景中不添加光源,那么整个世界(Scene)将会一片黑暗. 常见的光源包括: 全局光,平行光,点光源(蜡烛).每种光源的表现形式都是不一样的(联想实际生活场景).
5、渲染器(renderer): 场景渲染器. 在基于浏览器的 Three.js 开发模式中,这里就是指的 WebGL —> Canvas
6、控制器(Control): 通过键盘,鼠标等,可以控制相机的位置,视角等.
“其中场景(Scene)、相机(Camera)、渲染器(renderer)是必须有的的”
代码：
（跑一下代码，看一下注释理解一下）
<!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><!-- module text/javascript --><script type="text/javascript" >/*创建场景*/var scene = new THREE.Scene();var geometry = new THREE.SphereGeometry(60,40,40);//创建一个球体几何对象//var geometry = new THREE.BoxGeometry( 100, 100, 10 );//创建一个长方体几何对象var material = new THREE.MeshLambertMaterial({color:0x0000ff});//创建材质对象var mesh = new THREE.Mesh(geometry,material);//网格模型对象scene.add(mesh);//添加到场景中/*光源设置*/var point = new THREE.PointLight(0Xffffff);//点光源point.position.set(400,100,200)//光源位置scene.add(point)//点光源添加到场景中var ambient = new THREE.AmbientLight(0x444444);//环境光scene.add(ambient);//添加到场景中/*相机设置*/var width = window.innerWidth;//窗口宽度var height = window.innerHeight;//窗口高度var k = width/height;var s = 100;//三维场景显示范围控制系数，系数越大，显示范围越大var camera = new THREE.OrthographicCamera( -s*k, s*k,s,-s,1,1000 );camera.position.set(200,300,200);//设置相机位置camera.lookAt(scene.position);//设置相机方向/*渲染器对象*/var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );renderer.setClearColor(0xb9d3ff,0.3);//设置背景颜色document.body.appendChild( renderer.domElement );renderer.render(scene,camera)var animate = function () {requestAnimationFrame( animate );scene.rotation.y += 0.01;scene.rotation.x += 0.01;renderer.render( scene, camera );};//创建一个旋转的方法animate();//动起来</script></body></html>
效果图
项目展示：点击跳转
总结理解：
1、 场景（scene）：你要搞一块地方放东西，场景里面就是放物体的。
2、相机（camera ）：定义一个相机，想象自己拿相机对着场景，来调节角度和距离。
3、 渲染器对象（renderer ）：renderer.render(scene,camera)这句就是把场景和相机渲染出来，他们才能显示在页面上。（不然只是定义场景和相机，不渲染出来页面也是什么都没有的）。
4、形状(geometry)：形状的api后面篇章细说。
5、材质（material）：定义颜色这些。
6、物体对象(Mesh)：var mesh = new THREE.Mesh(geometry,material);//网格模型对象，这句是指定义一个物体，物体有参数有形状和材质。
