Here is the complete code snippet in jsFiddle:
http://jsfiddle.net/73v15kb6/1/
While rotating around the Y and Z axes yields expected results, there seems to be some additional effect applied by THREE.js when rotating around the X axis - which is not what I intended.
After looking at similar discussions, it appears that the issue lies within my rotateX function:
camera.position.y = y * cos - z * sin;
camera.position.z = y * sin + z * cos;
camera.lookAt(scene.position);
Upon initializing the 3D environment, I set the camera's initial position to maintain the desired viewpoint:
camera.position.x = -60;
camera.position.y = 30;
camera.position.z = 0;
If anyone has insights on where I may have gone wrong, I would greatly appreciate your help! Thank you!