JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<!--

Drag and release a few times -- the first time will be OK, but it will get weird after that

-->

JavaScript

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 6000);
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 600;

setInterval(function() {
    renderer.render(scene, camera);  
}, 1000 / 60);

var geometry = new THREE.CubeGeometry(200, 200, 200);
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;

}