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就是没有任何收获的.

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

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

再拿上面这个例子分析一下

他在页面内引入了这么几个库,那么你就要进去看卡这些库,是一些什么库,有什么作用,或者直接百度一下,不难发现

stats.min.js 就是控制左上角的显示帧数以及页面渲染时间

有兴趣的同学可以搜索一下dat.gui.js 一个随时在页面上调整参数的js库非常好用

本期学习的大致思路给大家讲解完了,下一期我就拿具体的案例来讲解学习demo,阅读文档的技巧和方法.demo的讲解我打算从官方抽取几个简单和中层次的来为大家一一讲解. 如果你有看不懂的案例,也可以发给我,我来为你分析解答.后续内容敬请关注.

稍后的demo讲解我会了一个清单出来. 谢谢阅读,如果对你有帮助,请点赞收藏.如需讨论请在下方留言.

Three.js 学习历程与总结相关推荐

我的前端学习历程，你认同吗
我的前端学习历程很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了.这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话"在成长的道路上,我们不要给自己 ...
详细：JAVA从入门到精通视频教程，后台学习历程
详细:JAVA从入门到精通视频教程,后台学习历程 ==基础部分由于百度分享有时效性想要免费资源的请加645969403 1.java基础:高琪java开发300集链接:https://pan.b ...
如何探索一门未知领域新技术？看腾讯前端高级工程师的学习历程
作者:黄丹华,腾讯公司前端高级工程师,爱好Node.js研究开发,并基于自己的学习写一些心得体会,同时喜欢基于自己的一些所见所闻写一些互联网思考的博文.2011年进入腾讯做前端开发,现在主要是基于PH ...
asp.net2.0学习历程菜鸟到中级程序员的飞跃【月儿原创】
asp.net2.0学习历程菜鸟到中级程序员的飞跃 --30本好书点评作者:清清月儿主页:http://blog.csdn.net/21aspnet/ 时间:2007.5.1 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
程序员的高速学习法——以JS学习为例，进行图解
近期一直在忙着学习,感觉做总结的时间太少了,听起来挺好玩儿的,就像<倾城之恋>里面.范柳原说:那时候都忙着谈恋爱了哪里有时间恋爱. 学习和总结也是一样.不能一直忙着学习而导致自己没有时间 ...
python学习历程-安装篇（一）
python学习历程-安装篇之前工作中数据量很少,每天也就是用excel发一下报表,函数已经足够应付工作内容,但心里一直渴望学习更深层次一点的数据分析(崇拜那些技术大神),网上看了很多有关数据分析挖 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...

Three.js 学习历程与总结

Three.js 学习历程与总结相关推荐

最新文章

热门文章