[WebGL] Cube Map

이번 예제는 Cube Map에 관한 것이며, Cube Map은 environment mapping의 일종으로서 환경이 오브젝트에 반사된 것과 같은 효과를 내기 위한 것입니다.

Download Project

03-02-cubemap.zip

Click here to view with full screen mode

Operations

Mouse Left Button Click & Drag: Camera Rotating

Mouse Wheel: Camera Zoom In & Out

Mouse Right Button Click & Drag: Camera Panning

main.js

// MAIN
// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
 
// custom global variables
var mirrorCube, mirrorCubeCamera; // for mirror material
var mirrorSphere, mirrorSphereCamera; // for mirror material
var mirrorCylinder, mirrorCylinderCamera; // for mirror material
var mirrorText, mirrorTextCamera; // for mirror material
 
var cubeRotY;
 
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
    var floorTexture = new THREE.ImageUtils.loadTexture( 'img/Wood_floor.jpg' );
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
    floorTexture.repeat.set( 1, 1 );
    var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side:THREE.BackSide } );
    var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.rotation.x = Math.PI / 2;
    scene.add(floor);
    
    // SKYBOX/FOG
    var materialArray = [];
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/Park2/posx.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/Park2/negx.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/Park2/posy.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/Park2/negy.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/Park2/posz.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/Park2/negz.jpg' ) }));
    for (var i = 0; i < 6; i++)
       materialArray[i].side = THREE.BackSide;
    var skyboxMaterial = new THREE.MeshFaceMaterial( materialArray );
    var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
    var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
    scene.add( skybox );    
    
    ////////////
    // CUSTOM //
    ////////////
    // Add a cube
    var cubeGeom = new THREE.CubeGeometry(100, 100, 10, 1, 1, 1);
    mirrorCubeCamera = new THREE.CubeCamera( 0.1, 5000, 512 );
    mirrorCubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
    scene.add( mirrorCubeCamera );
    var mirrorCubeMaterial = new THREE.MeshBasicMaterial( { envMap: mirrorCubeCamera.renderTarget } );
    mirrorCube = new THREE.Mesh( cubeGeom, mirrorCubeMaterial );
    mirrorCube.position.set(-100,50,0);
    cubeRotY = 0.0;
    mirrorCubeCamera.position = mirrorCube.position;
    mirrorCube.rotation.set(0.0, cubeRotY, 0.0);
    mirrorCubeCamera.rotation = mirrorCube.rotation;
    scene.add(mirrorCube);
    
    // Add a sphere
    var sphereGeom =  new THREE.SphereGeometry( 50, 32, 16 ); // radius, segmentsWidth, segmentsHeight
    mirrorSphereCamera = new THREE.CubeCamera( 0.1, 5000, 512 );
    mirrorCubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
    scene.add( mirrorSphereCamera );
    var mirrorSphereMaterial = new THREE.MeshBasicMaterial( { envMap: mirrorSphereCamera.renderTarget } );
    mirrorSphere = new THREE.Mesh( sphereGeom, mirrorSphereMaterial );
    mirrorSphere.position.set(0,50,0);
    mirrorSphereCamera.position = mirrorSphere.position;
    scene.add(mirrorSphere);
 
    // Add a cylinder
    var cylinderGeom =  new THREE.CylinderGeometry( 50, 50, 100, 32, 32, false ); // radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded
    mirrorCylinderCamera = new THREE.CubeCamera( 0.1, 5000, 512 );
    mirrorCylinderCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
    scene.add( mirrorCylinderCamera );
    var mirrorCylinderMaterial = new THREE.MeshBasicMaterial( { envMap: mirrorCylinderCamera.renderTarget } );
    mirrorCylinder = new THREE.Mesh( cylinderGeom, mirrorCylinderMaterial );
    mirrorCylinder.position.set(100,50,0);
    mirrorCylinderCamera.position = mirrorCylinder.position;
    scene.add(mirrorCylinder);
 
    // Add a 3D text
    var textGeom = new THREE.TextGeometry( "WEBGL", 
    {
        size: 30, height: 4, curveSegments: 3,
        font: "helvetiker", weight: "bold", style: "normal",
        bevelThickness: 1, bevelSize: 2, bevelEnabled: true,
        material: 0, extrudeMaterial: 1
    });
    // font: helvetiker, gentilis, droid sans, droid serif, optimer
    // weight: normal, bold
    mirrorTextCamera = new THREE.CubeCamera( 0.1, 5000, 512);
    mirrorTextCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
    scene.add( mirrorTextCamera );
    var materialFront = new THREE.MeshBasicMaterial( { envMap: mirrorTextCamera.renderTarget } );
    var materialSide = new THREE.MeshBasicMaterial( { color: 0x000088 } );
    var materialArray = [ materialFront, materialSide ];
    var textMaterial = new THREE.MeshFaceMaterial(materialArray);
    mirrorText = new THREE.Mesh( textGeom, textMaterial );
    textGeom.computeBoundingBox();
    var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
    mirrorText.position.set();
    mirrorText.position.set( -0.5 * textWidth, 0, 100 );
    mirrorText.rotation.x = -Math.PI / 4;
    scene.add(mirrorText);
}
 
function animate() 
{
    requestAnimationFrame( animate );
    render();        
    update();
}
 
function update()
{
    if ( keyboard.pressed("z") )
    { 
        cubeRotY += 0.1;
        mirrorCube.rotation.set(0.0, cubeRotY, 0.0);
        mirrorCubeCamera.rotation = mirrorCube.rotation;
    }
    if ( keyboard.pressed("x") )
    { 
        cubeRotY -= 0.1;
        mirrorCube.rotation.set(0.0, cubeRotY, 0.0);
        mirrorCubeCamera.rotation = mirrorCube.rotation;
    }
    
    controls.update();
    stats.update();
}
 
function render() 
{
    // move the CubeCamera to the position of the object
    //    that has a reflective surface, "take a picture" in each direction
    //    and apply it to the surface.
    // need to hide surface before and after so that it does not
    //    "get in the way" of the camera
    mirrorCube.visible = false;
    mirrorCubeCamera.updateCubeMap( renderer, scene );
    mirrorCube.visible = true;
 
    mirrorSphere.visible = false;
    mirrorSphereCamera.updateCubeMap( renderer, scene );
    mirrorSphere.visible = true;
 
    mirrorCylinder.visible = false;
    mirrorCylinderCamera.updateCubeMap( renderer, scene );
    mirrorCylinder.visible = true;
 
    mirrorText.visible = false;
    mirrorTextCamera.updateCubeMap( renderer, scene );
    mirrorText.visible = true;
    
    renderer.render( scene, camera );
}