原需求是将模型与地图进行结合渲染,结合的问题解决了。
但是,甲方提出一个需求说是希望使用地理坐标系的模型,这样可以方便后续的一些操作,虽然一时没有想明白,但是还是要做。
我的想法是:
1、模型在给到前端的时候,就已经是从地理坐标系转成了适用的右手坐标系。(这当然是最好的了)
2、在渲染前,可以对three进行一些配置,让其识别地理坐标系。
3、或者在添加到场景前先对所有构件进行坐标的转换。
...
2和3,哪种有可执行的地步呢?亦或是有更好的办法?
原需求是将模型与地图进行结合渲染,结合的问题解决了。
但是,甲方提出一个需求说是希望使用地理坐标系的模型,这样可以方便后续的一些操作,虽然一时没有想明白,但是还是要做。
我的想法是:
1、模型在给到前端的时候,就已经是从地理坐标系转成了适用的右手坐标系。(这当然是最好的了)
2、在渲染前,可以对three进行一些配置,让其识别地理坐标系。
3、或者在添加到场景前先对所有构件进行坐标的转换。
...
2和3,哪种有可执行的地步呢?亦或是有更好的办法?
在Three.js中,通常模型是以右手坐标系(即笛卡尔坐标系)进行渲染的。地理坐标系(例如WGS84)是基于经纬度和海拔的,这与Three.js的默认坐标系不同。为了满足甲方需求,将模型从地理坐标系转换到Three.js可以使用的坐标系,有几种可能的方法:
在模型到达前端之前,将模型数据从地理坐标系转换到笛卡尔坐标系。这通常涉及到复杂的数学运算,因为你需要考虑地球的形状(不是完美的球体,而是椭球体)以及经纬度和海拔到笛卡尔坐标的转换。一旦模型数据被转换,Three.js可以像处理任何其他模型一样处理它。
Three.js 本身不直接支持地理坐标系的渲染,但你可以使用其他库,如three-geo
,它允许你使用经纬度坐标来放置物体。这些库通常提供了将地理坐标转换为Three.js坐标系的工具。
在将模型添加到Three.js场景之前,编写一个自定义函数来转换模型的每个顶点。这涉及到对每个顶点应用一个转换矩阵,该矩阵将地理坐标转换为笛卡尔坐标。这种方法可能需要较高的编程技能和数学知识。
方法1 可能是最理想的选择,因为它在模型到达前端之前就完成了所有转换工作,从而简化了前端的处理。但是,这可能需要后端支持或模型制作工具的支持,以进行必要的转换。
方法2 和 方法3 都可以在没有后端支持的情况下在前端进行转换。然而,它们可能需要更多的编程工作和对Three.js的深入了解。
总之,选择哪种方法取决于你的具体需求、资源和时间。如果可能的话,我会推荐在模型制作阶段就将其转换为笛卡尔坐标系,这样可以简化前端的工作。
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
坐标转换可以使用d3-geo, 具体案列可以参考这个https://blog.csdn.net/damadashen/article/details/126216716
https://juejin.cn/post/7088501703162462245