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

Question

我正在使用 Three.js 和 TrackballControls 创建 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 );

但是，当我尝试“camera.translateY”或“camera.translateX”时，我的相机会旋转。

我只是想让它沿着直轴移动。

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

移动物体好还是移动相机好？我将如何在直线 X 或 Y 轴上做？

Answer 1

如果您沿 X 轴移动相机，那么您还必须沿 X 轴将相机的目标移动相同的距离，否则它会旋转，因为它会继续注视同一点。

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

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

编辑:

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