Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script src="http://jeromeetienne.github.io/tquery/plugins/domevent/threex.domevent.js"></script>
<div id="container"></div>
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;
}
body {
background: green;
}
#container {
background: rgba(white, 0.1);
width: 800px;
height: 600px;
margin: 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.