3D渲染three学习资料整理及实例
以下有些资料是从网上学习，然后整理的，还有一部分是自己写滴。
分享给你们希望大家都能在这条路上走的顺利一点~
这里我先附上一个简单的实例代码，以后有机会把海上小船实例附上，我先放到资源里了。
这个调研就用了两周调研写实例写报告，然后就因为项目原因被打断了。。。其实还挺喜欢的，有机会继续学习。
（我天呐复制过来成这样子了，赶火车先这样吧）
一、实现Web3D技术的方法介绍
如果是简单的3D效果可以通过css来实现，但若是功能较多则须用HTML5+WebGL来实现。目前网上很棒的网页3D技术效果基本都是由其来实现的。
1.关于WebGL
1.1WebGL基本介绍
WebGL是一种3D绘图协议，它是通过JavaScript编写的一个绘制2D 和 3D 图形的 JavaScript 接口，需配合HTML5的canvas标签使用，允许使用GPU 来为HTML提供硬件加速渲染，以次获得更好的性能（软件渲染和硬件渲染的流畅性差别很大）。它基于OpenGL ES（行业接受范围最广的一种3D图形规范），其中的着色器由一门叫做GLSL（一种类 C/C++ 的强类型语言）的语言写成。有一个很好的封装库three.js。
由于WebGL是由js实现的，所以免去了安装开发网页专用渲染插件的麻烦，可以创建各种复杂的3D结构网页，还可用于设计3D网页游戏，开发VR等。
1.2浏览器支持
目前Chrome、Firefox、Safari和Opera的桌面和移动终端版本都已经支持WebGL标准， 采用iOS系统需要iOS8及以上版本，采用IE浏览器须IE11及以上版本才支持WebGL。
如果非要使用IE6，IE7和IE8等老版IE浏览器，或者因采用老产品及机器而无法升级到IE11，则可以考虑安装Google Chrome Frame插件，页面就会采用Chrome来渲染。
但Google Chrome Frame有很多不支持的地方：
1.不支持直接从本地local file方式打开页面，必须把页面部署到Web服务器发布方式打开。
2.不支持64位的浏览器。
3.不支持iframe方式（可采用嵌入OBJECT元素，绕开Google Chrome Frame不支持iframe的问题）。
并且Google Chrome Frame于2014年1月停止支持和更新，但目前Google Chrome Frame已发展到31的版本， 这个版本已满足2D和3D所需的Canvas功能，因此可以采用Google Chrome Frame解决老IE的部分问题。
2.关于three.js
2.1.three.js基本介绍
three.js是基于WebGL封装的一个绘制网页3D效果的库，封装了很多很棒的效果和实现方法，如果没有很好的图形学基础，且数学物理功底又不强，想要直接从WebGL入手实现3D效果基本上是不可能，光一个透视的光照阴影生成可能就要琢磨好久，还有在线性代数的矩阵运算过程中还强调它的物理意义，想想就头大。
但three.js已经为初学者准备了一切，它功能强大、稳定且免费，通过它我们可以很方便地实现很多炫酷的3D效果，不过也由于是免费，所以网上的API不全，官网手册还有很多地方未填充，也有些许小错，且目前介绍three的书就一两本，而且介绍的很基础。
所以three的学习基本就是先去视频学习网站查看免费基础视频入门，了解了基本实现方法后，再靠查看官网的demo进阶，不过当你遇到一些更深的东西或者想实现demo的类似效果，可能还要查看WebGL，OpenGL和GLSL的知识。
二、运用three.js+html5实现3D效果
1.three入门基础理解
入门three首先需要搞懂
渲染器、场景、镜头、灯光，
再懂得建模、贴图、材质、带材质导入模型，搞懂后基本就可以看着API 和 DEMO 直接上了。
1.1渲染器|场景|镜头
首先介绍下渲染器、场景、镜头。我简单介绍下：
1. 渲染器renderer：three中将3D或者2D效果展示在二维平面上。
2. 场景scene：显示一个3D效果所需要的场地，在此场景下放入各种3D物体。
3. 相机camera：查看场景的视野（可控制在3D场景下的视野方向和距离）
如上三个方面是实现一个基本的3D场景所必须的要求。后附图加强理解。
1.2灯光|模型|材质|贴图
灯光light：给场景放置各种样式的灯光，平行光、环境光、点光源等，想让一个场景有更好的展示效果可放多个光源。
再说一下模型。
three可以将3D建模软件建的模型导入到网页中显示，大多数人最熟悉的建模软件应该就是3D MAX和MAYA了。
three支持导入各种模型文件，基本全覆盖，我觉得最好用也最多见的是.obj文件，obj文件是支持基本所有的建模软件之间互导的文件格式，且其很常见，如果只是建个demo可从网上下载此类文件入门，很多见，就算下载的是.max文件也可以通过模型文件格式转换软件将其导出为.obj文件使用。
一般模型要是有材质的话，导出obj还会生成一个.mtl文件，这是模型的材质，通过向场景中添加obj和其mtl文件再渲染一下，就可以将模型在网页上更生动的展现了。
关于材质和贴图。
材质就像是物体的皮肤，决定了物体的外表，他有很多属性，基本属性类似名称、是否可见、是否透明等。还有融合属性，物体与背景的融合方式、融合公式等，融合属性不常用。还有高级属性，更不常用。除了以上的通用属性，three还有很多不同材质的不同属性，比如金属材质的放射光颜色、折射率、反射率、着色类型，点材质的衰减，基础材质的颜色、线性渲染、是否受全局雾化影响、顶点颜色、纹理贴图、高光贴图等等等等，
各个定义好的材质之间的属性也会有交叉，详见API，这部分貌似挺全的。
通过以上介绍就会发现，贴图其实是材质的一部分，意思就和字面一样，在物体上贴上你想要的图。
1.3图片理解three基础
2.three入门小实例
2.1工具准备
推荐前端编辑器WebStrom。
官网源码，基本的three.js及相关js。
2.2入门实例注解
1.引入js文件：
2.添加场景：
3.添加相机：
//PerspectiveCamera(fov, aspect, near, far)是透视相机
//- fov 可视角度
//- aspect 为width/height,通常设置为canvas元素的高宽比。
//- near近端距离
//- far远端距离
//只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到。
4.添加渲染器：
渲染：
本只需renderer.render(scene,camera);就可渲染，但为了以后添加一些效果，就通过不断重绘套方法来写。
添加完上面三个后基本场景就实现了，现在可以往场景中放置物体和灯光了。
5.添加一个正方体：
这是three封装好的方法：
6.添加一个平面：
7. 添加光
为使模型效果显示的更好，我们添加两种光源，环境光和平行光。
8.加载obj模型
需要引入相关js：
添加代码：
哦忘记了，上面添加的平面和几何体都需要scene.add()一下。完成上面的操作后你就获得一个基本的3D小场景了。如下图所示：
了解了如上步骤，基本就入门了，想要更进一步的效果就去看demo学习吧，不详细描述了。
3.three官网及API
官网和Demo：
API文档：
有些描述并不详细（甚至需要在懂 WebGL 等其他知识的前提下才能了解某个术语的意思）
https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
Three.js中文文档（简直福利）
http://techbrood.com/threejs/docs/
gitHub上超多的three入门demo：
http://stemkoski.github.io/Three.js/
4.three基础学习网站：
webGI中文网：
XX学院的three视频教程（很基础也没什么好看的，刚入门可以看看巩固下）：
http://www.jikexueyuan.com/course/threejs/
Three.js分类下载：
http://www.bvbcode.com/cn/tc9z5m0r
我自己整理的资料，海上小船运动实例代码+three.js相关源码工具包+前端开发工具+obj模型
https://download.csdn.net/download/shmjiao/10332523
5.obj模型下载网址：
（建模最好还是让专业人员去做）
很多素材，注册一次可免费获得7天VIP不限量下载
（感谢！）
普通用户每天只能下载两次，点进去就相当于下载（坑）
其他网址你们百度吧……
三、css制作简单3D效果（小插曲）
纯css制作3D效果图，一正方体上下翻转，学习自制的纯css的gif图效果附在gif文件夹中，css可完成简单的3D展示，在一些场景下就可很方便地实现有趣的效果，有兴趣的可百度。
2610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
