camera 相机
spotLight 光源
object (plane、cube...)物体
一个只有一个平面的简单场景中已经包含了几个对象
其中包括使用 Scene.add(object) 加载进场景的几个对象
场景渲染的时候camera对象会自动添加进来
从几个函数来理解THREE.Scene()对象
1、在场景中添加物体 Scene.Add()
2、移除物体 Scene.Remove()
3、获取场景中所有子对象列表 Scene.children
4、利用name 属性，获取场景中某个特定的物体 Scene.getChildByName()
5、这是一个回调函数返回所有子对象列表 scene.traverse()
在这里的效果同使用for 循环遍历children这个属性
6、雾化属性 在添加完场景后即可添加，可以使整个场景有一种雾化的效果
scene.fog = new THREE.Fog(0xffffff,0.015,100)
7、使场景中的所有物体都使用相同的材质
scene.overrideMaterial = new THREE.MeshLambertMaterial({color:0xffffff})
var geom = new THREE.Geometry()
geom.vertices = vertices vertices数组定义了构成几何体的点；
geom.faces = faces 将vertices里面的点连接起来，创建成三角面片，就形成了faces数组；
geom.verticesNeedUpdate = true 告诉geom对象 上面的属性需要更新；
geom.computeCentroids() 计算geom中face数组里每一个面的重心；
geom.computeFaceNormals() 该函数用来重新计算侧面，从而完成整个模型的更新
geom.mergeVertices() 从字面上的意思可以理解为将几何体的面融成一个立体；
geom.clone() 创建出一个geom对象的副本，赋予不同的材质后，就可以使用这个副本创建不同的网格对象。
mesh.position
mesh.rotation
mesh.scale
mesh.translateX
mesh.translateY
mesh.translateZ
cube.position.set(10,3,1)
cube.position = new THREE.Vector3(10,3,1)
1、在controls 中添加方法变量
属性变量是这样的： this.positionX = 1
方法变量：
2、把对象传递给gui （无取值范围）
gui.add(controls,'translate')
这样在gui中点击的时候就可以调用 translate 方法
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom,materials)//其中materials是设置材料的对象数组
这个方法创建出来的不是一个THREE.Mesh实例，而是materials数组里面的每一个材质都会创建一个实例 所以要像使用Scene对象一样使用这个(THREE.Mesh)
环境光创建后会应用到全局中去，该光源没有特别的来源方向，通常不能将THREE.AmbientLight作为场景中的唯一的光源，因为他会将场景中的所有物体渲染为相同的颜色，在场景中再去引入其他的光源的目的就是弱化阴影。
使用方式：
THREE.PointLight是一种单点发光、照射所有方向的光源，类似于你晚上打开手电筒去照射一个物体的那种场景，THREE.PointLight不会产生阴影，因为它会朝所有的方向发射光线。
属性：
使用方式：
前段时间公司给了一个新需求就是写一个装修室内3D全景效果图，于是开始我的three.js开发之旅。作为一个前端小白，突然接触three.js&webgl除了懵逼还是懵逼，不过作为一个技术人对于挑战也许就是软件开发中真正的乐趣，至少不会埋头调试一遍又一遍重复的页面数据，上上下下左左右右BABA......简直枯燥到极点。不过three.js&webgl不得不说给我打开了新的世界，接下来我就简单讲述一下我的学习之旅。
Three.js 是一款运行在浏览器中的 3D 引擎，是JavaScript编写的WebGL第三方库，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象,three.js内部也是webgl的封装，封装了大量了webgl API ，让比较繁琐的webgl更加简便。
WebGL（全写Web Graphics Library）是一种3D绘图协议，它让可以让开发进一步去了解图形渲染，Webgl是JavaScript和OpenGL ES 2.0合并出来的升级版，通过webgl可以让前端开发者们脱离开css渲染，可以了解更加底层的渲染，WebGL也可以为HTML5 Canvas提供硬件3D加速渲染，webgl是通过系统显卡来在浏览器里更流畅地展示3D场景和模型，加入shader(着色器)来对图形渲染，学习webgl需要具备相应的图形学算法，属于目前图形渲染开发的高级技术之一。目前webgl也运用在游戏，视频特效，包含untiy3D也是集成webgl。
three.js中主要由摄像机 ，场景 ，渲染器 , 资源加载器，素材组成
webgl中的所有东西都是基于摄像机去展示的，可以利用摄像头的视角形成对3d视图观测视角，比如鱼眼视角，从而就让我们可以在平面图上可以开发出真实场景的3D视图。接下来我们看看怎么用three.js创建一个摄像机：
摄像机有了但是为了让景物可以更好的展现，这时候我们就需要一个展示景物的场景，three.js也为我们封装好了，如下所示可以创建一个场景：
渲染器是webgl的渲染启动开关，他可以调用render方式把场景渲染到摄像机。
three.js加载资源不同我们常见的html一样，直接通过src属性加载，而是通过TextureLoader.load来加载资源。
素材常见的包含网格，灯光等许多元素下面我就举个例子
http://www.sunql.top/webgldemo/index.html
https://github.com/sunql0827/webgldemo.git
https://gitee.com/sunql-hugh/webgldemo.git
通过这次基于three.js的webgl全景图开发之旅为我对视图渲染打开了一道新的大门，不过webgl的厉害之处还有很多很多是我还未涉及到了，以后还需要更加努力了。
