three.js汇总,老牌Web 3d展示Js

简述

我把现在的Web前端页面动效分为四个等级
     1: 简单的css,js,jquery的旋转, 缩放, 位移, 淡入淡出, 拉伸, 渐变等效果;
     2: 通过Ae或者其他软件导出的序列帧(或者图片),和一些简单的特效js(大多是canvas);
     3: 通过大量数据(json)来定义的动作,包含(人物,地图等,可包含简单的3d模型,因为一些3d模型也是由json数据组成),
          相当复杂的css(如果css相当优秀可直接无视这篇文章);
     4: 通过大量数据(json)来定义的动作,包含(人物,地图等),美轮美奂项目加分;
     5: 由3d软件导出的模型,定义了动作,再加上前端的配合进行展示.
     不得不说，前端永远是寄人篱下的，如果你遇到一个不配合的ui，或者把ui妹子变成了自己的女朋友（脾气不好的ui），那前端的地位是相当凄惨。众所周知一个页面如果想要动效好看，那必须得配上一个漂亮的ui妹子。
     然后当你终于自学完成了ui设计，网页设计以及一大推ui软件的操作（恭喜你站在了前端顶点），那么，恰巧你们公司想要更好看更逼真的项目，你把目光投向了3d，那么众所周知，你又寄人篱下在了3d建模师的手里。（想想都恐怖，兄弟门不要学前端）

THREE.js简述

three.js完全开源
在githup.com里直接搜就能搜到,完全开源,可以直接下载全部案例,这是three.js的目录

build是存放three.js的地方,但是没有其他的配置文件(如导入3d模型的js)
examples众所周知是例子,里面存放了许许多多three.js的案例,看到你头皮发麻(头发兄,你还好吗?)
小到点,线,面,大到3d建筑模型.
docs存放文档的地方,许多的api接口

浅到十万个点,线,面加载起来不会卡顿,深到ammo.wasm.js物理引擎(物理引擎啊,游戏里面的物理引擎有木有,这学完还不直接封神?没学之前我也是这么想的.)

学习路线

     一, 学习场景,摄像机,灯光
     这三样东西是所有3d模型的基础, three基于webgl直接把这些进行了封装,非常一样,一学就废,非常简单.
     二, 点, 线, 面
     这里有一个坑, three.js为了方便学习和使用, 直接提供了大量的物理模型, 正方体,圆柱, 圆锥等;如果有很深的代码理解或者几何逻辑, 那直接使用即可,如果没有建议还是从点线面开始学习的好,打下结实的基础永远不亏,这波稳赚的好吧
     三, 然后学一些比较特殊的动效(烟雾, 火焰, 波澜, 粒子特效)
     这些东西就有些难度了, 但是可以取巧,以上的几个动效, 其实都是利用图片堆叠出来的, 但是一般人真看不出来,这个动效的逼真程度和效果就主要看ui妹子的漂亮程度和你的编码能力.
     四, 动作的学习
     这里就要学习很多的动作了, 先说最基础的老三样缩放, 旋转, 位移,这个基本一学就废,非常简单,其中包括摄像机和物体模型的,利用摄像机的位移和物体的旋转还是能做出许多好看的动效…
     然后复杂的形变,这个比较难了,是真的一学就废,反正我没学会.心疼头发兄.
     四, 学习3d建模
     这是必然的一些效果, 说实话,人们对于3d的幻想就目前来说已经很离谱了,光2d就有’五彩斑斓的黑’,那3d的复杂程度可想而知.劝君慎重.
     如果真的要入坑,这里推荐Blender建模软件, 学习此建模软件可以去小破站看黑铁骑士blender教程和国外大佬的s操作.
     五, 学习three.js提供的接口
     3d建模会了, 就可以学习利用three进行3d建模, 当你学会了3d建模你会发现, 其实那一个个的模型就是一大串一大串的代码, 不难, 但是"大"啊, 而且细节贼多"我方3的建模师已哭晕在厕所", 虽然利用three.js提供的接口建模会简单, 但还是要心疼下头发,
     three.js是很强大滴, 不光提供了建模用的接口,