[WebGL] Refraction

이번 예제는 Refraction Material에 관한 것이다. Refraction Material은 유리와 같은 투명 재질을 표현하기 위한 것입니다.

Download Project

03-03-refraction.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 refractSphere, refractSphereCamera; // for refract material
var refractCube, refractCubeCamera; // for refract material
var rotY, step;
 
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);
 
    // spotlight #1 -- yellow, dark shadow
    var spotlight = new THREE.SpotLight(0xffc051);
    spotlight.position.set(-60,500,-30);
    spotlight.shadowCameraVisible = true;
    spotlight.shadowDarkness = 0.95;
    spotlight.intensity = 2;
    spotlight.castShadow = true; // enable shadow casting ability for the light
    scene.add(spotlight);
 
    // 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.DoubleSide } );
    var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -40.5;
    floor.rotation.x = Math.PI / 2;
    floor.receiveShadow = true;
    scene.add(floor);
    
    // SKYBOX
    var imagePrefix = "img/park-";
    var directions  = ["posx", "negx", "posy", "negy", "posz", "negz"];
    var imageSuffix = ".jpg";
    var skyGeometry = new THREE.CubeGeometry( 5000, 5000, 5000 );    
    
    var materialArray = [];
    for (var i = 0; i < 6; i++)
        materialArray.push( new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
            side: THREE.BackSide
        }));
    var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
    var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
    scene.add( skyBox );
    
    ////////////
    // CUSTOM //
    ////////////
    renderer.shadowMapEnabled = true;
 
    // ADD A SPHERE MESH
    var sphereGeom =  new THREE.SphereGeometry( 80, 64, 32 );
    refractSphereCamera = new THREE.CubeCamera( 0.1, 5000, 512 );
    scene.add( refractSphereCamera );
    
    refractSphereCamera.renderTarget.mapping = new THREE.CubeRefractionMapping();
    
    var sphereRefractMaterial = new THREE.MeshBasicMaterial( { 
        color: 0xccccff, 
        envMap: refractSphereCamera.renderTarget, 
        refractionRatio: 0.985, 
        reflectivity: 0.9 
        } );        
 
    refractSphere = new THREE.Mesh( sphereGeom, sphereRefractMaterial );
    refractSphere.position.set(-100,50,0);
    refractSphereCamera.position = refractSphere.position;
    refractSphere.castShadow = true;
    scene.add(refractSphere);
 
    // ADD A CUBE MESH
    var cubeGeom = new THREE.CubeGeometry( 120, 120, 120 );
    refractCubeCamera = new THREE.CubeCamera( 0.1, 5000, 512 );
    scene.add( refractCubeCamera );
 
    refractCubeCamera.renderTarget.mapping = new THREE.CubeRefractionMapping();
    
    var cubeRefractMaterial = new THREE.MeshBasicMaterial( { 
        color: 0xff879b, 
        envMap: refractCubeCamera.renderTarget, 
        refractionRatio: 0.985, 
        reflectivity: 0.9 
        } );        
 
    refractCube = new THREE.Mesh( cubeGeom, cubeRefractMaterial );
    rotY = 0;
    step = 0.005;
    refractCube.position.set(100,50,0);
    refractCube.rotation.y = rotY;
    refractCubeCamera.position = refractCube.position;
    refractCube.castShadow = true;
    scene.add(refractCube);
}
 
function animate() 
{
    requestAnimationFrame( animate );
    render();        
    update();
}
 
function update()
{
    rotY += step;
    refractCube.rotation.y = rotY;
 
    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
 
    refractSphere.visible = false;
    refractSphereCamera.updateCubeMap( renderer, scene );
    refractSphere.visible = true;
 
    refractCube.visible = false;
    refractCubeCamera.updateCubeMap( renderer, scene );
    refractCube.visible = true;
    
    renderer.render( scene, camera );
}