一个ThreeJS的毕业设计及一点思考

零、毕业设计

先扔链接，围观地址ThreeJS在线建模系统。主机在美帝，请稍耐心等候加载。

这是一个简易的三维建模系统，设计目标是能完成基本几何体或外部模型的基本变换、纹理变换，并能完成模型的导入、导出，截止3月7日，本项目还在开发中。本文主要讨论开发至今的一些思考。干货巨少，行文幼稚，喷请绕路。

一、关于ThreeJS

首先是这个库的状况。ThreeJS应算是一个非常主流的Javascript 3D库，并不能说它不完善，功能上来说确实挺强大，不过变动还是比较大。整个开发过程中比较蛋疼的其实是各版本之间功能的不兼容，大抵比较新的js库都有这个问题？但大量的功能变动导致前人的经验很难积累。大家上淘宝搜的话，ThreeJS相关库的教程应该是清一色的《ThreeJS开发指南》，我也买了一本，美国人写的，印像中是15年成书。就内容来说，这本书十分优秀，也配套了丰富的例程，在整个开发过程中给了我莫大的帮助。另一方面，随着开发深入，我逐渐发现一些高层的功能或是被砍，或是更新，书本所用的例程早已显得过时。现在已是基本扔了书本，完全依靠官方的文档来进行开发（官方文档倒是很详尽，赞一个）。

这就来到了我们的问题：我自认为确是一个爱出风头的人，非常愿意通过发点技术文来蹭蹭人气，但我同时也担心自己写的东西过几个月就被改掉了..过时的内容被借鉴有时反而是耽误别人的。我就被自己买的书带进了一个老思路，为了适应新版本一路改代码改进源码里，发现坑越来越多，遂放弃。同样地，如果我要作出技术选型，估计这些变动也将影响我的好感吧。我甚至还在翻译一本13年的教程，随着开发深入我已经感觉非常蛋疼了，老东西实在太多...

综上，再加上官方是英文，相信这个库一时还是难以普及开的。英文文档我自己读自然没什么问题，但真的要知道市场上多的是四级没过看到英语就头大的人。

二、这货的性能，以及我国网速

上面说到我正在翻译的13年的书本，开头一章就是说Javascript的3D库最大优点就是跨平台啊，反正有浏览器就行，而且底层有GPU支撑所以速度还是很快的。这么说也不是没道理，最初我去围观官网demo以及在自己项目开发的前期，我也有种哎呀这东西性能看起来还能用嘛的感觉。最近写到导入外部模型的功能，跑了几个.obj文件，几百k的没什么问题，要是去到几M恐怕就有点蛋疼了（而这个模型大小并不夸张）。决定因素暂时来看还是一个帧内画面的细节量，不过我也还没着手去优化（目测可以用THREE.GeometryUtils.mergy()把模型Group里的所有geometry整合到一起，这样会失去单个geometry的独立性，于是接着要上贴图了...要不把抗锯齿关了？）。

我上面这样说可能有点黑了，不过Three目前来说还是只能做一些比较小的东西，至少也是每个场景中的东西不能太多。另一方面原因，模型和材质贴图真的很大啊，一个2D的游戏任由你挥霍也不过几M吧，这边一个min库就有500k，光几个.obj就能轻轻松松上到几M，我知道大家手机都有4G了，但即使是在PC上，我也不太敢放出一个视频一样大的页面让大家等加载..这个缺陷需要设计和开发共同协调，通过设计弥补技术所不能，我以前倒也确实见过成功的小案例分析。

这里顺便扯一下阿里去年吹的VR购物，有个印像很深的案例是“亲亲节”（是这名字吧？）的3D页面。用的不是ThreeJS，印像深主要是它的设计很有想法，虽然场景是3D的，但里面绝大部分对象都是纸片形象，实际上还是2D。所有对象摆成一个螺旋状，用户慢慢的旋转上去看，这种扁平化并没有带来粗制滥造的意思，反而有点特色的味道。我猜这些纸片形象说不定就是个SVG，这样几十个模型下来也不会占多少空间。

三、开发者们

既然用了Javascript，性能多少是不如C++那么好啦，这个自然是可以理解的。Javascript本来也是有点简单友好的意思。不过这个库恐怕也不是学了点Javascript语法，能面过些公司的前端就可以驾驭的，多少还是要补充点图形学的知识。在这里感谢一下我大四的3D游戏开发老师刘东峰，尽管上课好像不太备课以及查bug速度太低，但还是教给我不少图形学方面的基本理念。当时学习的是osg和delta3d，用起ThreeJS时感觉很多思路还是挺接近的。

还是举例子，当时在c++代码里有用到一个智能指针，好像是基于引用计数的，目的是及时释放不用的内存块。来到Javascript里，很多较初级的前端恐怕并没有内存的概念，各种对象随用随走，内存泄漏自然不在话下。以前一般的页面泄漏就泄漏了，反正也没多少，用一会就走了，去到单页app时代逐渐开始引起重视，毕竟使用时间要长出不少。到3D页面下泄漏就是一个很严肃的问题了，一个模型就是几M，谁经得起这样的折腾。ThreeJS提供的方案也很简单，就是提供.dispose()方法，不用了就调用来删除。然而这一点都不智能。我读了很多关于ThreeJS的教程，似乎没有任何一份对此有提及。

所以说有志入此坑的同学还是要多去补习图形学的开发知识和模式。ThreeJS是一个很优秀的库，但如果没有配套的相关知识，写出来的东西也就还是个玩具，给点压力就容易跪。

四、开发成本

简单提一下。3D比2D多了一个维度，带来的是信息量的大增。如果你有意开发一个3D项目，最好先权衡一下有没有必要引入多一个维度来表达你的信息。VR每年都是元年，但大部分人获取信息的渠道还是手机电脑，屏幕依然是二维的，引入一个三维空间并不见得易于操作。当然你说新鲜嘛那是没话说，所以游戏行业总是很热情去拥抱三维的。

去年宝可梦火的时候我正在一外包公司混日子。一时间各种策划纷纷把三维页面/游戏的需求摆了过来。我们的设计是动画出身，即时表示不实际：做一个三维模型比画个平面图难太多了，制作和修改也都很费时间，成本呼啦啦的上去，模型师并不想给你做这种用完即扔的东西，你也并不觉得一个模型值那么多钱，大家不开心。至于开发，当然是2D简单啊。而且服务器压力都差几倍好么。

有的策划表示我就要个公仔出来摆摆手打声招呼就可以，很简单啊。那还要什么自行车呢，直接做段CG不就好了..ThreeJS这类JS图形库，固然有优秀的跨平台特点。但视频也跨平台啊。我觉得问题根本应该是，它是高度可交互的。什么东西需要跨平台（任意设备可用）、三维（有空间信息）、高度可交互？页游？这不是ThreeJS本身需要回答的问题，但我想这就是它应用的方向。