[WebGL] Viewport 4분할

이번 예제는 뷰포트를 네 개로 분할하는 방법에 관한 것이다. 즉, Front View, Top View, Left View, Right View로 뷰포트를 분할한다.

Download Project

09-01-viewports-quad.zip

Click here to view with full screen mode

Operations

W: Move Forward

S: Move Backward

A: Turn Left

D: Turn Right

main.js

// MAIN
 
// standard global variables
var container, scene, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
 
// custom global variables
var MovingCube;
var perspectiveCamera, topCamera, frontCamera, sideCamera;
 
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;
 
    // perspective cameras
    perspectiveCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    perspectiveCamera.position.set(0,200,550);
    perspectiveCamera.lookAt(scene.position);
    scene.add(perspectiveCamera);
 
    // orthographic cameras
    topCamera = new THREE.OrthographicCamera(
    window.innerWidth / -4,        // Left
    window.innerWidth / 4,        // Right
    window.innerHeight / 4,        // Top
    window.innerHeight / -4,    // Bottom
    -5000,                        // Near
    10000 );                       // Far -- enough to see the skybox
    topCamera.up = new THREE.Vector3(0,0,-1);
    topCamera.lookAt( new THREE.Vector3(0,-1,0) );
    scene.add(topCamera);
    
    frontCamera = new THREE.OrthographicCamera(
    window.innerWidth / -4,    window.innerWidth / 4,
    window.innerHeight / 4,    window.innerHeight / -4,
    -5000, 10000 );
    frontCamera.lookAt( new THREE.Vector3(0,0,-1) );
    scene.add(frontCamera);
    
    sideCamera = new THREE.OrthographicCamera(
    window.innerWidth / -4,    window.innerWidth / 4,
    window.innerHeight / 4,    window.innerHeight / -4,
    -5000, 10000 );
    sideCamera.lookAt( new THREE.Vector3(1,0,0) );
    scene.add(sideCamera);
    
    // 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, topCamera);
    THREEx.FullScreen.bindKey({ charCode : 'f'.charCodeAt(0) });
 
    // 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.DoubleSide } );
    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 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);
    
    ////////////
    // CUSTOM //
    ////////////
    
    scene.add( new THREE.AxisHelper(100) );
    
    // create an array with six textures for a cool cube
    var materialArray = [];
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/px.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/nx.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/py.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/ny.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/pz.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/nz.jpg' ) }));
    var MovingCubeMat = new THREE.MeshFaceMaterial(materialArray);
    var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materialArray );
    MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
    MovingCube.position.set(0, 25.1, 0);
    scene.add( MovingCube );
    
    // a little bit of scenery...
    var ambientlight = new THREE.AmbientLight(0x111111);
    scene.add( ambientlight );
 
    var wireMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ); 
    
    // torus knot
    var colorMaterial = new THREE.MeshPhongMaterial( { color: 0xff3333 } );
    var shape = THREE.SceneUtils.createMultiMaterialObject( 
        new THREE.TorusKnotGeometry( 30, 6, 160, 10, 2, 5 ), [ colorMaterial, wireMaterial ] );
    shape.position.set(-200, 50, -200);
    scene.add( shape );
    // torus knot
    var colorMaterial = new THREE.MeshPhongMaterial( { color: 0x33ff33 } );
    var shape = THREE.SceneUtils.createMultiMaterialObject( 
        new THREE.TorusKnotGeometry( 30, 6, 160, 10, 3, 2 ), [ colorMaterial, wireMaterial ] );
    shape.position.set(200, 50, -200);
    scene.add( shape );
    // torus knot
    var colorMaterial = new THREE.MeshPhongMaterial( { color: 0xffff33 } );
    var shape = THREE.SceneUtils.createMultiMaterialObject( 
        new THREE.TorusKnotGeometry( 30, 6, 160, 10, 4, 3 ), [ colorMaterial, wireMaterial ] );
    shape.position.set(200, 50, 200);
    scene.add( shape );
    // torus knot
    var colorMaterial = new THREE.MeshPhongMaterial( { color: 0x3333ff } );
    var shape = THREE.SceneUtils.createMultiMaterialObject( 
        new THREE.TorusKnotGeometry( 30, 6, 160, 10, 3, 4 ), [ colorMaterial, wireMaterial ] );
    shape.position.set(-200, 50, 200);
    scene.add( shape );
    
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColorHex( 0x000000, 1 );
    renderer.autoClear = false;
}
 
function animate()
{
    requestAnimationFrame( animate );
    render();        
    update();
}
 
function update()
{
    var delta = clock.getDelta(); // seconds.
    var moveDistance = 200 * delta; // 200 pixels per second
    var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second
    
    // local transformations
 
    // move forwards/backwards/left/right
    if ( keyboard.pressed("W") )
        MovingCube.translateZ( -moveDistance );
    if ( keyboard.pressed("S") )
        MovingCube.translateZ(  moveDistance );
    if ( keyboard.pressed("Q") )
        MovingCube.translateX( -moveDistance );
    if ( keyboard.pressed("E") )
        MovingCube.translateX(  moveDistance );    
 
    // rotate left/right/up/down
    var rotation_matrix = new THREE.Matrix4().identity();
    if ( keyboard.pressed("A") )
        MovingCube.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
    if ( keyboard.pressed("D") )
        MovingCube.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
    if ( keyboard.pressed("R") )
        MovingCube.rotateOnAxis( new THREE.Vector3(1,0,0), rotateAngle);
    if ( keyboard.pressed("F") )
        MovingCube.rotateOnAxis( new THREE.Vector3(1,0,0), -rotateAngle);
    
    if ( keyboard.pressed("Z") )
    {
        MovingCube.position.set(0,25.1,0);
        MovingCube.rotation.set(0,0,0);
    }
 
    stats.update();
}
 
function render()
{
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
 
    // setViewport parameters:
    //  lower_left_x, lower_left_y, viewport_width, viewport_height
    renderer.setViewport( 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT );
    renderer.clear();
    
    // upper left corner
    renderer.setViewport( 1, 0.5 * SCREEN_HEIGHT + 1, 0.5 * SCREEN_WIDTH - 2, 0.5 * SCREEN_HEIGHT - 2 );
    renderer.render( scene, perspectiveCamera );
    
    // upper right corner
    renderer.setViewport( 0.5 * SCREEN_WIDTH + 1, 0.5 * SCREEN_HEIGHT + 1, 0.5 * SCREEN_WIDTH - 2, 0.5 * SCREEN_HEIGHT - 2 );
    renderer.render( scene, topCamera );
    
    // lower left corner
    renderer.setViewport( 1, 1,   0.5 * SCREEN_WIDTH - 2, 0.5 * SCREEN_HEIGHT - 2 );
    renderer.render( scene, sideCamera );
    
    // lower right corner
    renderer.setViewport( 0.5 * SCREEN_WIDTH + 1, 1,   0.5 * SCREEN_WIDTH - 2, 0.5 * SCREEN_HEIGHT - 2 );
    renderer.render( scene, frontCamera );
}