javascript - 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 = '0123456789ABCDEF';
    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)，这实际上不是归一化的方向向量。所以你必须计算方向:

from your box position to the center of the sphere AND normalize it.

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

现在只是一组可能对您有帮助的代码良好约定:

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

在这里我宁愿为盒子几何体使用另一个 var 名称，不要与 THREE 中的“类”定义混淆并遵循命名约定:

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);