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），这实际上不是一个标准化的方向向量。所以你必须计算方向：

从你的盒子位置到球体的中心并将其标准化。

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

Answer 2

我也遇到了这个问题，我修复了它，解决方案是：box.lookAt（new THREE.Vector3（0,0,0））必须在box.scale.z = xxxx之后

BoxGeometry未正确对齐SphereGeometry

2 个答案: