Move camera with mouse : camera shakes/shivers/trembles (three.js 77)

Hi guys !

I try to do a simple thing :
Move the camera along the X and Y axis with the mouse.
But it produces a strange effet : shake, shiver or trembe, it’s not fluid.

with : three.js 77, all browsers, Windows 8 and good hardware.

Don’t pay attention to all the details in the code, it was for a more complicate thing and I made a simple example to focus on this trouble.
Basically, I just create random boxes to make a scenery.
And all important things are in the function mouseMove() and its result.

Thanks for your attention,
Regards,
Getzel

Here is the fiddle :
https://jsfiddle.net/#&togetherjs=4CBxN1E4Q1

`<html>
    <head>
        <title>Move camera with mouse</title>
        <meta charset="utf8" />
        <style>
            body { margin: 0; }
            canvas { width: 100%%; height: 100%% }
        </style>
    </head>
    <body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script>
<script>




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

var renderer = new THREE.WebGLRenderer( {alpha : true} );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


var randoms = [];
var mouse = {x:0,y:0};
var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.2};



initCubes(50);



render();






function mouseMove(e){



    if (e.clientX>mouse.x) { camera.position.x += cameraMoves.speed; } else { camera.position.x += -cameraMoves.speed; }
    if (e.clientY>mouse.y) { camera.position.y += -cameraMoves.speed; } else { camera.position.y += cameraMoves.speed; }

    mouse.x = e.clientX;
    mouse.y = e.clientY;

}
window.addEventListener('mousemove', mouseMove);



function initCubes(n){  


    for (var i=0; i<n; i++) {


        randoms[i] = makeRandom();      
        createCube(randoms[i].x, randoms[i].y, randoms[i].z, randoms[i].width, randoms[i].height, randoms[i].depth);


    }//for


}//initCubes()





function makeRandom(){

    var x = Math.floor(Math.random() * 20 -10);
    var y = Math.floor(Math.random() * 20 -10);
    var z = Math.floor(Math.random() * -50);

    var width = Math.ceil(Math.random() * 6);
    var height = Math.ceil(Math.random() * 6);
    var depth = 2;

    return {x:x, y:y, z:z, width:width, height:height, depth:depth};

}   // makeRandom()


function createCube(x,y,z,width,height,depth){

    var geometry = new THREE.BoxGeometry( width, height, depth );

    var cube = new THREE.Mesh(geometry);
    scene.add(cube);
    cube.position.set(x,y,z);

}//createCube()




function render() {
    requestAnimationFrame( render );


    //camera.position.z += cameraMoves.z; 





    renderer.render(scene, camera);
}// render()



</script>
</body>
</html>`

Author: Fantashit

1 thought on “Move camera with mouse : camera shakes/shivers/trembles (three.js 77)

Comments are closed.