[WebGL] Content Awareness

이번 예제는 특정 오브젝트가 마우스 클릭해 반응하도록 하는 것입니다. 마우스 포인터가 놓여진 오브젝트를 인식시켜 클릭 시 그 오브젝트가 회전하도록 합니다.

Download Project

12-02-content-aware.zip

Click here to view with full screen mode

Operations

해당 카드를 마우스 클릭

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 targetList = [];
var projector, mouse = { x: 0, y: 0 };
var objectFlag1 = -1;
var objectFlag2 = -1;
var objectFlag3 = -1;
 
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,150,400);
    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) });
 
    // CONTROLS
    controls = new THREE.OrbitControls( camera, renderer.domElement );
 
    // STATS
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.bottom = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );
 
    // LIGHT
    var light = new THREE.PointLight(0xffffff);
    light.position.set(0,250,0);
    scene.add(light);
 
    // FLOOR
    
    // 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);
    
    ////////////
    // CUSTOM //
    ////////////
    // create image plane 1
    var planeTexture1 = new THREE.ImageUtils.loadTexture( 'img/0.png' );
    planeTexture1.wrapS = planeTexture1.wrapT = THREE.RepeatWrapping; 
    planeTexture1.repeat.set( 1, 1 );
    var planeMaterial1 = new THREE.MeshBasicMaterial( { map: planeTexture1, side: THREE.DoubleSide } );
    var planeGeometry1 = new THREE.PlaneGeometry(70, 90, 2, 2);
    var plane1 = new THREE.Mesh(planeGeometry1, planeMaterial1);
    plane1.position.x = 0;
    plane1.id = 1;
    scene.add(plane1);
 
    // create image plane 2
    var planeTexture2 = new THREE.ImageUtils.loadTexture( 'img/4.png' );
    planeTexture2.wrapS = planeTexture2.wrapT = THREE.RepeatWrapping; 
    planeTexture2.repeat.set( 1, 1 );
    var planeMaterial2 = new THREE.MeshBasicMaterial( { map: planeTexture2, side: THREE.DoubleSide } );
    var planeGeometry2 = new THREE.PlaneGeometry(70, 90, 2, 2);
    var plane2 = new THREE.Mesh(planeGeometry2, planeMaterial2);
    plane2.position.x = -120;
    plane2.id = 2;
    scene.add(plane2);
 
    // create image plane 3
    var planeTexture3 = new THREE.ImageUtils.loadTexture( 'img/5.png' );
    planeTexture3.wrapS = planeTexture3.wrapT = THREE.RepeatWrapping; 
    planeTexture3.repeat.set( 1, 1 );
    var planeMaterial3 = new THREE.MeshBasicMaterial( { map: planeTexture3, side: THREE.DoubleSide } );
    var planeGeometry3 = new THREE.PlaneGeometry(70, 90, 2, 2);
    var plane3 = new THREE.Mesh(planeGeometry3, planeMaterial3);
    plane3.position.x = 120;
    plane3.id = 3;
    scene.add(plane3);
    
    // push image planes into targetList which is the list of collidable object groups by raycast
    targetList.push(plane1);
    targetList.push(plane2);
    targetList.push(plane3);
    
    //////////////////////////////////////////////////////////////////////
    
    // initialize object to perform world/screen calculations
    projector = new THREE.Projector();
    
    // when the mouse button released, call the given function
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
}
 
function onDocumentMouseUp( event )
{
    // update the mouse position
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
    console.log("mouse.x : " + mouse.x.toString() + " , mouse.y : " + mouse.y.toString());
    
    // find intersections
 
    // create a Ray with origin at the mouse position
    // and direction into the scene (camera direction)
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
    projector.unprojectVector( vector, camera );
    var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
 
    // create an array containing all objects in the scene with which the ray intersects
    var intersects = ray.intersectObjects( targetList );
    
    // if there is one (or more) intersections
    if ( intersects.length > 0 )
    {
        switch(intersects[ 0 ].object.id) {
            case 1:
                objectFlag1 *= -1;
                // event processing for plane1 (ID: 1)
                if(objectFlag1 == 1) {
                    // target position/rotation/scale for the object clicked
                    var posTarget = intersects[ 0 ].object.position;
                    var rotTarget = new THREE.Vector3( 0, Math.PI, 0 );
                    var sclTarget = intersects[ 0 ].object.scale;
                }
 
                if(objectFlag1 == -1) {
                    // target position/rotation/scale for the object clicked
                    var posTarget = intersects[ 0 ].object.position;
                    var rotTarget = new THREE.Vector3( 0, 0, 0 );
                    var sclTarget = intersects[ 0 ].object.scale;
                }
                break;
 
            case 2:
                objectFlag2 *= -1;
                // event processing for plane1 (ID: 1)
                if(objectFlag2 == 1) {
                    // target position/rotation/scale for the object clicked
                    var posTarget = intersects[ 0 ].object.position;
                    var rotTarget = new THREE.Vector3( 0, Math.PI, 0 );
                    var sclTarget = intersects[ 0 ].object.scale;
                }
 
                if(objectFlag2 == -1) {
                    // target position/rotation/scale for the object clicked
                    var posTarget = intersects[ 0 ].object.position;
                    var rotTarget = new THREE.Vector3( 0, 0, 0 );
                    var sclTarget = intersects[ 0 ].object.scale;
                }
                break;
 
            case 3:
                objectFlag3 *= -1;
                // event processing for plane1 (ID: 1)
                if(objectFlag3 == 1) {
                    // target position/rotation/scale for the object clicked
                    var posTarget = intersects[ 0 ].object.position;
                    var rotTarget = new THREE.Vector3( 0, Math.PI, 0 );
                    var sclTarget = intersects[ 0 ].object.scale;
                }
 
                if(objectFlag3 == -1) {
                    // target position/rotation/scale for the object clicked
                    var posTarget = intersects[ 0 ].object.position;
                    var rotTarget = new THREE.Vector3( 0, 0, 0 );
                    var sclTarget = intersects[ 0 ].object.scale;
                }
                break;
        }
 
        // transform the object clicked to target by Tween
        transform( intersects[ 0 ].object, posTarget, rotTarget, sclTarget, 1000 );
    }
}
 
function transform( object, posTarget, rotTarget, sclTarget, duration ) {
    TWEEN.removeAll();
 
    // Position transform
    new TWEEN.Tween( object.position )
        .to( { x: posTarget.x, y: posTarget.y, z: posTarget.z }, duration )
        .easing( TWEEN.Easing.Quadratic.InOut )
        .start();
 
    // Rotation transform
    new TWEEN.Tween( object.rotation )
        .to( { x: rotTarget.x, y: rotTarget.y, z: rotTarget.z }, duration )
        .easing( TWEEN.Easing.Quadratic.InOut )
        .start();
 
    // Rotation transform
    new TWEEN.Tween( object.scale )
        .to( { x: sclTarget.x, y: sclTarget.y, z: sclTarget.z }, duration )
        .easing( TWEEN.Easing.Quadratic.InOut )
        .start();
 
    new TWEEN.Tween( this )
        .to( {}, duration * 2 )
        .onUpdate( render )
        .start();
}
 
function animate()
{
    requestAnimationFrame( animate );
    TWEEN.update();
    render();
    update();
}
 
function update()
{
    if ( keyboard.pressed("z") ) 
    { 
        // do something
    }
    
    controls.update();
    stats.update();
}
 
function render() 
{
    renderer.render( scene, camera );
}