有时候你是否也想通过web技术实现很炫酷的3d效果呢？
1.常用object（对象）介绍以上的靓图均为three.js 官方demo截图，本章节将带领同学们入门three.js的基础概念，不涉及代码知识，主要实现途径可以关注后续手记，感谢支持。
什么是three.jsthree.js 是最近几年火爆与github的JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能，现阶段多用于H5页面展示。游戏开发领域个人认为还有待后续发展，但是three.js 令人激动的三维效果任然值得身为开发者的我们为之兴奋不已。
| 对象名 | 介绍 |
|---|---|
| plane（平面) | 作为地面的二维矩形。渲染结果是屏幕中央的一块黑色矩形 |
| Cube（方块） | 作为一个三维立方体 |
| sphere（球体） | 作为一个三维球体 |
| wireframe（线框） | 作为一个线框 |
| camera （相机） | 相机决定着你所能看到的输出结果 |
| Axes （轴） x,y,z | 辅助线，用于调试 |
| scene（场景） | 变量场景用来保存跟踪我们想要渲染的物体 |
| rendered（渲染器） | renderer对象负责计算指定角度下的浏览器中的scene（场景）的样子 |
| material（材质） | 三维物体的渲染材质 |
| stats (状态) | 在这里特指FPS帧频 |
| mesh（网格） | 三维网格 |
| Geometry（几何体） | 一般用于创建几何图形 |
2.常用方法
| 方法名 | 介绍 |
|---|---|
| reuestAnimationFrame() [HTML5api] | 用于执行renderer的动画操作 |
| setClearColorHex() | 函数告诉renderer的背景色 参数格式（十六进制颜色） |
| setSize() | 告诉函数renderer将scene渲染成多大尺寸 参数格式（int） |
| lookAt() | 告诉camera（相机）应该看向什么地方，即让相机在指定点上面聚焦 |
| stats.update() | 刷新FPS帧频 |
| THREE.fog | 为整个场景添加场景雾化效果 （color，far，near） |
注：这些方法非最重要的方法，仅仅是作者总结方便同学们阅读three.js 的入门教程
3.sence（场景）的常用方法
| 方法名 | 介绍 |
|---|---|
| add（object） | 在场景中添加对象，或者添加对象组 |
| children | 返回一个场景中所有对象的列表 ，包括相机和点光源 |
| getChildByName（name） | 创建一个对象时，可以通过name 属性为他指定一个独一无二的名字场景方法提供了这样一个可以直接根据object名字返回对象的一个方法 |
| remove（object） | 如果你在场景中引用了一个对象，那你可以通过这个方法删除他 |
| traverse（function） | children 属性返回场景中所有的子对象列表，通过一个traverse传入一个function 同样可以做到 |
| fog | 通过该属性可以设置场景的雾化效果 |
| overrideMaterial | 通过这个属性，你可以强制场景中所有物体都使用相同相同材质 |
1.网格对象和函数属性
| 属性名 | 介绍 |
|---|---|
| position（位置） | 决定该对象相对父对象的位置 一般来说父对象是sence对象 |
| rotation (旋转) | 通过这个属性可以使任何一个对象绕任何一个点旋转 |
| scale(缩放\比例) | 通过这个属性可以沿着x,y,z 缩放当前对象 |
| translateX （amount） | （X轴平移） 沿着x轴将对象平移到指定的距离 |
| translateY （amount） | （Y轴平移） 沿着y轴将对象平移到指定的距离 |
| translateZ（amount） | （Z轴平移） 沿着z轴将对象平移到指定的距离 |
| position.set (x,y,z) | 可以一次性的设置x,y,z |
之后会为大家罗列 three 的 相机、高级几何图形、光源、材质的常用属性和方法
随时随地看视频
