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

我想将一个子对象（圆柱体）与另一个对象（cube2）对齐。我使用了lookAt函数，但对齐方式不正确。我的错误在哪里？three.js 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位置），圆柱体应该旋转并且始终看着立方体2。

Here is a picture

来源

2017-01-16 webgl

注视totate对网在空间中的矢量，在哪里添加。 – Martin

你有解决我的问题的方法吗？ – webgl

mesh3.lookAt（mesh2.position.subVectors（mesh2.position，mesh1.position））?? – Martin

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

来源

2017-01-16 13:55:37 Martin

谢谢你的回答，但这也不起作用。我用一张图片更新了我的问题，也许这有助于理解我想要实现的内容。 – webgl

从我的角度来看，你并不需要使用对象的层次结构在这种情况下。

最好将圆柱体的位置设置为第一个对象，然后用第二个对象的位置调用.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立方体的例子可以拖动

来源

2017-01-16 14:35:41 prisoner849

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

回答

相关问题