网页html做捏脸站,[技术研究]想做Web 3D捏脸？看了这篇文章你就会！

原标题：[技术研究]想做Web 3D捏脸？看了这篇文章你就会！

游戏里的人物捏脸见的多了，网页里的捏脸见过么？

3月6日完美世界手游上线，前期需要一个预创角营销活动进行预热。与以往预创角活动不同的是，这次我们采用了Web 3D捏脸的形式为活动创造亮点，也取得了相对不错的数据。这也是我首次在项目中实践Web 3D技术，边学边做，学到了不少东西，也有一些心得体会。

本篇文章作为项目总结和经验心得分享出来，希望能对Web 3D捏脸技术感兴趣的同学产生帮助。

目录：

项目展示

前期准备

捏脸技术实现

排期建议

Web 3D展望

一、项目展示

活动已经结束，我截取了核心的3D捏脸部分单独生成了一个DEMO页面，大家可以先扫码查看项目效果：

我同时也录了一小段视频：

3D捏脸在游戏中已经属于很常见和常规的操作，但是在H5中实现，可能是业界首次，相对比较新颖；加上负责资源推广的同事给到了不错的资源推广，两两相加，产生了相当不错的数据效果。

二、前期准备

相对传统H5，这里会多涉及一些3D方面的技术，所以前期在工具上需要准备至少下面3个：

1：Three.js：

一个 Java 编写的WebGL库，可以方便的实现很多 3D 功能，你可以简单粗暴理解为WebGL方面的 jQuery 。

2：3DS Max：

游戏研发侧给过来的 3D 模型 .max 源文件需要用 3DS Max 来打开进行编辑，所以也需要安一份，就像写页面需要安 Photoshop 一样的道理。

3：sketchfab.com：

网站上提供了很多素材，但是我们需要的是它提供的在线编辑器功能，编辑器有很多功能比3DS Max内更方便，但要注意免费用户如果需要下载你编辑后的3D模型需要进行发布，而发布意味着其他用户也能看到你的模型。

除了工具，还需要游戏研发侧提供相关的3D模型以及数据：

1：人物3D模型：

需要给到面部绑定有骨骼和蒙皮的 3D 人物模型源文件，一般是 .max ，但也有可能是其他 3D 工具制作的模型。

如果有身体部件需要动态更换(如挂饰动态切换)，还需要提供到相应的部件源文件。

2：面部贴图素材：

除基本的面皮外，眉毛、胡须、腮红、纹身、眼影、唇彩，这些部位的贴图也需要单独提供，用于动态更换时做面皮的合成，后续会讲到具体用法。

3：捏脸参数：

因为需要和游戏内同步，所以相关参数也需要给到，比如嘴唇大小一共有0-31档可调整，那么每一档调整的幅度时多少，调整的方式是什么。

4：捏脸数据导出格式：

最终捏脸数据是需要导出后给到游戏内适用，所以捏脸参数最终导出的格式需要和游戏内保持一致，具体数据格式规则需要在Web端同样实现一套。

三、捏脸技术实现

1. 利用 Three.js 搭建场景、镜头

Three.js的 3D场景、模型均通过WebGL渲染在Canvas之上，引入Three.js后，首先需要把场景、摄像机、灯光、渲染器运行起来，基础代码每一项就几行，使用不同的对象方法可以达到不同的效果，具体更多的使用方法可