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讲解我会了一个清单出来. 谢谢阅读,如果对你有帮助,请点赞 收藏.如需讨论请在下方留言.

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/95765567