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

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

javascript three.js

Javascript three.js lookAt函数无法正常工作,javascript,three.js,Javascript,Three.js,我想将一个子对象（圆柱体）与另一个对象（立方体2）对齐。我使用了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.se

我想将一个子对象（圆柱体）与另一个对象（立方体2）对齐。我使用了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);

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

查看

在添加的空间中，向

向量

旋转网格

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

如果在mesh1中设置mesh3.lookAt（mesh2.position），它将在矢量上“looks”

[6-2,2+2,0]=[4,4,0]

若你们想看到正确的位置，你们必须计算出你们的目标向量

请参见添加的空间中的朝向量旋转网格

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

如果在mesh1中设置mesh3.lookAt（mesh2.position），它将在矢量上“looks”

[6-2,2+2,0]=[4,4,0]

若你们想看到正确的位置，你们必须计算出你们的目标向量

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

最好将圆柱体的位置设置为第一个对象，然后使用第二个对象的位置调用.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

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

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

范例

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

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