Cube – Mouse move (Drag) to rotate the cube

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - geometry - cube</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/three.min.js"></script>

<script>
    var camera, scene, renderer;
    var mesh;

    init();
    //animate();
    event_setup();

    function init() {
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;
        scene = new THREE.Scene();

        var texture = new THREE.TextureLoader().load( 'images/seasons_01.jpg' );

        var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
        //var material = new THREE.MeshBasicMaterial( { map: texture } );
        mesh = new THREE.Mesh( geometry, materials() );
        scene.add( mesh );

        mesh.rotation.x = Math.PI/4;
        mesh.rotation.y = Math.PI/4;

        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

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

    function materials(){
        var loader = new THREE.TextureLoader();
        var materialArray = [
            new THREE.MeshBasicMaterial( { map: loader.load("images/seasons_01.jpg") } ),
            new THREE.MeshBasicMaterial( { map: loader.load("images/seasons_02.jpg") } ),
            new THREE.MeshBasicMaterial( { map: loader.load("images/seasons_03.jpg") } ),
            new THREE.MeshBasicMaterial( { map: loader.load("images/seasons_04.jpg") } ),
            new THREE.MeshBasicMaterial( { map: loader.load("images/seasons_01.jpg") } ),
            new THREE.MeshBasicMaterial( { map: loader.load("images/seasons_02.jpg") } )
        ];

        return materialArray;
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
        requestAnimationFrame( animate );
        //mesh.rotation.x += 0.005;
        //mesh.rotation.y += 0.01;
        renderer.render( scene, camera );
    }

    function event_setup(){
        var isDragging = false;
        var previousMousePosition = {
            x: 0,
            y: 0
        };
        $(renderer.domElement).on('mousedown', function(e) {
            isDragging = true;
        })
        .on('mousemove', function(e) {
            //console.log(e);
            var deltaMove = {
                x: e.offsetX-previousMousePosition.x,
                y: e.offsetY-previousMousePosition.y
            };

            if(isDragging) {
                    
                var deltaRotationQuaternion = new THREE.Quaternion()
                    .setFromEuler(new THREE.Euler(
                        toRadians(deltaMove.y * 1),
                        toRadians(deltaMove.x * 1),
                        0,
                        'XYZ'
                    ));
                
                mesh.quaternion.multiplyQuaternions(deltaRotationQuaternion, mesh.quaternion);
            }
            
            previousMousePosition = {
                x: e.offsetX,
                y: e.offsetY
            };
        });
        /* */

        $(document).on('mouseup', function(e) {
            isDragging = false;
        });

        // shim layer with setTimeout fallback
        window.requestAnimFrame = (function(){
            return  window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();
    }

    var lastFrameTime = new Date().getTime() / 1000;
    var totalGameTime = 0;

    function update(dt, t) {
        //console.log(dt, t);
        
        //camera.position.z += 1 * dt;
        //cube.rotation.x += 1 * dt;
        //cube.rotation.y += 1 * dt;
        
        setTimeout(function() {
            var currTime = new Date().getTime() / 1000;
            var dt = currTime - (lastFrameTime || currTime);
            totalGameTime += dt;
            
            update(dt, totalGameTime);
        
            lastFrameTime = currTime;
        }, 0);
    }


    function render() {
        renderer.render(scene, camera);
        
        
        requestAnimFrame(render);
    }

    function toRadians(angle) {
        return angle * (Math.PI / 180);
    }

    function toDegrees(angle) {
        return angle * (180 / Math.PI);
    }

    render();
    update(0, totalGameTime);
</script>

    </body>
</html>

Reference: