My challenge lies in manipulating the camera to move and rotate along its own axis. While the position changes smoothly, the rotation does not seem to work as expected.
Below is an excerpt from my source code:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000);
function camera2() {
this.main = function () {
var camPos = spline.getPoint(camPosIndex / 1000);
camera.position.x = camPos.x;
camera.position.y = camPos.y;
camera.position.z = camPos.z;
camera.rotation.z += 0.01; // this line is causing issues
camera.updateProjectionMatrix();
camera.lookAt(new THREE.Vector3(0, 0, 20000));
}
}
function renderScene() {
fx[i]["fx"].main(); // invoking camera2.main()
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
In the code snippet, when I attempt to adjust camera.rotation.z in the renderScene() function, it works but seems to be affecting a different camera instance. I only have one global var camera, and while the position changes inside main(), the rotation remains unaffected.