Rotating the camera in a 2D space using three.js

Question

Rotating the camera in a 2D space using three.js

Within my app, I have implemented a camera:

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 1;
camera.position.y = -5;
camera.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90));
camera.up = new THREE.Vector3(0, 0, 1);

The code inside the render function is supposed to rotate the camera as I press certain keys:

if (leftPressed) {
    camera.rotateOnAxis((new THREE.Vector3(0, 1, 0)).normalize(), degInRad(1));
} else if (rightPressed) {
    camera.rotateOnAxis((new THREE.Vector3(0, 1, 0)).normalize(), degInRad(-1));
}
if (upPressed) {
    camera.rotateOnAxis((new THREE.Vector3(1, 0, 0)).normalize(), degInRad(1));
} else if (downPressed) {
    camera.rotateOnAxis((new THREE.Vector3(1, 0, 0)).normalize(), degInRad(-1));
}

The camera rotates, but not in the manner I desire. I want the camera rotation to mimic that of a first-person shooter game on a plane. Refer to the image below for better understanding of what I mean...
I attempted to use sin(1) and cos(1), but I am struggling to comprehend how the rotateOnAxis method works, as the translate functions work seamlessly and move the camera in the direction it is facing.
P.S.
Check out the documentation for three.js here. Maybe it can provide some insights.
For handling keyboard events, I have utilized KeyboardJS.
Here is the degInRad function:

function degInRad(deg) {
    return deg * Math.PI / 180;
}

Link to the JSFiddle

O - position of camera
O-O1 - current camera direction
R1 - current rotation direction
R - desired rotation direction
Apologies for the simplistic illustration.

javascript camera rotation three.js perspectivecamera

Answer 1

Answer №1

By just specifying camera.rotation.order = 'YXZ';, you could possibly achieve your desired outcome.

Answer 2

By just specifying camera.rotation.order = 'YXZ';, you could possibly achieve your desired outcome.

Answer 3

Answer №2

If you're thinking about setting up a camera rig, here's one way to approach it. Start by creating an Object3D to serve as the "neck", and then attach the camera to that object with your desired rotation. By applying rotations to the Object3D, you can look around without any wobbling effect. To take it a step further, you could nest that "neck" object within another Object3D acting as the "body" and apply translations to move around the scene. This essentially gives you a basic camera controller rig. I made some adjustments to your fiddle, check them out:

Update: modified implementation for @ostapische's specific scenario. Here's the revised fiddle link

function degInRad(deg) {
    return deg * Math.PI / 180;
}
/////////////////////////////////
function render() {
    requestAnimationFrame(render);
    if (leftPressed) {
        neck.rotation.y += degInRad(1);
    } else if (rightPressed) {
        neck.rotation.y -= degInRad(1);
    }
    if (upPressed) {
        camera.rotation.x += degInRad(1);
    } else if (downPressed) {
        camera.rotation.x -= degInRad(1);
    }
    renderer.render(scene, camera);
}
/////////////////////////////////
var scene, camera, renderer, grass, neck;
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;
/////////////////////////////////
window.onload = function() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    cameraHolder = new THREE.Object3D();
    cameraHolder.add( camera );
    renderer = new THREE.WebGLRenderer();
    renderer.rendererSize = {width: window.innerWidth, height: window.innerHeight, quality: 100, maxQuality: 400, minQuality: 20};
    renderer.setSize( renderer.rendererSize.width, renderer.rendererSize.height );
    document.body.appendChild( renderer.domElement );

    var texture, material, geometry, element;

    material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    material.side = THREE.DoubleSide;
    geometry = new THREE.PlaneGeometry(24, 24);   
    grass = new THREE.Mesh( geometry, material );
    grass.name = "grass";
    scene.add( grass );

    neck = new THREE.Object3D();
    neck.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90));
    neck.up = new THREE.Vector3(0, 0, 1);
    neck.position.z = 1;
    neck.position.y = -5;


    neck.add(camera);
    scene.add(neck);    

    KeyboardJS.on('left', function() { leftPressed = true; }, function() { leftPressed = false; });
    KeyboardJS.on('right', function() { rightPressed = true; }, function() { rightPressed = false; });
    KeyboardJS.on('up', function() { upPressed = true; }, function() { upPressed = false; });
    KeyboardJS.on('down', function() { downPressed = true; }, function() { downPressed = false; });

    render();
}

