html 如何在ThreeJS球体上绘制国家Map？

xxe27gdn 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(168)

我目前正在做一个包括3D地球的项目。我用ThreeJS创建了一个3D球体，一切都很好😎
事情是这样的：
我希望这些国家是互动的，或者说是可定制的，我希望一些国家有不同的颜色，等等。
我认为实现这一点的一个可能的方法是在2D画布上将每个国家绘制为多边形，然后将画布Map到球体上。
问题：我从以下位置获取Geo数据：https://geojson-maps.ash.ms。这个json包含了所有国家的边界坐标，如let germany = [[-51.32, 24.53], [-10.43, 53.98], ...]的纬度和经度。我如何使用这些坐标在画布上相应的位置绘制多边形？
我找到了一个视频，里面有人做了我想做的事情。他在Unity中实现了它。也许这有助于理解我想实现的目标：https://youtu.be/sLqXFF8mlEU?t=636.（从10：37开始）
我对编程和JS比较陌生。我知道网上有类似的问题，但我真的不明白答案，或者它们不适合我的问题。我的头很热，我尝试了过去5个小时的一切。
感谢您的耐心等待。

Html

来源：https://stackoverflow.com/questions/74734210/how-can-i-map-countries-on-a-threejs-sphere

1条答案

按热度按时间

rqqzpn5f1#

只是一个快速的想法：您可以将long值规格化为画布的宽度，将lat值规格化为画布的高度。

const canvasW = 1024;
const canvasH = 512;

function getPXfromLatLng(lat, lon) {
    // Convert longitude to [0,1] range, then multiply by canvas width
    let posX = (lon + 180) / 360 * canvasW;
    

    // Convert lat to [0,1] range, then multiply by canvas height
    let posY = (lat + 90) / 180 * canvasH;

    return { x: posX, y: posY };
}

......尽管这无法解释在接近极点时，在等角投影中看到的余弦失真。wikipedia article中有一个公式可能有助于实现这种失真。

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何在ThreeJS球体上绘制国家Map？

1条答案

相关问题

热门标签

最新问答