CODEWITHSUNDEEP
camerathree.js
Paul de Koning
Paul de Koning

Reputation: 532

3D camera X axis rotation

I have litteraly no clue how to explain this problem, since it is is self explanitory if you look at the following video's I made.

No Angle - https://www.youtube.com/watch?v=R_GtaXWpP9c&feature=youtu.be

Angle - https://www.youtube.com/watch?v=RoaZMccGYGo&feature=youtu.be

As you can see in the No Angle version you can rotate the Y axis perfectly normal, but when you control the X axis (as seen in the 'Angle' video) you rotate in a weird way, which makes sense. I want, as you may have guessed, that the X axis stays the same whilst the Y axis keeps moving left to right, I dont want the Y axis to dip from positive to negative.

I hope this makes sense and hopefully there is a good explanation for it, i'm probably missing a website which has all the formulas, but im not sure what the 'problem' is called.

Some code of my rotation script:

var pressed = [0,0,0,0,0,0,0,0];
function update() {
    $('#w').html(pressed);
}
setInterval(update, 100);
$(document).keydown(function(evt) {
    if (evt.which == 87) {
        pressed[0] = 1;
    }
    if(evt.which == 68) {
        pressed[1] = 1;
    }
    if(evt.which == 65) {
        pressed[2] = 1;
    }
    if(evt.which == 83) {
        pressed[3] = 1;
    }
    if(evt.which == 39) {
        pressed[4] = 1;
    }
    if(evt.which == 37) {
        pressed[5] = 1;
    }
    if(evt.which == 38) {
        pressed[6] = 1;
    }
    if(evt.which == 40) {
        pressed[7] = 1;
    }
    //console.log(evt.which);
});
$(document).keyup(function(evt) {
    if (evt.which == 87) {
        pressed[0] = 0;
    }
    if(evt.which == 68) {
        pressed[1] = 0;
    }
    if(evt.which == 65) {
        pressed[2] = 0;
    }
    if(evt.which == 83) {
        pressed[3] = 0;
    }
    if(evt.which == 39) {
        pressed[4] = 0;
    }
    if(evt.which == 37) {
        pressed[5] = 0;
    }
    if(evt.which == 38) {
        pressed[6] = 0;
    }
    if(evt.which == 40) {
        pressed[7] = 0;
    }
});
function check_pressed() {
    if(pressed[0] == 1){
        camera.position.z = camera.position.z - 0.1;
    }
    if(pressed[1] == 1){
        camera.position.x = camera.position.x + 0.1;
    }
    if(pressed[2] == 1){
        camera.position.x = camera.position.x - 0.1;
    }
    if(pressed[3] == 1){
        camera.position.z = camera.position.z + 0.1;
    }
    if(pressed[4] == 1){
        if(camera.rotation.y <= Math.PI * -2) {
            camera.rotation.y = 0;
        } else {
            camera.rotation.y -= 0.03;
        }
    }
    if(pressed[5] == 1){
        if(camera.rotation.y >= Math.PI * 2) {
            camera.rotation.y = 0;
        } else {
            camera.rotation.y += 0.03;
        }
    }
    if(pressed[6] == 1){
        if(camera.rotation.x >= 0.5) {
            camera.rotation.x = 0.5;
        } else {
            camera.rotation.x += 0.01;
        }
    }
    if(pressed[7] == 1){
        if(camera.rotation.x <= 0) {
            camera.rotation.x = 0;
        } else {
            camera.rotation.x -= 0.01;
        }
    }

}
setInterval(check_pressed, 20);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/movement.js"></script>
		<script>
			var cubes = [];
            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            //var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

            for(i = 0; i < 4; i++) {
                if(i == 0) {
                    material = new THREE.MeshBasicMaterial( { color: 0x63AEDB } );
				} else {
                    material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
				}
                cubes[i] = new THREE.Mesh( geometry, material );
                scene.add( cubes[i] );
            }
            cubes[1].position.x = -2;
            cubes[1].position.z = 2;
            cubes[2].position.x = 2;
            cubes[2].position.z = 2;
            cubes[3].position.z = 4;
			camera.position.z = 2;
			camera.rotation.y = 0;
			//console.log(camera.rotation.x);
			var render = function () {
				requestAnimationFrame( render );

				//cubes[1].rotation.x += 0.00;
				//cube.rotation.y += 0.01;

				renderer.render(scene, camera);
				
			};
			render();
		</script>
	</body>
</html>

Upvotes: 0

Views: 1390

Answers (2)

WestLangley
WestLangley

Reputation: 104833

Pivots are not required. The simple solution to your issue is to set

camera.rotation.order = 'YXZ'; // the default is 'XYZ'

Then, the camera rotations will behave as you expect.

See this answer for more information.

Updated fiddle: https://jsfiddle.net/07g07uLa/1/

Note in the fiddle, there are no pivots, and there is no need to add the camera to the scene.

three.js r.84

Upvotes: 1

neeh
neeh

Reputation: 3025

You're rotating your camera in its own coordinate system.

When camera.rotation.x (or z) is not 0, the y axis is transformed and not pointing upwards anymore. That explains why the rotation behaves weirdly.

Coordinate system of the camera modified

If you want your y axis to be in the coordinate system of the world, you can add a THREE.Object3D acting as a pivot point as a parent of your camera.

Camera rotation in world coordinates through a pivot

var pivot = new THREE.Object3D();
scene.add(pivot);
pivot.add(camera);

Now, the rotation.y of your camera is controlled by the pivot :

pivot.rotation.y += 0.03;

...And so is the position :

pivot.position.z = 2.0;

I updated your code on this fiddle.

Upvotes: 4

Related Questions