I was going to suggest using PointLockControl or FirstPersonControl, but it seems WestLangley has already recommended it. Best of luck,

Answer 4

If you're thinking about setting up a camera rig, here's one way to approach it. Start by creating an Object3D to serve as the "neck", and then attach the camera to that object with your desired rotation. By applying rotations to the Object3D, you can look around without any wobbling effect. To take it a step further, you could nest that "neck" object within another Object3D acting as the "body" and apply translations to move around the scene. This essentially gives you a basic camera controller rig. I made some adjustments to your fiddle, check them out:

Update: modified implementation for @ostapische's specific scenario. Here's the revised fiddle link

function degInRad(deg) {
    return deg * Math.PI / 180;
}
/////////////////////////////////
function render() {
    requestAnimationFrame(render);
    if (leftPressed) {
        neck.rotation.y += degInRad(1);
    } else if (rightPressed) {
        neck.rotation.y -= degInRad(1);
    }
    if (upPressed) {
        camera.rotation.x += degInRad(1);
    } else if (downPressed) {
        camera.rotation.x -= degInRad(1);
    }
    renderer.render(scene, camera);
}
/////////////////////////////////
var scene, camera, renderer, grass, neck;
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;
/////////////////////////////////
window.onload = function() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    cameraHolder = new THREE.Object3D();
    cameraHolder.add( camera );
    renderer = new THREE.WebGLRenderer();
    renderer.rendererSize = {width: window.innerWidth, height: window.innerHeight, quality: 100, maxQuality: 400, minQuality: 20};
    renderer.setSize( renderer.rendererSize.width, renderer.rendererSize.height );
    document.body.appendChild( renderer.domElement );

    var texture, material, geometry, element;

    material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    material.side = THREE.DoubleSide;
    geometry = new THREE.PlaneGeometry(24, 24);   
    grass = new THREE.Mesh( geometry, material );
    grass.name = "grass";
    scene.add( grass );

    neck = new THREE.Object3D();
    neck.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90));
    neck.up = new THREE.Vector3(0, 0, 1);
    neck.position.z = 1;
    neck.position.y = -5;


    neck.add(camera);
    scene.add(neck);    

    KeyboardJS.on('left', function() { leftPressed = true; }, function() { leftPressed = false; });
    KeyboardJS.on('right', function() { rightPressed = true; }, function() { rightPressed = false; });
    KeyboardJS.on('up', function() { upPressed = true; }, function() { upPressed = false; });
    KeyboardJS.on('down', function() { downPressed = true; }, function() { downPressed = false; });

    render();
}

I was going to suggest using PointLockControl or FirstPersonControl, but it seems WestLangley has already recommended it. Best of luck,

Rotating the camera in a 2D space using three.js

Answer №1

Answer №2

Similar questions

Execute code after selecting the link

Solving an object in ui-router state using ui-sref

Issue encountered: The function car.reviews.find() is not recognized

Double loading issue with jQuery AJAX

Tips for managing this JavaScript JSON array

Having trouble activating a function through the context API using React hooks

Tips on adding to Jquery html code while maintaining the current CSS styling

The JavaScript code does not call an external function to retrieve data from the database

Is there a way to set an image as the background of my HTML screen?

The Angular Google Maps Module fails to initialize

Trouble with Angular: Passing output between child components is not working

A Guide to Making a Floating Widget That Can Move Beyond the Boundaries of a Website in React

Sorting JSON content to obtain particular outcomes

Preventing scrolling in jQuery UI Draggable when using flexbox

Utilizing dependency injection within an Angular 1 TypeScript application

Tips for displaying a close icon after completing a file upload

How can Vue detect modifications made in the edited field?

Exploring how to retrieve time using PHP and JavaScript

What is the best way to calculate the sum of a field within a map?

What is the best way for library creators to indicate to VSCode which suggested "import" is the correct one?