BoxGeometry 未与 SphereGeometry 正确对齐

Posted 2023-02-27

【中文标题】BoxGeometry 未与 SphereGeometry 正确对齐

【英文标题】：BoxGeometry not aligning with SphereGeometry properly

【发布时间】：2016-12-22 04:26:48

【问题描述】：

我正在尝试在地球上创建尖峰（球体几何）。尽管一切正常，但尖峰与地球不对齐。我希望尖峰对齐如下图所示的内容。但我的尖峰不lookAt(new THREE.Vector3(0,0,0)) 尽管提到。请帮帮我。

我特意提到了调试所需的代码。如果您需要更多代码，请告诉我。下图是我希望我的尖峰与球体对齐的方式。

但这就是它的样子

我的 Main 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;
  

;

【问题讨论】：

嗨，Rahul，您能否更好地解释一下您的意思：“但尖峰与地球不对齐”。我在图像上看不出任何问题。顺便说一句，它看起来很酷！

嘿@juagicre 我用我如何获得尖峰的图片编辑了我的问题。那些没有与球体对齐..即lookAt(new THREE.Vector3(0,0,0)应该完成这项工作

【参考方案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);

【讨论】：

嘿juagicre，我们在哪里使用var dir 在代码中？

box.lookAt(dir);而不是 box.lookAt(new THREE.Vector3(0,0,0));我猜球体/世界位置的中心是 (0,0,0) 但lookAt 方法不采用位置而是方向向量，因此您必须执行此操作。也许你必须否定方向，试试看；）

我得到相同的方向.. 如果我删除 box.updateMatrix 我也没有得到 boxGeometry 显示

如果您想获得帮助，请提供更多反馈...您获得了哪些 dir 值？它会改变所有盒子的方向吗？你能尝试删除“box.updateMatrix();”吗而不是合并它？您也可以尝试将硬编码值设置为 dir 向量，例如 (1,1,1).normalize()，最后这是盒子应该查看的方向。在此之后检查盒子的旋转是否发生了变化。最后一个问题，盒子类型是object3d吗？因为THREE.Mesh没有方法lookAt...

有`var dir = new THREE.Vector3(1,1,1).normalize(); box.lookAt(dir);` 改变了方向......正如我的问题（代码）中提到的那样，盒子类型是new THREE.BoxGeometry(1, 100, 1); ..

【参考方案2】：

我也遇到这个问题，已经解决了，解决方法是：box.lookAt(new THREE.Vector3(0, 0, 0)) 必须在box.scale.z = xxxx之后

【讨论】：

在这种情况下xxxx 是什么？