Tween camera in response to mousemove event

First off, thanks for being a great open-source community committed to this totally cool technology.
Secondly, feel free to disregard this question/let me know if this is not the appropriate forum for it.

Ok, so I have some code for tweening a camera in response to user input in a kinda tasteful, slow-mo way, and I’m suspicious that my way of accomplishing it is not the optimal way to do it. Was wondering if anyone would like to take a look at it and gimme some tips on how to make it more performant, and clue me in on the relevant best practices to follow. Here’s the code:

$(document).ready(function () {
//init variables
var scene = new THREE.Scene();  
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var mousePos = new THREE.Vector3();

$('body').mousemove(_.throttle(onMouseMove, 100));
var width = window.innerWidth;
var height = window.innerHeight;

function onMouseMove(event) {
  console.log(event.clientY);, 5, {
        x: (event.clientX / width) * 2 - 1,
        y: -((event.clientY / height) * 2 - 1),
        onUpdate: function () {

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);

var cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x909090 });
var cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
var cube = new THREE.Object3D();

cube.position.x = 0;
cube.position.y = 0;
cube.position.z = -5;

cube.rotation.y = Math.random();
cube.rotation.x = Math.random();

// Animate the scene

var animate = function () {
    renderer.render(scene, camera);


// Draw it in the dom and add resize event listener


window.addEventListener('resize', onWindowResize, false);


Here’s a codepen with the dependencies included in case you wanna mess around with it.

1 Like

You can achieve a similar effect in a more lightweight fashion. Check out the code of this example (especially the onDocumentMouseMove() and render() function):

The code does not change the camera but rotates the model according to the user input.


You might also have a look at the various control classes of three.js. All these entities change the transformation of the camera based on user input.

1 Like

Thanks, these camera controls files are especially helpful.