Three.js TranslateX或Y导致旋转，但我只是希望它沿着轴直线移动

Question

我使用Three.js和TrackballControl来创建3D场景。

我创建了一个新的PerspectiveCamera

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );

我添加了一些放大，缩小，左，右等按钮......以下是放大的代码：

var button = document.getElementById( 'ctrlin' );
button.addEventListener( 'click', function ( event ) {

    camera.translateZ( -100 );

}, false );

然而，当我尝试＆＃34; camera.translateY＆＃34;或＆＃34; camera.translateX＆＃34;我的相机旋转了。

我只是希望它沿着直轴移动。

我意识到这可能与锁定的万向节设置有关，但我不确定如何解决这个问题。

移动物体或相机会更好吗？我如何在直线X或Y轴上做？

Answer 1

如果沿X轴移动相机，则还必须沿X轴移动相机的目标相同的距离，否则它会旋转，因为它会继续查看相同的点。

看看是否可以帮助您解决问题。

另一个解决方案可能是将相机和目标添加到容器对象中并开始移动对象：）

修改

可以找到包含a的最后一个解决方案的示例in this answer on StackOverflow