[WebGL] GUI Basic

이번 예제는 WebGL에서의 GUI 표현에 대한 것이다. GUI Controller를 통해 오브젝트 인스턴스를 생성하거나 속성을 변경하도록 하겠습니다.

아래 화면은 GUI Controller에 가려 scene이 잘 안 보일 수도 있으니 가급적 FULL SCREEN을 클릭하여 볼 것을 권장합니다.

Download Project

06-01-gui.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, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
 
// custom global variables
var cubeMesh, textMesh, textGeom, sphereMesh;
var parameters;
var materialFront, materialSide, materialArray, textMaterial, textWidth;
 
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.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);
    scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );
    
    ////////////
    // CUSTOM //
    ////////////
    // Add a cube mesh
    var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50 );
    var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0x000088 } );
    cubeMesh = new THREE.Mesh( cubeGeometry.clone(), cubeMaterial );
    cubeMesh.position.set(0,26,0);
 
    // Clones of cubeMesh
    var cubeClone = new Array();
    cubeClone[0] = cubeMesh.clone();
    scene.add(cubeClone[0]);
 
    // Add a 3D text
    textGeom = new THREE.TextGeometry( "0",
    {
        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
    materialFront = new THREE.MeshBasicMaterial( { color: 0xfcff00 } );
    materialSide = new THREE.MeshBasicMaterial( { color: 0xff0084 } );
    materialArray = [ materialFront, materialSide ];
    textMaterial = new THREE.MeshFaceMaterial(materialArray);
    textMesh = new THREE.Mesh( textGeom, textMaterial );
    textGeom.computeBoundingBox();
    textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
    textMesh.position.set( -0.5 * textWidth, 80, 0 );
    scene.add(textMesh);
 
    // Add a sphere mesh
    var sphereGeometry = new THREE.SphereGeometry( 50, 50, 16, 16 );
    var sphereMaterial = new THREE.MeshPhongMaterial( { color: 0x00ff3c } );
    sphereMesh = new THREE.Mesh( sphereGeometry.clone(), sphereMaterial );
    sphereMesh.position.set(0,80,-120);
    scene.add(sphereMesh);
 
    // Graphical User Interface
    var gui = new dat.GUI();
    
    parameters = 
    {
        a: 0, // numeric
        b: "Hello World", // string
        c: 1, // numeric slider
        posX: 0,
        posY: 80,
        posZ: -120,
        color:  "#00ff3c", // color (change "#" to "0x")
        colorA: "#000000", // color (change "#" to "0x")
        colorE: "#000033", // color (change "#" to "0x")
        colorS: "#ffff00", // color (change "#" to "0x")
        shininess: 30,
        opacity: 1, 
        visible: true,
        material: "Phong",
    };
 
    // gui.add( parameters )
    var num = gui.add( parameters, 'a' ).name('Number');
    var str = gui.add( parameters, 'b' ).name('String');
    var numSlider = gui.add( parameters, 'c' ).min(0).max(10).step(1).name('Slider');
 
    var folder1 = gui.addFolder('Position');
    var sphereX = folder1.add( parameters, 'posX' ).min(-200).max(200).step(1).listen();
    var sphereY = folder1.add( parameters, 'posY' ).min(0).max(100).step(1).listen();
    var sphereZ = folder1.add( parameters, 'posZ' ).min(-200).max(200).step(1).listen();
    folder1.open();
 
    var sphereColor = gui.addColor( parameters, 'color' ).name('Color (Diffuse)').listen();
    var sphereColorA = gui.addColor( parameters, 'colorA' ).name('Color (Ambient)').listen();
    var sphereColorE = gui.addColor( parameters, 'colorE' ).name('Color (Emissive)').listen();
    var sphereColorS = gui.addColor( parameters, 'colorS' ).name('Color (Specular)').listen();
    var sphereShininess = gui.add( parameters, 'shininess' ).min(0).max(60).step(1).name('Shininess').listen();
    var sphereOpacity = gui.add( parameters, 'opacity' ).min(0).max(1).step(0.01).name('Opacity').listen();
    var sphereMaterial = gui.add( parameters, 'material', [ "Basic", "Lambert", "Phong", "Wireframe" ] ).name('Material Type').listen();
 
    // Event on change in 'num'
    num.onChange(function(value)
    {
        if(textMesh != null)
            scene.remove(textMesh);
 
        textGeom = new THREE.TextGeometry( String(value),
        {
            size: 30, height: 4, curveSegments: 3,
            font: "helvetiker", weight: "bold", style: "normal",
            bevelThickness: 1, bevelSize: 2, bevelEnabled: true,
            material: 0, extrudeMaterial: 1
        });
        textMesh = new THREE.Mesh( textGeom, textMaterial );
        textGeom.computeBoundingBox();
        textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
        textMesh.position.set( -0.5 * textWidth, 80, 0 );
        scene.add(textMesh);
    });
 
    // Event on change in 'str'
    str.onChange(function(value)
    {
        if(textMesh != null)
            scene.remove(textMesh);
 
        textGeom = new THREE.TextGeometry( value,
        {
            size: 30, height: 4, curveSegments: 3,
            font: "helvetiker", weight: "bold", style: "normal",
            bevelThickness: 1, bevelSize: 2, bevelEnabled: true,
            material: 0, extrudeMaterial: 1
        });
        textMesh = new THREE.Mesh( textGeom, textMaterial );
        textGeom.computeBoundingBox();
        textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
        textMesh.position.set( -0.5 * textWidth, 80, 0 );
        scene.add(textMesh);
    });
    
    var step = 100;
    var starting;
 
    // Event on change in 'numSlider'
    numSlider.onChange(function(value)
    {
        if(cubeClone.length > 0)
        {
            // remove existing clones of cubeMesh
            for(var i = 0 ; i < cubeClone.length ; i++)
                scene.remove(cubeClone[i]);
            // add new clones of cubeMesh
            starting = -50 * value;
            for(var i = 0 ; i < value ; i++)
            {
                cubeClone[i] = cubeMesh.clone();
                cubeClone[i].position.x = starting + i*step;
                scene.add(cubeClone[i]);
            }
        }
    });
 
    // Event on change in 'sphereX'
    sphereX.onChange(function(value)
    {
        sphereMesh.position.x = value;
    });
 
    // Event on change in 'sphereY'
    sphereY.onChange(function(value)
    {
        sphereMesh.position.y = value;
    });
 
    // Event on change in 'sphereZ'
    sphereZ.onChange(function(value)
    {
        sphereMesh.position.z = value;
    });
 
    // Event on change in 'color'
    sphereColor.onChange(function(value) // onFinishChange
    {
        sphereMesh.material.color.setHex( value.replace("#", "0x") );
    });
 
    // Event on change in 'colorA'
    sphereColorA.onChange(function(value) // onFinishChange
    {
       sphereMesh.material.ambient.setHex( value.replace("#", "0x") );
    });
 
    // Event on change in 'colorE'
    sphereColorE.onChange(function(value) // onFinishChange
    {
        sphereMesh.material.emissive.setHex( value.replace("#", "0x") );
    });
 
    // Event on change in 'colorS'
    sphereColorS.onChange(function(value) // onFinishChange
    {
        sphereMesh.material.specular.setHex( value.replace("#", "0x") );
    });
 
    // Event on change in 'shininess'
    sphereShininess.onChange(function(value)
    {
        sphereMesh.material.shininess = value;
    });
 
    // Event on change in 'opacity'
    sphereOpacity.onChange(function(value)
    {
        sphereMesh.material.opacity = value;
    });
 
    // Event on change in 'material'
    sphereMaterial.onChange(function(value) 
    {
        updateSphere();
    });
 
    gui.open();
}
 
function updateSphere()
{
    var value = parameters.material;
    var newMaterial;
    if (value == "Basic")
        newMaterial = new THREE.MeshBasicMaterial( { color: 0x000000 } );
    else if (value == "Lambert")
        newMaterial = new THREE.MeshLambertMaterial( { color: 0x000000 } );
    else if (value == "Phong")
        newMaterial = new THREE.MeshPhongMaterial( { color: 0x000000 } );
    else // (value == "Wireframe")
        newMaterial = new THREE.MeshBasicMaterial( { wireframe: true } );
    sphereMesh.material = newMaterial;
    
    sphereMesh.position.x = parameters.posX;
    sphereMesh.position.y = parameters.posY;
    sphereMesh.position.z = parameters.posZ;
    sphereMesh.material.color.setHex( parameters.color.replace("#", "0x") );
    if (sphereMesh.material.ambient)
        sphereMesh.material.ambient.setHex( parameters.colorA.replace("#", "0x") );
    if (sphereMesh.material.emissive)
        sphereMesh.material.emissive.setHex( parameters.colorE.replace("#", "0x") ); 
    if (sphereMesh.material.specular)
        sphereMesh.material.specular.setHex( parameters.colorS.replace("#", "0x") ); 
    if (sphereMesh.material.shininess)
        sphereMesh.material.shininess = parameters.shininess;
    sphereMesh.material.opacity = parameters.opacity;  
    sphereMesh.material.transparent = true;
}
 
function animate() 
{
    requestAnimationFrame( animate );
    render();        
    update();
}
 
function update()
{
    if ( keyboard.pressed("z") ) 
    { 
        // do something
    }
    
    controls.update();
    stats.update();
}
 
function render() 
{
    renderer.render( scene, camera );
}