[WebGL] PhysiJS Freefall

이번 예제는 PhysiJS라는 Three.js 기반 물리엔진 프레임웍을 이용하여 오브젝트의 낙하 시뮬레이션에 관한 것입니다.

PhysiJS 웹사이트를 방문해 보면 PhysiJS에 대하여 다음과 같이 소개하고 있습니다: "Physics Plugin for Three.js"

Download Projects

10-03-physijs-freefall.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

// standard global variables
var container, scene, camera, renderer, controls, render_stats, physics_stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
 
// custom global variables
var    groundMaterial, ground;
var boxMaterial, box;
var ballMaterial, ball;
var    light
 
Physijs.scripts.worker = 'physijs_worker.js';
Physijs.scripts.ammo = 'js/ammo.js';
 
init();
animate();
 
// FUNCTIONS
function init()
{
    // SCENE
    scene = new Physijs.Scene;
    scene.setGravity(new THREE.Vector3( 0, -100, 0 ));
    scene.addEventListener(
        'update',
        function() {
            scene.simulate( undefined, 1 );
            physics_stats.update();
        }
    );
 
    // 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);
    camera.position.set( 60, 50, 60 );
    camera.lookAt( scene.position );
    scene.add(camera);
 
    // RENDERER
    if ( Detector.webgl )
        renderer = new THREE.WebGLRenderer( {antialias:true} );
    else
        renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    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 - RENDERER
    render_stats = new Stats();
    render_stats.domElement.style.position = 'absolute';
    render_stats.domElement.style.top = '1px';
    render_stats.domElement.style.zIndex = 100;
    container.appendChild( render_stats.domElement );
 
    // STATS - PHYSICS
    physics_stats = new Stats();
    physics_stats.domElement.style.position = 'absolute';
    physics_stats.domElement.style.top = '50px';
    physics_stats.domElement.style.zIndex = 100;
    container.appendChild( physics_stats.domElement );
 
    // LIGHT
    light = new THREE.DirectionalLight( 0xFFFFFF );
    light.position.set( 20, 40, -15 );
    light.target.position.copy( scene.position );
    light.castShadow = true;
    light.shadowCameraLeft = -120;
    light.shadowCameraTop = -120;
    light.shadowCameraRight = 120;
    light.shadowCameraBottom = 120;
    light.shadowCameraNear = 20;
    light.shadowCameraFar = 2000;
    light.shadowBias = -.0001
    light.shadowMapWidth = light.shadowMapHeight = 2048;
    light.shadowDarkness = .7;
    scene.add( light );
 
    // 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 //
    ////////////
 
    // GROUND
    groundMaterial = Physijs.createMaterial(
            new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'img/Wood_floor.jpg' ) }),
            .95, // high friction
            .95 // low restitution
        );
    groundMaterial.map.wrapS = groundMaterial.map.wrapT = THREE.RepeatWrapping;
    groundMaterial.map.repeat.set( 1, 1 );
    ground = new Physijs.BoxMesh(
        new THREE.CubeGeometry(100, 1, 100),
        groundMaterial,
        0 // mass
    );
    ground.receiveShadow = true;
    scene.add( ground );
 
    // create boxes and place them in random position
    boxMaterial = Physijs.createMaterial(
        new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'img/plywood.jpg' ) }),
        .4, // low friction
        .6 // high restitution
    );
    boxMaterial.map.wrapS = boxMaterial.map.wrapT = THREE.RepeatWrapping;
    boxMaterial.map.repeat.set( .25, .25 );
    
    for ( var i = 0; i < 50; i++ ) {
        box = new Physijs.BoxMesh(
            new THREE.CubeGeometry( 4, 4, 4 ),
            boxMaterial
        );
        box.position.set(
            Math.random() * 50 - 25,
            100 + Math.random() * 50,
            Math.random() * 50 - 25
        );
        box.rotation.set(
            Math.random() * Math.PI * 2,
            Math.random() * Math.PI * 2,
            Math.random() * Math.PI * 2
        );
        box.scale.set(
            Math.random() * 1 + .5,
            Math.random() * 1 + .5,
            Math.random() * 1 + .5
        );
        box.castShadow = true;
        scene.add( box );
    }
 
    // create balls and place them in random position
    ballMaterial = Physijs.createMaterial(
        new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'img/stone.jpg' ) }),
        .95, // low friction
        .95 // high restitution
    );
    ballMaterial.map.wrapS = ballMaterial.map.wrapT = THREE.RepeatWrapping;
    ballMaterial.map.repeat.set( .25, .25 );
    
    for ( var i = 0; i < 100; i++ ) {
        ball = new Physijs.SphereMesh(
            new THREE.SphereGeometry( 4, 30, 30 ),
            ballMaterial
        );
        ball.position.set(
            Math.random() * 50 - 25,
            100 + Math.random() * 50,
            Math.random() * 50 - 25
        );
        ball.rotation.set(
            Math.random() * Math.PI * 2,
            Math.random() * Math.PI * 2,
            Math.random() * Math.PI * 2
        );
        ball.castShadow = true;
        scene.add( ball );
    }
}
 
function animate()
{
    // SIMULATION
    scene.simulate();
 
    requestAnimationFrame( animate );
    render();
    update();
}
 
function update()
{
    if ( keyboard.pressed("z") ) 
    { 
        // do something
    }
    
    render_stats.update();
    physics_stats.update();
    controls.update();
}
 
function render() 
{
    renderer.render( scene, camera );
}