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 来运行测试用例

代码语言：javascript复制

 "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的使用,以及效果的预览.这里是官方的案例链接

如下图