ThreeJs 3D 全景项目开发总结

本文来自网易云社区

作者：唐钊

项目背景

那是在一个毫无征兆的下午，我还沉浸在 vue 的世界中，突然编辑跑过来说N的新官网想做一些3D全景的东西，一开始其实我的内心是拒绝的，一是没怎么实质性做过 WEBGL 的东西，只是组内 mini 项目的时候看了看基础的内容，再者当时也很忙，感觉这东西听起来就很复杂，随着项目开发结束在此写下这篇文章，记录一下自己在开发过程中遇到的问题和解决的思路以供备忘。

准备工作

开发使用： WS、threejs-r82，3DsMax;

最初遇到的问题：其实3D 全景其实并不一定非要使用 webgl，css3同样可以做到，但是考虑到后续要增加模型动画的问题，所以不得不用 webgl 了。那么 webgl 到底是什么呢？WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。由于webgl是基于OpenGL和JavaScript技术结合，而OpenGL与微软DirectX存在着竞争关系，而且微软自身也开发了Silverlight插件，与webgl其实是类似的，所以微软对webgl技术并不支持。但是最新的 IE11和 edge 浏览器是 ok 的。所以一开始的难点就在于怎么去构建这个3D的场景和内部的模型动画等。（特此说明：本文不会讲解 threejs 的基本知识，所以以下内容需要一定的 webgl 基础，见下面链接）

threejs基础知识详解

先安利一款 chrome 的 threeJs 插件 https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi 贼好用！

开发中碰到的问题

整个场景分为3大部分，最外层的天空，中间的建筑，以及内部的各种灯笼，蝴蝶，鱼等等模型动画，所以我们需要分布考虑各个场景如何构建，首先是最外层的天空和建筑，因为 N 项目组有特殊的场景编辑工具，可以非常方便的输出场景的鱼眼图，所以我打算利用这个鱼眼图直接构建一个球形，也就是构建了2个球形，一内一外，分别为天空和建筑，让天空的球形做围绕 Y 轴的TWEEN动画，形成天空在转动的效果，同时内部的建筑使用 png 贴图，对材质增加 transparent:true 的选项，让天空可见，如果你不加透明度这个选项，png 贴图的透明部分是会变成白色的。
外面两层的球形模型很好搭建，接下来的问题就来了，如何做模型动画，因为大家都从来没做过，所以一开始我是一筹莫展，因为这个玩意压根不知道从何下手，后面了解到模型动画需要由专门的动画师去建模然后贴图并且制作动画，导出相应的文件由前端放进场景里面去，所以我就兴致冲冲的让游戏那边的动画导出 dae 文件给我，为什么导出 dae 呢，因为我看 threejs 的示例里面是用的 dae 的模型，所以当时想当然的认为只要导出 dae 就能放进去了，事实证明，我还是 too young too simple. 为什么，我看着官方的示例那天下午一遍一遍的问自己，为什么我的就不行，难道我导出的模型就不是模型，于是我又是一顿查资料，那一刻，搜狗百度谷歌全上阵，可是依旧苦苦无果，打算去研究官方的 dae 文件，可以导入max发现全乱掉了，根本没法下手，终于在第二天中午快要吃饭的时候在一个 max 论坛发现一个哥儿们的一段话让我们恍然大悟，他的原话我记不清了，不过中心意思就一个：web 所用的 dae 文件需要模型全部塌陷以后重新撘骨骼，并且不能用镜像骨骼，我那个去，敲代码的我肯定不懂这是什么意思啊，但是从这里面肯定说明了直接导出的 dae 文件就是有问题，于是我去问了我们组的动画师，她看了看说：“原来是这样，那我试试吧”。于是我们的动画师开始了各种尝试，给了我各种文件进行导入，一开始模型是可以正常导入了，但是动画总是不对，要么骨骼信息各种丢失，要么就是各种奇葩的抖动频率，我们再一次被打击了，后面再查文档时发现 R7X 以上的动画调用和 R6X 的发生了变化，于是我进行了一定的代码更改，oh my god 终于在场景里面看到了一个活的模型了，接着我们又开始研究贴图和自发光问题。
总的来说上面这一部分是当时最打击信心以及最费时间的一部分了，因为吃螃蟹总是不容易的，不过后续发现还有很多其他的问题等着自己，首先是模型由于没有灯光，显得很暗淡，所以需要增加一个光源，由于场景里面的背景是一张图片，如果增加一个照射范围很大的光源势必会影响到图片，会改变图片的曝光，所以只能去研究模型的自发光，后来发现还是比较简单，需要动画师给我一个合适的色值，设置自身的 color 和 emissive 即可。
场景中的花瓣采用的是粒子发射器生成的随机粒子，添加花瓣的纹理，花瓣的降落由随机数生成在一个合适的值。但是由于粒子本身是没有 XYZ 的，所以没法做旋转。
场景中的贴图由于 webgl 的同源策略，所以不能在跨域的情况下使用贴图。
场景中的字体问题，在 threejs 中默认是不支持中文字体的，只能使用英文，原因嘛，你懂得，中文字符太多了，所以如果项目中需要在场景中使用中文，可以参考该文章地址,另外如果不是非得使用最好还是用英文吧，因为这加载的都是流量啊。
最后是场景内的鼠标事件，如果你没有做过你一定会一脸懵逼，因为这里面根本没有什么 click 事件，就比如一个鼠标移入到可点击物体上变成手型都不知道怎么搞，然后找资料，知道了ThreeJS提供了一个 raycaster的API用于返回用户光标所在位置的所有3维元素，它的实现原理是在屏幕上某个二维坐标点与相机位置和视角形成的向量方向上投射一条射线，返回与射线相交的所有三维物体的集合，集合的第一个物体为距离相机最近的物体，最后一个则为离相机最远的。当使用拾取器去获取用户点击的物体时，需要事先将所有可参与用户交互的三维物体放到一个集合里。在创建拾取器后获取两个集合的交集，即当前用户在屏幕点击的位置上所有被设置为可被选择的物体，第一个即可视为用户直接点击的物体。所以在场景内部的所有交互都只能通过射线的方式去完成，当然 github 上也有一些封装的场景物体点击的事件库，其原理也是基于射线。但是由于上面提到的 png 贴图问题，我让动画师将交互对象也做成了动画模型，然后我就发现为什么我的射线发射过去没有交集了，一开始以为是我鼠标有问题，但是后来重现了几次发现确实是动画模型就不行，普通的 mesh 就 OK，那么问题就肯定在动画上面了，去 github 上找了很久看到了有人和我有同样的问题。传送门，回答者说skinnedMesh 已经从射线集合中移除了，老版本曾经有支持，所以我只能想想其他的方法，最后采用了在动画模型前面添加了一个普通的 mesh，将其透明掉，这样射线就有了交集。能完美的点击到了物体。

最后的话

至此整个场景内部的物件基本上交互的功能和动画功能都 OK 了，但是还有很多之前研究的内容最后没有放到整个项目中去，比如摄像机的移动旋转，场景更浓厚的气氛渲染，一是受限于web 浏览器，说实话 web 上搞3D 本来就不是太好，又卡消耗又大，而是确实时间也不长，前前后后所有的算满也才26天，这其中还要花很多时间整合双端的新闻发布系统，还要做其他的整合适配等等，所以后面空了还是要再看看 threeJs 的东西，增强一下自己的技术栈，同时更深入的理解 webgl。

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区