我想将three.js脚本TrackballControls应用于移动对象,以保留在物体在场景中移动时缩放和旋转相机的能力。例如,我希望能够让相机“跟随”一个移动的行星,而用户保留了缩放和旋转行星的能力。下面是一个基本的“小提琴”:
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计算的起源移到红色球体的中心,但我不知道如何做到这一点。在_this.target和_eye向量中,我尝试了各种红色球体位置的矢量加法,但都没有效果。
谢谢你的帮忙!
发布于 2014-07-20 15:38:36
我推荐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。
https://stackoverflow.com/questions/24855708
复制相似问题