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>`
fixed your fiddle