BoxGeometry未正確對齊SphereGeometry

Question

我試圖在地球上創建尖峯（球體幾何）。雖然一切都是有效的，但峯值不符合全球範圍。我想要秒殺對齊下面的圖像。但儘管提到我的釘不lookAt(new THREE.Vector3(0,0,0))。請幫助我。

我有目的地提到了調試所需的代碼。讓我知道你是否需要更多的代碼。下圖是我希望我的尖峯與球體對齊的方式。

但是，這是它的外觀

我的主要JS初始化文件。

$(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); 
    }; 

}); 

以下是負責在Globe上產生尖峯的代碼。

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

記住的lookAt需要direction vector，你給給此方法的矢量（0，0，0），這其實不是歸一化的方向矢量。所以你必須計算方向：

從你的方塊位置到球體的中心，並對它進行標準化。

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

而現在只是一組代碼良好慣例，可以幫助你：

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

在這裏，我寧願爲箱體幾何結構使用另一個變數名稱，不要與混淆了「類」的定義從三個遵循命名約定：

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

在這裏：

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

您可以只設置：

box.position.copy(position); 

Answer 2

我也滿足了這個問題，我固定它，解決的辦法是：box.lookAt（新THREE.Vector3（0，0，0））必須經過box.scale.z = xxxx