React-three实现3D游戏（五）-小地图

3D模型在线预览提供多种低代码平台3D模型在线预览解决方案，实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下，直接查看和操作3D模型，极大地提升了数据可视化的效果和用户交互体验。

小地图方案

游戏中使用小地图来查看玩家当前的位置，几乎是必然出现的功能，这次我们在react-three中实现小地图的功能。

这里提供2种方案：

1. 正交相机
2. 一张图片

使用正交相机

最偷懒和最快的方案，就是在场景中创建一个正交相机。把它放在游戏场景的正上方，位置刚好能看到全部地图。

再把这个正交相机的内容动态渲染到固定在右上角落的Html元素上。

这样小地图实际上就成为了卫星相机所观察到的场景，而且不用考虑玩家位置的更新。因为相机中能看到玩家的模型。

但是，它的性能不佳，因为多引入一个相机。相应的渲染对性能影响较大。

1. 资源消耗增加： 每个相机都需要额外的计算资源来处理视角、投影等操作，因此在一个场景中引入多个相机会增加系统的资源消耗。
2. 渲染时间增加： 每个相机都需要进行一次完整的渲染过程，包括对场景中的对象进行遍历、投影、光照等处理。因此，引入多个相机会增加整体渲染时间，导致性能下降。
3. GPU 负载增加： 对于 WebGL 渲染，每个相机都会触发一次 GPU 渲染操作。因此，引入多个相机会增加 GPU 的负载，可能导致渲染效率降低，甚至出现性能瓶颈。

使用图片

这个就很简单了，我们用一张图片来作为小地图。将3d世界的坐标转换到这个图片上的坐标，再不断更新玩家的位置。

因为只有一张图片的加载及更新坐标，所以对性能的开销很小。但坐标转换稍微涉及到一点高中数学知识。需要稍微运用一下空间想象能力。

添加小地图

综合上述，我们使用第二种方案：即使用图片作为小地图，将玩家坐标转换到图片上的位置，并更新。

获取图片

虽然我们不使用第一种方案，但我们可以用正交相机来获取图片。

参考react-three的示例：svg地图交互

进入models文件夹下的index.tsx文件，将当前的相机换成正交相机，注释掉玩家挂载。

注意这里的坐标辅助线的长度是155，这是我调整后的长度，以它的x,z轴构成矩形，能刚好把地图囊括进去。

如图，红线和蓝线分别代表x轴和z轴，以它们的原点为中心构成的矩形恰好囊括地图。

我们把这部分裁剪出来，作为小地图的背景图。它对应3D场景的宽高都是310个坐标单位。

显示小地图

把前面处理好的图片放到public目录下的img文件夹中，命名为map.jpg

在pages文件夹下新建miniMap.tsx，我们把地图的背景图片显示出来。并使用一个蓝色圆点来表示玩家的位置，玩家默认位置在原点，所以初始化玩家元素居中。

再添加一些简单样式，主要将小地图给个宽高固定在页面右上方。

添加个点击放大的功能，在less中添加一下transition设置。让他移动到屏幕中心并放大4倍。