Question

我想将three.js脚本TrackballControls应用于移动对象，以保持在对象移动通过场景时缩放和旋转相机的能力。例如，我希望能够拥有相机＆＃34;关注＆＃34;一个移动的行星，而用户保留在地球周围进行缩放和旋转的能力。这是一个基本的jsfiddle：

http://jsfiddle.net/mareid/8egUM/3/

（由于某些原因，鼠标控件实际上并不适用于jsfiddle，但它确实在我的机器上运行）。

我希望能够将相机连接到红色球体，使其随之移动，但不会失去缩放和旋转的能力。通过在render（）函数中添加这些行，我可以让相机足够轻松地跟踪球体：

mouseControls.target = new THREE.Vector3(object.position);
camera.position.set(object.position.x,object.position.y,object.position.z+20);

但是如果我这样做，固定的camera.position行会覆盖TrackballControls的缩放，旋转等功能。在数学上，我觉得应该可以将所有TrackballControls计算的原点转移到中心位置。红色的球体，但我无法弄清楚如何做到这一点。我已经尝试了将红球位置的各种向量添加到TrackballControls.js中的_this.target和_eye向量，但无济于事。

感谢您的帮助！

Answer 1

我建议OrbitControls而不是TrackballControls。我的回答主要适用于OrbitControls;同样的原则也可能适用于TrackballControls（我暂时没有看过它的代码）。

如果您查看OrbitControls的工作原理，您应该注意到相机使用this.object，相机使用this.target，并使用该矢量（差异）他们之间的一些计算。平移时，移动适用于两个位置;旋转时只移动相机。 this.pan设置为移动相机，但开箱即可处理垂直于this.object到this.target向量的平移，因为它设置了平移向量。

无论如何，如果你将矢量从object.position减去controls.target并将controls.pan设置为该矢量，那么它应该会跳转到该对象：

修复示例代码：

向OrbitControls.js添加帮助，该帮助可以访问其本地pan变量：

function goTo( vector ) {
    // Cloning given vector since it would be modified otherwise
    pan.add( vector.clone().sub( this.target ) );
}

您自己的代码：

function animate() {

    requestAnimationFrame(animate);
    mouseControls.goTo( object.position ); // Call the new helper
    mouseControls.update();
    render();

}

您可能还想将mouseControls.noPan设置为true。

如何将TrackballControl应用于移动目标？

1 个答案: