ThreeJS中小地图技术必须要说的事

Posted 2021-04-21 奴彼的笔记

这段时间算是较忙，所以很多事情想写下来而又疏于记录。

游戏中的小地图一直是一个很重要的存在，可以让玩家知道自己所在位置以及敌方的分布。而在游戏开发过程中，小地图技术也有着多种的实现方式。这篇文章，记录一下ThreeJS中小地图的实现方式。（很认真地写）

《王者荣耀》中的小地图（左上角）

思路一：利用两台摄像机，同一场景同时渲染

1.在ThreeJS中，新建一个场景，命名为mainScene；

2.为这个场景添加地图模型，通常利用外部的格式加载进来；

3.添加透视相机为MainCamera（透视图即正常视角），将相机添加到mainScene的子节点；

4.添加正交相机为MapCamera（顶视图即小地图），将相机添加到mainScene的子节点；

5.设置视口范围ViewPort1（startX，startY，width，height），ViewPort2（左上角）；

6.设置renderer的autoclear = false；在render之前调用render.clear（）；

7.分别对两台摄像机render两次，结束。

思路二：利用两台摄像机，两个场景单独渲染

1.在ThreeJS中新建两个场景，分别命名为mainScene，mapScene；

2.为这个场景添加地图模型（同上）；

3.添加透视相机为MainCamera（透视图即正常视角），将相机添加到mainScene的子节点；

4.添加正交相机为MapCamera（顶视图即小地图），将相机添加到mapScene的子节点；同时为mapScene添加MainCamera；

5.为mapScene添加background的纹理贴图，贴图内容为场景的顶视图；

6.设置视口范围ViewPort1（startX，startY，width，height），ViewPort2（左上角）；

7.设置renderer的autoclear = false；在render之前调用render.clear（）；

8.分别对两台摄像机，两个场景render两次，结束。

render部分代码

第二种实现方式结果

两种思路比较

    第一种实现方式能够生成顶视图作为小地图，并且能够实时更新，地图发生变化，在小地图里能够明确表现；但是，这种实现方式是将同一场景渲染两次，如果场景较大，则渲染两次带来的效率问题不容忽视。我使用的是107M的地图模型，按照第一种实现方式的渲染结果帧频仅为7fps。

    第二种实现方式能够生成顶视图作为小地图，不能实时更新整张地图，以静态的顶视图作为小地图，并仅添加需要更新的物体（如MainCamera），实时更新；这种方式能够产生同样的小地图效果，并且能够实时更新需要更新对象的状态，如玩家的位置；并且由于mapScene场景仅有MainCamera，在第一个场景相同的情况下，第二个场景的内容极大地减少，降低了渲染功耗。实测中，这种实现方式107M的地图，帧频依然能够保持60fps。

——Happy End——