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

本文插图
在开发过程中，美术可能经常需要替换纹理，所以建议美术将纹理与模型解绑，通过手动上传的形式将纹理绑定到模型上，避免同时加载两个纹理。
如图，我们已经在资源区上传好楼房、道具、金币等模型和相应纹理。

本文插图
场景编排
有了资产之后我们需要绑定到节点上，然后进行场景编排，如下视频以楼房和地面为例进行演示：

创建场景树
绑定GLTF模型
编辑器PBR材质，绑定纹理
调整编辑器相机，拷贝编辑视角
转换相机视角，微调相机参数

按照同样的方法我们完成了整个场景的编排，某些节点需要通过脚本控制展示，可以点击场景树左边的小眼睛进行隐藏，场景效果如下：

本文插图
粒子系统
游戏开发的时候，经常会用到粒子系统来帮助我们实现一些比较酷炫的效果，在我们这个项目中，在人物节点(person)下面有2个子节点，分别来负责吃到金币(coinParticle)和道具(toolParticle)时的粒子效果，游戏过程中效果如下：

本文插图
当我们点击选中一个粒子节点的时候，编辑器右侧会出来对应的属性面板，属性面板中就能够看到我们的粒子组件以及相关参数，通过设置参数可以调整我们的粒子效果：

本文插图
接下来一步就是来设置参数来控制我们的粒子效果了，下面给大家介绍下几个常用参数：

本文插图

本文插图
逻辑开发
以上场景可由前端协助美术同学进行搭建，接下来这一步就正式进入编程阶段了。
脚本能力
1、cliOasis Cli 是连接业务和 Oasis 3D 编辑器的桥梁，在使用我们引擎的时候，建议提前安装好 Cli 的环境：
tnpm i @alipay/oasis-cli -g安装好 Cli 之后，我们就可以将场景导出到我们的本地项目，并且随时将最新的场景编排同步至本地。首先，我们进入跑酷项目根目录，并执行如下命令，将我们已经建好的3D场景和当前项目连接：
oasis pull sceneId上面的 pull 命令中， sceneId是我们的场景id ，执行完该命令后，会在根目录下自动添加了1个目录和1个文件，如下：

本文插图
当我们需要对场景进行编辑，并且将最新修改同步至本地，我们只需要执行如下命令即可：
oasis dev2、金币转动这里以金币转动为例演示如何添加脚本控制，首先在资源面板添加一个脚本，然后在将脚本挂在节点上：

本文插图

本文插图
完成这一步后，我们就可以在coinAni的脚本中实现对coin节点的控制了，金币一直旋转我们在脚本的onUpdate 中处理即可：
onUpdate() { const { node } = this; TWEEN.update(); if (this._isRotate && node.parentNode.isActive) { node.setRotationAngles(0, globalVal.coinAngle % 360, 0); } }碰撞检测