Three.js 学习历程与总结

做惯了2D的平面web设计,我突然对3D技术产生了浓厚的技术,不仅仅是因为那炫酷的效果,更是因为它用途的广泛性,随着软件编程的社会分工越来越细化,以后3D开发也有可能会从前端的大范畴里独立出来,作为一个很吃香的职业.这也不是不可能的.诚然,3D必然比web设计复杂,很多,多了一个维度的嘛.有人说,我2D开发都在做不好,怎么去做3D的开发那,但我想问你一句,你炒菜不行,就能代表你饭煮的也很差吗? 我看未必吧...... 而且随着信息技术的深入,一些传统行业的改造在使用现有的web技术以及显得很吃力了,必然工业组装的可视化,物联网.在线模型编辑....随着信息技术不断对传统行业的渗入,那么必然会有一场对现有web技术的考验,是故步自封,还是从现在开始迎接改变...势必会成为web前端开发的分水岭.未雨绸缪,现在和我一起开始学习3D技术吧.

初学Three.js没有啥好方法,因为这东西不是学几个api一时半会就能做出很符合实际使用的案例.所以如果你抱着像学jquery那样学习Three.js 必然会遭受大挫.甚至一蹶不振.下面介绍一下我学习Three.js的历程,已供各位参考.

首先,github仓库上下载最新的版本.使用vscode编辑器打开.了解这个库都包含哪些内容

以上就是从github下载的库,目录如上.

其中build是用于库编译的目录,用于生产,没有注释.

docs是Three.js的文档,

editor是一个官方的3D编辑器,运用于web浏览器

examples目录包含了很多案例,都是开发者提交到官方的,被收录的,我希望有一天我的 案例也能出现在这里,供人参考,学习

files目录是案例用到的一些文件,图片,字体,svg,css....

src目录存放的就是Three.js的模块,分散在各个文件夹中,使用typeScript编写,最后在打包到build以供使用.阅读源码其实阅读 的就是src中的代码.有注释,结构清晰,分层明确. 编译使用npm run build. 编译是使用到的是rollup这个库

test是一些测试案例.可以使用 npm run test 来运行测试用例

"scripts": {

"build": "rollup -c",

"build-test": "rollup -c test/rollup.unit.config.js",

"build-closure": "rollup -c && google-closure-compiler --warning_level=VERBOSE --jscomp_off=globalThis --jscomp_off=checkTypes --externs utils/build/externs.js --language_in=ECMASCRIPT5_STRICT --js build/three.js --js_output_file build/three.min.js",

"build-examples": "rollup -c rollup-examples.config.js",

"dev": "concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c -w -m inline\" \"http-server -c-1 -p 8080\"",

"dev-test": "concurrently --names \"ROLLUP,ROLLUPTEST,HTTP\" -c \"bgBlue.bold,bgRed.bold,bgGreen.bold\" \"rollup -c -w -m inline\" \"rollup -c test/rollup.unit.config.js -w -m inline\" \"http-server -p 8080\"",

"start": "npm run dev",

"lint": "eslint src --ext js --ext ts",

"test": "npm run build-test && qunit test/unit/three.source.unit.js",

"travis": "npm run lint && npm test"

},

"devDependencies": {

"concurrently": "^4.1.0",

"eslint": "^5.16.0",

"eslint-config-mdcs": "^4.2.3",

"eslint-plugin-html": "^5.0.3",

"@typescript-eslint/parser": "^1.9.0",

"@typescript-eslint/eslint-plugin": "^1.9.0",

"typescript": "^3.4.5",

"google-closure-compiler": "20190415.0.0",

"http-server": "^0.11.1",

"qunit": "^2.9.2",

"rollup": "^1.10.1"

}

如果对编译过程和具体使用的库感兴趣,可以再npm官网搜索devDependencies下的每一个库,了解每个库的作用,看看在哪里引用,又是怎么使用的.

剩下的文件就是一些,git,eslint,rollup...的配置这里不做一一解释.

了解了文件目录及其所包含的内容后,就会有个大概的轮廓

接下来如果有能力就去直接看src下的文件 了解大致模块,主要方法 这是对于有你能的人来说的.

那么源码理解能力弱一点的同学应该如何去学习那. 看文档和Demo吧

从github下载的文件里也是包含文档的,就是docs目录,可以将其整个目录放到web服务器中,进行访问,由于国外的地址一直很慢,我就把文档在我的服务器部署了一个,地址为国内Three.js文档(建议保存书签,以备查看)

学习思路就是看文档和demo

具体来做就是

文档大致浏览一遍,两遍,三遍,四五六七遍,头几篇看文档不需要逐字逐句去看.那么多文档,你也不能一下子记完.先去了解一些基本概念,比如摄像机,渲染器.点,光线....

文档看了几遍后,就去看demo了,example文件夹里有很多优秀的开发者提交的案例.能够帮助你快速了解api的使用,以及效果的预览.这里是官方的案例链接

如下图

demo也是 分门别类的. 动画,摄像机,裁剪,效果,多立方.......

研读一个demo的代码要比研读库的源码的要求低的多,

阅读demo代码时,不一定要句句理解透彻,但涉及到的每个api,它的参数,以及作用都要掌握住,要不然你看demo就是没有任何收获的.

举个例子,第一个例子草原上随风飘荡的白布 它的右上角有一块合适区域, 看到这里,我们既要向,这个东西是干嘛用的,

在胡乱操作后,我们发现这个黑色区域是用来控制是否有风,是否显示球,是否将白布调制成一个支点. 知道了作用之后我们就要去寻找相应的代码, 在寻找代码的过程中我们要注意页面内的所有