dat-gui

Demonstrates the use of the dat-gui library to add controls to a simulation. dat-gui is set up to easily set properties on a JavaScript object that have a simple data type (string, number, etc.). Therefore it is often convenient to make a controller object, as in this example, that captures all the parameters dat-gui will set.

1-2-three
example 27: dat-gui

<!DOCTYPE html>
<html>
<head>
<title>example 27: dat-gui</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/three/stats.js"></script>
<script type="text/javascript" src="js/SpriteParticleSystem.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>
<script type="text/javascript">

function init() {
    var mycanvas = document.getElementsByTagName("canvas")[0];
    var w = mycanvas.clientWidth;
    var h = mycanvas.clientHeight;

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 60, w/h, 1, 10000 );
    camera.position.z = 1500;
    scene.add(camera);
    
    var psys;
    var gui = new dat.GUI();
    THREE.ImageUtils.loadTexture( "images/smoke.png", undefined, onTexLoad );
    function onTexLoad(tex) {
        console.log(tex,scene,gui);
        controller.init(tex, scene, gui);
    }

var renderer = new THREE.WebGLRenderer({canvas:mycanvas});
    renderer.setSize( w, h );
    renderer.setClearColor( 0x000000, 1 );

var stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.zIndex = 100;
    var container = document.getElementById("container");
    container.appendChild( stats.domElement );
    
    var clock = new THREE.Clock();

function animate() {
        var dt = clock.getDelta();
        if (controller.psys) {
            controller.update(dt);
            controller.psys.position.x = 100 * Math.sin( clock.getElapsedTime() );
            controller.psys.position.y = 100 * Math.sin( clock.getElapsedTime() );
        }
        renderer.render( scene, camera );
        stats.update();
        requestAnimationFrame( animate );
    }

animate();
}

window.onload = init;
</script>
</head>
<body><div id="container"><canvas style="width:100%;height:95%;border:1px gray solid;"></div></body>
</html>

dat-gui

1-2-threeexample 27: dat-gui

1-2-three
example 27: dat-gui