让网页的代入感像玩游戏一般：三维模型在web中的运用

此文已由作者张帝授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

  遥想3年前开始做网页动画这一行，在页面上加个树叶飘动就觉得炫酷十分了。而如今不仅要在版头上加入各种AE特效的动态背景，结合技术制作交互动效，还得把产品游戏内的三维模型搬入网页内。这就向我们做网站动画设计师提出了还需要掌握处理三维文件，合理拆解给到技术去使用的能力。

那么我们该如何去和游戏项目组要到合适的三维模型素材来供我们使用呢？

理解web三维制作：使用3DMAX处理提供的模型文件，利用插件导出JS代码顶点属性文件，加上贴图，让技术利用canvas在web上实现效果。

战意品牌站三维模型使用心得：

以下是我整理的一份素材需求规范，以战意品牌站地图模型素材为例：

素材提供规范：

（模型和贴图需要能看到全部3个领地地貌的地图范围。）

1. 3DMAX源文件（如果是max做的模型，请提供源文件方便修改输出）

2. 如果不是用max做的模型，请输出 OBJ+MTL/DEA/FBX ，这3类输出格式文件其一，供我们这边能用max打开使用。（ .OBJ为顶点信息文件，.MTL为贴图信息文件，使用.OBJ请连带输出.MTL文件一起。）

3. 3张贴图

 ·color颜色贴图 分辨率96dpi，尺寸 4096*4096，位深度24，格式jpg。

（尺寸视具体地图范围，可拼合多张使用，例如4张4096*4096的颜色贴图在WEB上拼成完整地图，拼在一起就是8058*8058 ，如需拆分贴图那么模型也需对应拆分成等分的模型文件）

 ·ao高光贴图 尺寸完整显示地图，2048*2048，位深度8，格式png。

 ·no法线贴图 尺寸完整显示地图，2048*2048，位深度24，格式png。

模型文件规范：

（避免顶点信息过多导致网页渲染性能问题）

1.模型需要尽量减面数，控制在5000面内。

2.模型长宽范围在4096*4096以内。

3.模型需要全部塌陷多个对象到单体

4.坐标原点居中到对象，附在模型中央，模型处在世界中心。

（参考用图，此模型面数过多）

输出的OBJ/DEA/FBX 格式的文件可丢入下面的网址查看在WEB上的形态检查

https://threejs.org/editor/

http://blackjk3.github.io/threefab/

具体实施我们让项目组提供了西中东3个区域部分地图，模型和贴图分别都要3部分拼合在一起，按照尺寸再分成2份正方形地面使用，如下图。

完整拼接的我们要使用的地图面貌，在3DMAX中查看效果并旋转角度。

被选中的模型。

按照我们的要求提供的素材格式

最终上线效果动效：

如何搜索提取网页中看到的三维模型：

先在里面搜下是不是用canvas做的，容器在哪，找到这个容器的地址，一般在sources里可以看到top下第一个地址就是，然后在里面搜threejs，找到其中loader进来的各种js的地址，当然这个JS地址前面一般还会有附加分类的地址，所以也要往前看看找到，这样3段就能拼成一个地址，在其中能看到.OBJ的文件名就是 加载进来的模型文件

这个项目需要等项目组提供素材，所以在等待的时间里，找到合适的模型先给技术制作预研，尝试放入模型文件，主要需要研究摄影机镜头的交互移动。

如何在导出OBJ格式时一同带出MTL贴图属性文件：

在导出OBJ时，勾选导出材质和创建材质库，选择材质导出勾选，使用材质路径指定到贴图路径上，最后导出OBJ和MTL两个文件，供技术使用。

雷火AI伏羲实验室官网三维模型使用心得：

这个需求要求使用逆水寒游戏内戚少商角色的模型，并突出科技感和人工智能这一感觉符合，所以我们只使用模型而不需要贴图，并想要再触碰到模型的时候做出一些交互上的反馈。

对产品方提模型素材需求：

1.提供戚少商半身像低模源文件

●不需要提供贴图

●要求模型不能有左右镜像复制

