Question

我想将一个子对象（圆柱体）与另一个对象（cube2）对齐。我使用了lookAt函数，但是对齐方式不正确。我的错误在哪里？

我有以下代码：

    //cube 1
    var cube=new THREE.BoxGeometry(2,2,2);
    var material=new THREE.MeshBasicMaterial ({ color: 0xffffff });
    mesh1=new THREE.Mesh(cube,material);
    mesh1.position.set(-2,2,0);
    scene.add(mesh1);

    //cube 2
    var cube2=new THREE.BoxGeometry(2,2,2);
    var material=new THREE.MeshBasicMaterial ({ color:0x000000 });
    mesh2=new THREE.Mesh(cube2,material);
    mesh2.position.x=6;
    mesh2.position.y=2;
    scene.add(mesh2);   

    //cylinder
    var cylinder=new THREE.CylinderGeometry(1,1,5,30);
    var material=new THREE.MeshBasicMaterial({ color:0xff3399 });
    mesh3=new THREE.Mesh(cylinder,material);
    mesh3.position.x=4.5;


    mesh3.lookAt(mesh2.position);
    mesh1.add(mesh3);

左边的立方体是cube1，右边的立方体是cube2。圆柱体是cube1的子元素，应该看起来像cube2。因此，如果我移动立方体1（在y位置），圆柱应该旋转并始终查看cube2。

Here is a picture

Answer 1

LookAt在空格中向vector方向旋转网格，添加位置。

   mesh2.position` is [6,2,0]
   mesh1 position` is [-2,2,0]

如果在mesh1中设置mesh3.lookAt（mesh2.position），它将“看起来”在向量[6-2,2+2,0] = [4,4,0]上;

如果要查看正确的位置，则必须根据目标向量进行计算。

请参阅https://threejs.org/docs/api/math/Vector3.html

Answer 2

从我的观点来看，在这种情况下你不需要使用层次的对象。

最好将圆柱体的位置设置为第一个对象，然后使用第二个对象的位置调用.lookAt（）。

所以，让我们想象你有一个对象数组

var cubes = [];

和他们之间的链接

var links = [];

然后你创建链接，如下：

function linkObj(startObj, endObj) {
    var linkGeom = new THREE.CylinderGeometry(0.12, 0.25, 1, 16);
    linkGeom.translate(0, 0.5, 0);
    linkGeom.rotateX(Math.PI / 2);
    var link = new THREE.Mesh(linkGeom, new THREE.MeshBasicMaterial({
      color: "yellow"
    }));
    link.userData.position = startObj;
    link.userData.lookAt = endObj;
    scene.add(link);
    links.push(link);
  }

和链接对象：

linkObj(0, 1);  // where 0 and 1 are indices of objects in the array

最后，您将在动画循环中添加lookAt的位置和点数计算：

  links.forEach(function(link){
    link.position.copy(cubes[link.userData.position].position);
    link.lookAt(cubes[link.userData.lookAt].position);
    link.scale.z = cubes[link.userData.position].position.distanceTo(cubes[link.userData.lookAt].position);
  });

jsfiddle示例

示例中的PS立方体是可拖动的

three.js lookAt函数无法正常工作

2 个答案: