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