[WebGL] Mouse Dragging

이번 예제는 마우스 드래그를 통해 컨텐츠를 컨트롤 하는 것에 관한 것입니다. 개인적으로는 본 테스트 프로젝트를 만들면서 꽤 재밌었던 기억이 납니다. 매우 심플하지만 응용하면 요긴한 프로젝트라는 생각이 듭니다.

Download Project

12-01-mouse-drag.zip

Click here to view with full screen mode

Operations

Mouse Left Button Click + Drag

main.js

// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
 
// custom global variables
var myArray = [];
var angleArray = [];
var mouseStart = { x: 0, y: 0 };
var mouseEnd = { x: 0, y: 0 };
var mouseFlag = -1;
var step = 0;
var sf = 0.5;
var radius = 150;
 
init();
animate();
 
// FUNCTIONS
function init()
{
    // SCENE
    scene = new THREE.Scene();
 
    // CAMERA
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    scene.add(camera);
    camera.position.set(0,0,700);
    camera.lookAt(scene.position);
 
    // RENDERER
    if ( Detector.webgl )
        renderer = new THREE.WebGLRenderer( {antialias:true} );
    else
        renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.getElementById( 'ThreeJS' );
    container.appendChild( renderer.domElement );
 
    // EVENTS
    THREEx.WindowResize(renderer, camera);
    THREEx.FullScreen.bindKey({ charCode : 'f'.charCodeAt(0) });
 
    // LIGHT
    var light = new THREE.PointLight(0xffffff);
    light.position.set(0,150,100);
    scene.add(light);
 
    // IMAGE PLANES
    for (var i = 0; i<10; i++){
        var planeTexture = new THREE.ImageUtils.loadTexture( 'img/'+i.toString()+'.jpg' );
        planeTexture.wrapS = planeTexture.wrapT = THREE.RepeatWrapping; 
        planeTexture.repeat.set( 1, 1 );
        var planeMaterial = new THREE.MeshBasicMaterial( { map: planeTexture, side: THREE.DoubleSide } );
        var planeGeometry = new THREE.PlaneGeometry(70, 90, 10, 10);
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.position.x = -100;
        plane.position.z = Math.sin((i/10)*Math.PI*2)*radius;
        plane.position.y = Math.cos((i/10)*Math.PI*2)*radius;
        myArray.push(plane);
        scene.add(myArray[i]);
    }
 
    // PLACEMENT OF IMAGE PLANES
    for(var i = 0 ; i<10; i++){
        angleArray[i] = (i/10)*Math.PI*2;
        myArray[i].position.z = Math.sin(angleArray[i])*radius;
        myArray[i].position.y = Math.cos(angleArray[i])*radius;
    }
    
    // SKYBOX/FOG
    var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
    var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.BackSide } );
    var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
    scene.add(skyBox);
    
    // MOUSE EVENTS
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
}
 
// EXECUTE WHEN MOUSE BUTTON CLICKED
function onDocumentMouseDown( event )
{
    mouseFlag = 1;
    
    // update the mouse variable
    mouseStart.y = event.clientY/window.innerHeight;
    mouseEnd.y = event.clientY/window.innerHeight;
 
    for(var i = 0 ; i<10; i++){
        myArray[i].position.z = Math.sin(angleArray[i])*radius;
        myArray[i].position.y = Math.cos(angleArray[i])*radius;
    }
}
 
// EXECUTE WHEN MOUSE MOVES
function onDocumentMouseMove( event )
{
    if(mouseFlag == 1)
    {
        // update the mouse variable
        mouseEnd.y = event.clientY/window.innerHeight;
        step = (mouseEnd.y - mouseStart.y)/sf;
 
        for(var i = 0 ; i<10; i++){
            myArray[i].position.z = Math.sin(angleArray[i] + step)*radius;
            myArray[i].position.y = Math.cos(angleArray[i] + step)*radius;
        }
    }
}
 
// EXECUTE WHEN MOUSE BUTTON RELEASED
function onDocumentMouseUp( event )
{
    mouseFlag = -1;
 
    for(var i = 0 ; i<10; i++){
        angleArray[i] = angleArray[i] + step;
    }
}
 
function animate() 
{
    requestAnimationFrame( animate );
    render();        
    update();
}
 
function update()
{
    // add some code for update
}
 
function render() 
{
    renderer.render( scene, camera );
}