index.html

<script src="http://jeromeetienne.github.io/tquery/plugins/domevent/threex.domevent.js"></script>
<div id="container"></div>

script.js

var width = 800, height = 600;
var camera = new THREE.PerspectiveCamera(70, width / height, 1, 6000);
var scene = new THREE.Scene();
var renderer = new THREE.CanvasRenderer({antialias:true});
renderer.setSize(width, height);
$('#container').append(renderer.domElement);
camera.position.z = 600;

// move this to on mousedown, then destroy interval on mouseup
setInterval(function() {
    renderer.render(scene, camera);  
}, 1000 / 60);

var geometry = new THREE.CubeGeometry(500, 10, 600);
for (var i = 0; i < geometry.faces.length; i ++) {
    geometry.faces[i].color.setHex(Math.random() * 0xffffff);
}

var material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors});
var cube = new THREE.Mesh(geometry, material);
//end threejs setup


var RADIAN = Math.PI / 180;
var hold = {};
var object = new THREE.Object3D();
scene.add(object);
object.add(cube);

window.addEventListener('mousedown', mouseDown);
window.addEventListener('mouseup', mouseUp);

function mouseDown(e) {
    hold.x = e.pageX;
    hold.y = e.pageY;
    window.addEventListener('mousemove', mouseMove);
}

function mouseMove(e) {
    var diffX = e.pageX - hold.x;
    var diffY = e.pageY - hold.y;
    
    object.rotation.x = (diffY * 0.25) * RADIAN;
    object.rotation.y = (diffX * 0.25) * RADIAN;
}

function mouseUp() {

    window.removeEventListener('mousemove', mouseMove);
    
    cube.applyMatrix( object.matrixWorld ); // CHANGED
    
    object.rotation.x = 0;
    object.rotation.y = 0;

}

style.css

body {
  background: green;
}

#container {
	background: rgba(white, 0.1);
  width: 800px;
  height: 600px;
 margin: 0 auto;
}

ThreeJS-Simple-Example.markdown

ThreeJS Simple Example

A Pen by Jim Savage on CodePen.

License.