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

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

更新玩家位置

现在我们有了地图了，需要做的就是更新地图中央的蓝点。仔细观察我们的地图，我们获得的玩家坐标属于以地图中央为原点的坐标系统，其中红线x,蓝线z轴。

而我们使用绝对定位来定位玩家元素，使用的是相对于地图元素左上角为原点的坐标系统。

坐标转换

我们可以很容易将中央为原点的坐标系统，转移到左上为原点的坐标系统。

试想下，在中心坐标中的原点(x:0,y:0)，在左上坐标系中是多少呢？ 因为我们之前截图时，特意计算了整个地图在坐标中的宽高是310单位。所以是 (x:155 ,z: 155)。

只要将玩家3d坐标中的x,z值分别在 x轴和z轴上 加上155个单位。就会变成左上坐标系的坐标。将这个坐标除以边的长度310。即得到距离左上原点的百分比坐标。

坐标转换代码如下：

更新位置

我们已经成功完成了坐标转换函数，接下来只要不断的获得玩家的坐标即可。

小地图所在的pages模块，与models模块互相之间在架构是并行解耦的。为了获得models中玩家的位置，我们使用zustand进行数据管理。运行npm i zustand添加依赖。

在src下新建stores文件夹，并新建文件models.tsx，定义声明玩家坐标的变量和更新函数。

进入player.tsx, 给Ecctrl元素添加名称player 使用getObjectByName 从scene中直接获取玩家的mesh,再将其存储到stores中。由于数据的引用关系，后续只要在小地图中不断轮询玩家位置即可。

最后回到小地图，我们来轮询获取玩家位置,并将位置转换为百分比坐标应用到样式中。

附全部代码：