如何在3D Globe,Three.js上放置带有Lat / Lon的标记?

时间:2017-09-02 18:54:52

标签: javascript 3d three.js

这里我在Three.js中有一个基本的3D Globe。我使用Navigator获取用户的位置,并在用户当前位置的地球上使用标记输入位置。我不能为我的生活得到这个以显示正确的位置。 3D Globe也会旋转。我将如何获得正确的位置并使标记与Globe一起旋转?

示例:http://corexsystems.net/Projects/ThreeJs/EarthAndMoon/

代码:

import random

number = random.randint(1,100)

while True:
    pick = int(input("Choose a number between 1 and 100. "))
    if pick == number:
        print("You are correct, great job! ")
        number = random.randint(1,100) # guess again
    elif pick > number:
        print("That was too high of a guess. Try again. ")
    else: # one possibility left, so no need for another elif
        print("That was too low of a guess. Try again. ")

1 个答案:

答案 0 :(得分:3)

您需要将球面坐标转换为笛卡尔坐标

如果你没有修改球体的纹理偏移量,下面的代码应该可以解决这个问题:

/**
 * Position an object on a planet.
 * @param {THREE.Object3D} object - the object to place
 * @param {number} lat - latitude of the location
 * @param {number} lon - longitude of the location
 * @param {number} radius - radius of the planet
 */
function placeObjectOnPlanet(object, lat, lon, radius) {
    var latRad = lat * (Math.PI / 180);
    var lonRad = -lon * (Math.PI / 180);
    object.position.set(
        Math.cos(latRad) * Math.cos(lonRad) * radius,
        Math.sin(latRad) * radius,
        Math.cos(latRad) * Math.sin(lonRad) * radius
    );
    object.rotation.set(0.0, -lonRad, latRad - Math.PI * 0.5);
}

请注意,您可以使用THREE.Spherical执行相同操作。

检查this fiddle

如果你想让你的别针在行星旋转时旋转,你需要add他们作为行星的孩子。或者add行星和引脚都是THREE.Object3D

var object = THREE.Object3D();
object.add(planet);
object.add(pins);
object.rotation.y = 1.0;