●面数尽量减少控制在5000面内

素材难点：我们只需要用到每个顶点的信息供技术获取转换为点来使用，点过多会导致网页渲染性能问题。

项目组提供角色模型，他们会在zbrsh中优化减面，这个步骤就是一键生成是比较方便的，然后倒回到3DMAX中存为源文件交给我们处理。

减面7000面如下：

减面5000面内如下：

首先要处理模型塌陷，让各个分解的模型部件都组合在一起成为一个模型，这样技术才能统一控制一个物体信息。

修改模型的坐标原点，到控制面板的选择组面板，选择仅影响轴，再选择剧中到对象，这样原点会赋在模型的正中央。

然后到时间轴底部的右侧有个模型位置更改选择，都归0，让模型在整个世界居中。

效果如下，因为给到技术后模型如果旋转轴心不在中心点上是会产生偏移。

修改原坐标朝向，使X轴朝上。

3dsMax的坐标轴是这样的，xy平面为水平面，Z轴为竖直向上。 但是，3d图形学里面（例如openGL）常把Y轴作为竖直向上，把xz平面作为水平面。所以，3dsMax导出的图形的轴向是错误的（虽然可以通过坐标变换来弥补）。

到层次面板，然后选择仅影响，物体X轴旋转-90度锁定。

导出为技术可用的问文件，需要用ThreeJSExporter插件。

因为我们只用到模型的顶点信息，所以只用勾选UVS，导出生成JS信息代码。

在给技术之前也可以先自检，把JS文件放入https://threejs.org/editor/

查看我们的模型是否正确显示。

editor现在支持import多种文件类型，但是不包括3Dmax的.max文件；只支持export为stl、obj和json数据。

这个编辑器也可以做一些简单的模型，输出给技术会比用软件更方便。

3dsmax中怎么把物体渲染成线条：

因为设计师需要制作静态演示稿，所以需要导出一份不包含面的线条框的图。

按f10，打开渲染设置，找到渲染器，在面板上找到强制线框，然后在前面打上勾，调节连线粗细。

把渲染好的图存为带通道的PNG格式 给设计师使用制作静态稿。

放入页面中的设计稿效果

也可以在3DMAX中导出OBJ格式，然后利用AE中的plexus 三维点线面粒子插件，制作动画演示。

最终上线版本效果：

移动端使用三维素材制作动画：

我们还做了移动端的动画效果，考虑到手机运行处理的能力，为了适配更多机型去看到最好的效果，我们还是用是序列帧的方式呈现三维入场动画，

首先还是利用模型在AE里用plexus三维点线面粒子插件中去实现，但是发现完全看不清面部轮廓，辨识率太低，虽然链接线条的效果还是不错的。

最终使用AE的Elenent 3D插件实现最终效果：

在AE中使用 Elenent 3D插件 导入OBJ模型文件进行三维动画制作界面。

点选材质球后 找到 wireframe 勾选enable 就能显示模型勾线了。

输出动画文件，因为移动端使用全屏序列帧动画，会涉及适配拉伸的问题。AI官网的人物模型动画无法和背景分离，因为有发光和叠加模式，而且肩膀也在画外，所以怎么切都会拉伸，我想到了把画面上下做透明过渡，让技术在背景叠相应的深色背景，这样判断屏幕符合宽度就能保证画面不被拉伸。

但是PNG带透明通道的序列帧体积庞大，最后在后面叠上和技术对应的背景颜色输出JPG，这样体积减少一半，又能做到复合宽度 上下改变距离而不露馅。

感谢编辑帆帆 帮忙各部门沟通，带领我们从摸索到完美上线。

感谢两位设计师 战意品牌站的凯捷 和 伏羲官网的凯霞，双凯搭档。

最要感谢我们的技术查马大大，实现以上三维效果官网。

个人心得拙见，如有错误请大佬们指正~~

免费体验云安全(易盾)内容安全、验证码等服务

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 Android 模拟器下载、编译及调试
【推荐】 干货|盘点国内真正的大数据分析产品