Big shoutout to the amazing Stack Overflow community for always being there to help budding coders like myself!
I've successfully implemented first-person camera movement in my project, allowing me to navigate forward, backward, sideways, and rotate using arrow keys. Now, I'm looking to enhance the experience by enabling mouse look functionality - the ability to click and drag to look sideways, up, and down. I've tried using three.js-pointlocker and first-person controls, but they didn't quite meet my requirements. Is there a way to implement mouse look alongside my existing keyboard movements?
For keyboard movements, I've been using THREEx.KeyboardState.js by stemkoshi:
var delta = clock.getDelta();
var moveDistance = 50 * delta; // 200 pixels per second
var rotateAngle = Math.PI / 2 * delta;
if ( keyboard.pressed("W") || keyboard.pressed("up"))
camera.translateZ( -moveDistance );
if ( keyboard.pressed("S")|| keyboard.pressed("down"))
camera.translateZ( moveDistance );
if ( keyboard.pressed("Q") )
camera.translateX( -moveDistance );
if ( keyboard.pressed("E") )
camera.translateX( moveDistance );
var rotation_matrix = new THREE.Matrix4().identity();
if ( keyboard.pressed("A")|| keyboard.pressed("left") )
camera.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
if ( keyboard.pressed("D")|| keyboard.pressed("right") )
camera.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
if ( keyboard.pressed("R") )
camera.rotateOnAxis( new THREE.Vector3(1,0,0), rotateAngle);
if ( keyboard.pressed("F") )
camera.rotateOnAxis( new THREE.Vector3(1,0,0), -rotateAngle);
if ( keyboard.pressed("Z") )
{
camera.position.set(0,17,0);
camera.rotation.set(0,0,0);
}