我正在Web应用程序中使用Doob先生的元素周期表代码:
https://threejs.org/examples/css3d_periodictable.html
我正在Helix视图中使用它。当我向左旋转对象时,也会将相机的Y位置也移动一定量。我希望给人的印象是,在旋转相机时,Helix在垂直方向上<< [corkscrewing。这是我正在使用的代码,其中angle和panAmount是控制每秒旋转和垂直旋转多少的常量:
let g_RotationMatrix = new THREE.Matrix4();
g_RotationMatrix.makeRotationY(angle);
// Apply matrix like this to rotate the camera.
self.object.position.applyMatrix4(g_RotationMatrix);
// Shift it vertically too.
self.object.position.y += panAmount;
// Make camera look at the target.
self.object.lookAt(self.target);
我所遇到的问题是,从照相机的角度来看,当照相机垂直移动时,根据旋转方向,物体似乎分别朝向您和远离您倾斜。这对我来说很有意义,因为我猜测函数会使相机看到目标的中心,而不是目标上最接近它的点,所以相机必须倾斜以专注于目标的质心。当我使用鼠标通过Orbit控件垂直平移时,会看到相同的效果。我认为,描述这种效果的另一种方法是,当相机垂直移动时,对象似乎在pitch上下移动。我想要的效果是自动升降机上的窗户清洗器在建筑物的侧面上下升降,无论摄像机当前的Y位置如何,建筑物的侧面都完美地对准了摄像机。lookat()
如何用相机达到这种效果?
假设self.target是vector3对象,self.object是摄像机:
例如,如果self.target是相机的对象旋转中心,则您不希望更改实际的self.target向量。首先复制它。
const newTarget = new THREE.Vector3( );
function render( ){
// copy the target vector to newTarget so that the original self.target
// will not change and the camera can still rotate around the original
// target.
newTarget.copy( self.target );
// Set newTarget's Y from the camera Y. So that is looks horizontal.
newTarget.y = self.object.position.y;
// Make the camera look at the objects newTarget
self.object.lookAt( newTarget);
}