在 Three.js 中使用 lookaAt() 和 worldToLocal() 旋转子对象看着相机答案

【问题标题】：rotated child object looking at Camera, using lookaAt() and worldToLocal() in Three.js在 Three.js 中使用 lookaAt() 和 worldToLocal() 旋转子对象看着相机
【发布时间】：2015-12-24 19:13:57
【问题描述】：

我在 lookAt() 方法中构建了 three.js 的问题。我有一个像这样的分层对象结构

var obj1 = new THREE.Object3D();
obj1.position.x=200;
obj1.rotation.x=0.1;
scene.add(obj1);

var obj2 = new THREE.Object3D();
obj2.position.y=-400;
obj2.rotation.y=0.21;
obj1.add(obj2);

var obj3 = new THREE.Object3D();
obj3.position.z=-200;
obj3.rotation.x=0.1;
obj3.rotation.y=-0.1;
obj2.add(obj3);

当我打电话时

obj1.lookAt(camera.position);

它工作正常，但是当我从子对象调用该方法时，例如

obj3.lookAt(camera.position);

旋转错误。

由于父对象的旋转似乎是问题，我考虑将相机的世界位置转换为对象的本地位置，但我没有得到它的正确工作。

var vector = new THREE.Vector3();
vector.setFromMatrixPosition( camera.matrixWorld );
obj3.lookAt( obj3.worldToLocal( vector ) );

任何帮助都会很棒。

【问题讨论】：

Object3D.lookAt() 不支持具有旋转和/或平移父对象的对象。可能有一个解决方法。您的任何对象是否具有不均匀的比例（即 object.scale.set( 1, 2, 3 ) ）？
应用的对象没有比例。
我不能给你一个“答案”，因为下面的方法并不总是正确的，但这里是概念：THREE.SceneUtils.detach( child, parent, scene ); child.lookAt( world_space_target.position ); THREE.SceneUtils.attach( child, scene, parent );通过调试器，你可能会清楚地理解涉及的问题。

标签： javascript camera rotation position three.js

【解决方案1】：

只需添加这些原型，然后使用 .lookAtWorld(vector) 代替 .lookAt(vector)

THREE.Object3D.prototype.worldToLocal = function ( vector ) {
    if ( !this.__inverseMatrixWorld ) this.__inverseMatrixWorld = new THREE.Matrix4();
    return  vector.applyMatrix4( this.__inverseMatrixWorld.getInverse( this.matrixWorld ));
};


THREE.Object3D.prototype.lookAtWorld = function( vector ) {
   vector = vector.clone();
   this.parent.worldToLocal( vector );
   this.lookAt( vector );
};

【讨论】：

(1) lookAt() 使用 'up' 属性来确保对象保持直立。您的方法无法做到这一点。 (2) 避免使用clone()，因为它调用new。如果必须，请改用闭包。
@WestLangley 你会推荐什么解决方案？