In my Three.js project with TrackballControls, I am working on creating a dynamic 3D scene.
One of the key components is the PerspectiveCamera that I have initialized:
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
To enhance user interactivity, I included various buttons for zooming in different directions. The code snippet for zooming in successfully reads:
var button = document.getElementById('ctrlin');
button.addEventListener('click', function (event) {
camera.translateZ(-100);
}, false);
However, when attempting to use "camera.translateY" or "camera.translateX", it seems to cause unintended rotation of the camera.
I simply want the camera to move along a straight axis without any rotation.
It's possible that this issue relates to a locked gimbal setting, but I'm unsure about how to address it.
Would it be more effective to move the object instead of the camera? And if so, how can I achieve movement along a pure X or Y axis?