javascript - 【three.js】地理坐标系的模型如何渲染？

Question

原需求是将模型与地图进行结合渲染，结合的问题解决了。
但是，甲方提出一个需求说是希望使用地理坐标系的模型，这样可以方便后续的一些操作，虽然一时没有想明白，但是还是要做。
我的想法是：
1、模型在给到前端的时候，就已经是从地理坐标系转成了适用的右手坐标系。（这当然是最好的了）
2、在渲染前，可以对three进行一些配置，让其识别地理坐标系。
3、或者在添加到场景前先对所有构件进行坐标的转换。
...

2和3，哪种有可执行的地步呢？亦或是有更好的办法？

Answer 1

在Three.js中，通常模型是以右手坐标系（即笛卡尔坐标系）进行渲染的。地理坐标系（例如WGS84）是基于经纬度和海拔的，这与Three.js的默认坐标系不同。为了满足甲方需求，将模型从地理坐标系转换到Three.js可以使用的坐标系，有几种可能的方法：

1. 转换模型数据

在模型到达前端之前，将模型数据从地理坐标系转换到笛卡尔坐标系。这通常涉及到复杂的数学运算，因为你需要考虑地球的形状（不是完美的球体，而是椭球体）以及经纬度和海拔到笛卡尔坐标的转换。一旦模型数据被转换，Three.js可以像处理任何其他模型一样处理它。

2. 使用Three.js的内置功能

Three.js 本身不直接支持地理坐标系的渲染，但你可以使用其他库，如three-geo，它允许你使用经纬度坐标来放置物体。这些库通常提供了将地理坐标转换为Three.js坐标系的工具。

3. 自定义转换函数

在将模型添加到Three.js场景之前，编写一个自定义函数来转换模型的每个顶点。这涉及到对每个顶点应用一个转换矩阵，该矩阵将地理坐标转换为笛卡尔坐标。这种方法可能需要较高的编程技能和数学知识。

结论

方法1 可能是最理想的选择，因为它在模型到达前端之前就完成了所有转换工作，从而简化了前端的处理。但是，这可能需要后端支持或模型制作工具的支持，以进行必要的转换。

方法2 和 方法3 都可以在没有后端支持的情况下在前端进行转换。然而，它们可能需要更多的编程工作和对Three.js的深入了解。

总之，选择哪种方法取决于你的具体需求、资源和时间。如果可能的话，我会推荐在模型制作阶段就将其转换为笛卡尔坐标系，这样可以简化前端的工作。