BoxGeometry nieprzystosowanie do SphereGeometry prawidłowo

Question

Próbuję tworzyć skoki na Ziemi (geometria sferyczna). Choć wszystko działa, grzywny, ale kolce nie zgadzają się z globusem. Chcę, żeby spike wyrównał coś jak obraz poniżej. Ale moje kolce nie wspominają o lookAt(new THREE.Vector3(0,0,0)). Proszę pomóż mi.

Ja celowo wymieniłem kod wymagany do debugowania. Daj mi znać, jeśli potrzebujesz więcej kodu. Poniżej obrazu pokazuję, jak chcę, aby moje kolce były wyrównane względem kuli.

Ale tak to wygląda

Główny JS pliku inicjującym.

$(document).ready(function() { 

    // Initializing Camera 
    Influx.Camera = new Influx.Camera({ 
    fov: 60, 
    aspectRatio: window.innerWidth/window.innerHeight, 
    near: 1, 
    far: 1000, 
    position: { 
     x: 0, 
     y: 0, 
     z: 750 
    } 
    }); 

    //Initializing Scene 
    Influx.Scene = new Influx.Scene(); 

    // Initializing renderer 
    Influx.Renderer = new Influx.Renderer({ 
    clearColor: 0x000000, 
    size: { 
     width: window.innerWidth, 
     height: window.innerHeight 
    } 
    }); 

    Influx.Globe = new Influx.Globe({ 
    radius: 300, 
    width: 50, 
    height: 50 
    }); 

    // 
    Influx.Stars = new Influx.Stars({ 
    particleCount: 15000, 
    particle: { 
     color: 0xFFFFFF, 
     size: 1 
    } 
    }); 

    Influx.moveTracker = new Influx.moveTracker(); 

    Influx.EventListener = new Influx.EventListener(); 

    (function animate() { 
    requestAnimationFrame(animate); 
    render(); 
    controls.update(); 
    })(); 

    function render() { 
    camera.lookAt(scene.position); 
    group.rotation.y -= 0.001; 
    renderer.render(scene, camera); 
    }; 

}); 

Poniżej znajduje się kod odpowiedzialny za generowanie skoków na całym świecie.

Influx.Spikes = function (lat, long) { 

    // convert the positions from a lat, lon to a position on a sphere. 
    var latLongToVector3 = function(lat, lon, RADIUS, heigth) { 
    var phi = (lat) * Math.PI/180, 
     theta = (lon-180) * Math.PI/180; 

    var x = -(RADIUS+heigth) * Math.cos(phi) * Math.cos(theta), 
     y = (RADIUS+heigth) * Math.sin(phi), 
     z = (RADIUS+heigth) * Math.cos(phi) * Math.sin(theta); 

    return new THREE.Vector3(x, y, z); 
    }; 

    var geom  = new THREE.Geometry(); 
    var BoxGeometry = new THREE.BoxGeometry(1, 100, 1); 

    //iterates through the data points and makes boxes with the coordinates 
    var position = latLongToVector3(lat, long, 300, 2); 

    var box = new THREE.Mesh(BoxGeometry); 

    //each position axis needs to be set separately, otherwise the box 
    //will instantiate at (0,0,0) 
    box.position.x = position.x; 
    box.position.y = position.y; 
    box.position.z = position.z; 

    box.lookAt(new THREE.Vector3(0, 0, 0)); 
    box.updateMatrix(); 

    //merges the geometry to speed up rendering time, don't use THREE.GeometryUtils.merge because it's deprecated 
    geom.merge(box.geometry, box.matrix); 

    var total = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({ 
    color: getRandomColor(), 
    morphTargets: true 
    })); 

    function getRandomColor() { 
    var letters = 'ABCDEF'; 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
    }; 

    //add boxes to the group 
    group.add(total); 
    scene.add(group); 
}; 

Influx.Camera = function(params = {}) { 

    if (!$.isEmptyObject(params)) { 
    window.camera = new THREE.PerspectiveCamera(params.fov, params.aspectRatio, params.near, params.far); 
    camera.position.set(params.position.x, params.position.y, params.position.z); 
    camera.lookAt(new THREE.Vector3(0,0,0)); 
    } else { 
    console.log("Trouble with Initializing Camera"); 
    return; 
    } 

}; 

Answer 1

Pamiętaj, że LOOKat zajmuje direction vector, dajesz do tej metody wektor (0, 0, 0), to nie jest właściwie znormalizowane kierunek wektora. Musisz obliczyć kierunek:

z pozycji pudełka do środka kuli ORAZ normalizować.

var dir = box.position.sub(world.position).normalize(); 
box.lookAt(dir); 

A teraz po prostu zbiorem kodów dobrych konwencji, które mogą pomóc:

var BoxGeometry = new THREE.BoxGeometry(1, 100, 1); 

Tutaj wolałbym użyć innej nazwy var dla geometrii pudełka, aby nie mieszać się z " klasa”definicja z trzech i przestrzegać konwencji nazewnictwa:

var boxGeometry = new THREE.BoxGeometry(1, 100, 1); 

a tutaj:

box.position.x = position.x; 
box.position.y = position.y; 
box.position.z = position.z; 

można po prostu ustawić:

box.position.copy(position); 

Answer 2

ja też spotkać ten problem, a ja naprawiłem to, rozwiązaniem jest: box.lookAt (nowa THREE.Vector3 (0, 0, 0)) musi po box.scale.z = xxxx