Three.js globe - 添加数据点

Question

我正在尝试向我的three.js地球添加一个圆圈（例如西雅图）。此外，我可以缩放我的地球仪，我认为这会使我添加的点复杂化 - 位置和大小。我正在使用Three.js和轨迹球控制器。

由于

这是我的代码：

function initGlobe(zoom) {

var webglEl = document.getElementById('webgl');
document.getElementById("zoomin").addEventListener("click", function () {
    setZoom(-1);
});
document.getElementById("zoomout").addEventListener("click", function () {
    setZoom(1);
});
if (!Detector.webgl) {
    Detector.addGetWebGLMessage(webglEl);
    return;
}

var width = window.innerWidth;
var height = window.innerHeight;

// Earth params
var radius = 0.5,
    segments = 32,
    rotation = 6;

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
camera.position.z = 1.5;

camera.fov = zoom;
camera.updateProjectionMatrix();

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
var ambLight = new THREE.AmbientLight(0x666666);//(0x333333)
scene.add(ambLight);

var sphere = createSphere(radius, segments);
sphere.rotation.y = rotation;
scene.add(sphere)

var clouds = createClouds(radius, segments);
clouds.rotation.y = rotation;
scene.add(clouds)

var stars = createStars(90, 64);
scene.add(stars);

var controls = new THREE.TrackballControls(camera);

webglEl.appendChild(renderer.domElement);

render();

function setZoom(newzoom) {
    camera.fov += newzoom;
    camera.updateProjectionMatrix();
    console.log(radius);
}

function render() {
    controls.update();
    sphere.rotation.y += 0.0005;
    clouds.rotation.y += 0.0005;
    addData();
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

function createSphere(radius, segments) {
    return new THREE.Mesh(
        new THREE.SphereGeometry(radius, segments, segments),
        new THREE.MeshPhongMaterial({
            map: THREE.ImageUtils.loadTexture('images/2_no_clouds_4k.jpg'),
            bumpMap: THREE.ImageUtils.loadTexture('images/elev_bump_4k.jpg'),
            bumpScale: 0.005,
            specularMap: THREE.ImageUtils.loadTexture('images/water_4k.png'),
            specular: new THREE.Color('grey')
        })
    );
}

function addData() {
    var geom = new THREE.Geometry();
    var cubeMat = new THREE.MeshLambertMaterial({ color: 0x000000, opacity: 0.6, emissive: 0xffffff });
    //for (var i = 0 ; i < data.length - 1 ; i++) {
    //    var x = parseInt(data[i][0]) + 180;
    //    var y = parseInt((data[i][1]) - 84) * -1;
    //    var value = parseFloat(data[i][2]);
    // calculate the position where we need to start the cube  47.677456, -122.294816
    var position = latLongToVector3(47.677456, -122.294816, 600, 2);
        // create the cube
        var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 1 + 1 / 8, 1, 1, 1, cubeMat));
        // position the cube correctly
        cube.position = position;
        cube.lookAt(new THREE.Vector3(0, 0, 0));
        // merge with main model
        THREE.Geometry.merge(geom, cube);
    //}
    // create a new mesh, containing all the other meshes.
    var total = new THREE.Mesh(geom, new THREE.MeshFaceMaterial());

    // and add the total mesh to the scene
    scene.add(total);
}

function latLongToVector3(lat, lon, radius, heigth) {
    var phi = (lat) * Math.PI / 180;
    var theta = (lon - 180) * Math.PI / 180;
    var x = -(radius + heigth) * Math.cos(phi) * Math.cos(theta);
    var y = (radius + heigth) * Math.sin(phi);
    var z = (radius + heigth) * Math.cos(phi) * Math.sin(theta);
    return new THREE.Vector3(x, y, z);
}


function createClouds(radius, segments) {
    return new THREE.Mesh(
        new THREE.SphereGeometry(radius + 0.003, segments, segments),
        new THREE.MeshPhongMaterial({
            map: THREE.ImageUtils.loadTexture('images/fair_clouds_4k.png'),
            transparent: true
        })
    );
}

function createStars(radius, segments) {
    return new THREE.Mesh(
        new THREE.SphereGeometry(radius, segments, segments),
        new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture('images/galaxy_starfield.png'),
            side: THREE.BackSide
        })
    );
}

};