[WebGL] Shadow Basic

이번 예제에서는 Three.js WebGL 프레임웍에서의 그림자를 구현하는 방법에 관한 것입니다.

Download Project

04-01-shadow-basic.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 cube, rotY, step;
var textMesh, rotX;
 
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);
    
    // SKYBOX/FOG
    var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
    var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
    var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
    // scene.add(skyBox);
    scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );
    
    ////////////
    // CUSTOM //
    ////////////
    // must enable shadows on the renderer 
    renderer.shadowMapEnabled = true;
    
    // "shadow cameras" show the light source and direction
    
    // spotlight #1 -- yellow, dark shadow
    var spotlight1 = new THREE.SpotLight(0xffc051);
    spotlight1.position.set(-60,150,-30);
    spotlight1.shadowCameraVisible = true;
    spotlight1.shadowDarkness = 0.95;
    spotlight1.intensity = 2;
    spotlight1.castShadow = true; // enable shadow casting ability for the light
    scene.add(spotlight1);
 
    // spotlight #2 -- red, light shadow
    var spotlight2 = new THREE.SpotLight(0x7cc0ff);
    spotlight2.position.set(60,150,-60);
    scene.add(spotlight2);
    spotlight2.shadowCameraVisible = true;
    spotlight2.shadowDarkness = 0.70;
    spotlight2.intensity = 2;
    spotlight2.castShadow = true;
 
    // set the target position of the lights
    var lightTarget = new THREE.Object3D();
    var targetPosition = new Array();
    targetPosition[0] = 0;
    targetPosition[1] = 50;
    targetPosition[2] = 0;
    lightTarget.position.set(targetPosition[0], targetPosition[1], targetPosition[2]);
    scene.add(lightTarget);
    spotlight1.target = lightTarget;
    spotlight2.target = lightTarget;
 
    // cube: mesh to cast shadows
    var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50 );
    var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x888888 } );
    cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
    step = Math.PI/180;
    rotY = 0;
    cube.rotation.y = rotY;
    cube.position.set(targetPosition[0], targetPosition[1], targetPosition[2]);
    // the mesh is flagged to cast shadows
    cube.castShadow = true;
    scene.add(cube);
 
    // text: mesh to cast shadows
    var materialFront = new THREE.MeshBasicMaterial( { color: 0x00f523 } );
    var materialSide = new THREE.MeshBasicMaterial( { color: 0xffc75c } );
    var materialArray = [ materialFront, materialSide ];
    var textGeom = new THREE.TextGeometry( "WEBGL", 
    {
        size: 30, height: 4, curveSegments: 3,
        font: "helvetiker", weight: "bold", style: "normal",
        bevelThickness: 1, bevelSize: 1, bevelEnabled: true,
        material: 0, extrudeMaterial: 1
    });
    var textMaterial = new THREE.MeshFaceMaterial(materialArray);
    textMesh = new THREE.Mesh( textGeom, textMaterial );
    textMesh.castShadow = true;
    textGeom.computeBoundingBox();
    var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
    textMesh.position.set( -0.5 * textWidth, 30, 100 );
    rotX = 0;
    textMesh.rotation.x = rotX;
    scene.add(textMesh);
    
    // floor: mesh to receive shadows
    var floorTexture = new THREE.ImageUtils.loadTexture( 'img/Wood_floor.jpg' );
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
    floorTexture.repeat.set( 1, 1 );
    // Note the change to Lambert material.
    var floorMaterial = new THREE.MeshLambertMaterial( { map: floorTexture, side: THREE.DoubleSide } );
    var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 100, 100);
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.rotation.x = Math.PI / 2;
    floor.receiveShadow = true; // the mesh is flagged to receive shadows
    scene.add(floor);
    
    // create "light-ball" meshes
    var sphereGeometry = new THREE.SphereGeometry( 10, 16, 8 );
    var darkMaterial = new THREE.MeshBasicMaterial( { color: 0x000000 } );
        
    var wireframeMaterial = new THREE.MeshBasicMaterial( 
        { color: 0xffc051, wireframe: true, transparent: true } ); 
    var shape = THREE.SceneUtils.createMultiMaterialObject( 
        sphereGeometry, [ darkMaterial, wireframeMaterial ] );
    shape.position = spotlight1.position;
    scene.add( shape );
    
    var wireframeMaterial = new THREE.MeshBasicMaterial( 
        { color: 0x7cc0ff, wireframe: true, transparent: true } ); 
    var shape = THREE.SceneUtils.createMultiMaterialObject( 
        sphereGeometry, [ darkMaterial, wireframeMaterial ] );
    shape.position = spotlight2.position;
    scene.add( shape );
}
 
function animate() 
{
    requestAnimationFrame( animate );
    render();        
    update();
}
 
function update()
{
    rotY += step;
    cube.rotation.y = rotY;
 
    rotX += step;
    textMesh.rotation.x = rotX;
    
    controls.update();
    stats.update();
}
 
function render() 
{
    renderer.render( scene, camera );
}