|前端如何快速上手 Web 3D 游戏的开发

本文插图
本文以「余额宝3D跑酷游戏」为例，介绍了前端如何快速上手 Web 3D 游戏的开发。跑酷游戏是余额宝七周年的主玩法，用户通过做任务来获取玩游戏的机会并且解锁游戏道具，从而在游戏中获得更多的金币，最终可以利用金币兑换一些权益，同时我们也在游戏中植入了一些礼包，先看看具体效果。
游戏设计
我们把游戏的3D场景分成了三大模块，分别是赛道、金币（道具）和人物。
赛道设计
赛道包含了楼房和地面，由于人物需要不停地往前跑，基于相对运动的原理，我们复制了两段楼房（如图1），并同时做逆时针旋转，当旋转至 -theta 角度的时候，把楼房的旋转角度置为0（如图2）。地面是一个静止的圆弧模型，通过改变纹理的 UV 值来实现地面滚动的效果。

本文插图
图1 赛道结构图

本文插图
图2 楼房运动轨迹
金币布局
由以上图1可知，我们以 theta 角度的圆弧为一个控制单元，我们希望能控制游戏的总时长、每段圆弧旋转的时间，以及每段圆弧摆放的金币行数，这些参数如何控制3D场景的运作呢？根据已知字段推导出以下几条公式（蓝色字段为可配参数）：

需要生成金币的总行数 = （游戏总时长 /圆弧旋转theta角度的时间）x 每段圆弧摆放的金币行数
每两行金币之间的时间间隔 = 游戏总时长 / 需要生成金币的总行数
每行金币出现的时间 = 每两行金币之间的时间间隔 x 金币索引

这里主要得出游戏总时长和每行金币出现时间之间的关系，而每行金币该如何摆放以及道具出现的时机由具体的业务逻辑控制，这里不展开来讲。最终我们得到了一个控制金币摆放的队列：
[ { ''index'': 0, // 索引，代表每一行 ''item'': { ''position'': ''center'', // 摆放位置 ''type'': ''coin'' // 应该摆放的模型类型 }, ''time'': 0 // 每行金币出现的时间 }, { ''index'': 1, ''item'': { ''position'': ''left'', ''type'': ''coin'' }, ''time'': 0.25 }, // more...... ]这个队列如何与我们的3D场景关联呢？
由以上图2可知，一共有两段圆弧在交替旋转，假设每段圆弧摆放的金币行数定义为 rowsPerPart ，当前圆弧的索引定义为 index ，那么每次旋转至0度的时候，取[index * rowsPerPart, (index + 1), rowsPerPart]区间的数据进行摆放。数组中 position 表示摆放位置，一共有左中右三条道，也可能三条道都摆放，根据配置创建金币节点，并设置好节点的 position 。 type 表示应该摆放的模型类型，除了金币还可能是道具、礼包、终点线等。
开发流程
设计好游戏思路之后，可以正式开始制作我们的游戏啦~
【|前端如何快速上手 Web 3D 游戏的开发】跑酷游戏是通过 Oasis Editor 开发的，这是一个 web 3D 内容在线开发平台，底层用的是 Oasis 3D（蚂蚁自研的3D引擎）。这时候你可能会问，为什么要用 Oasis Editor 开发呢？

本文插图
接下来分为「场景搭建」、「逻辑开发」、「业务联动」来讲解整个3D工作流。
场景搭建
上传资产
在编排场景之前我们需要先上传好游戏资产，一般美术提供的模型文件格式为 fbx 或 gltf ，纹理推荐使用 webp 格式，我们在资源区右侧点击上传。