DAT demo

almost all functions of DAT-gui

by jmchen

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>

CSS

#gui {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 350px;
}

JavaScript

var scene, renderer, camera;
var cube, angle = 0;
var gcontrols;
var orbitcontrols;

var adds = [];

init();
animate();

function init() {
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setClearColor(0x888888);
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
    var cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0x1ec876
    });
    cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    scene.add(cube);

    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    camera.position.y = 160;
    camera.position.z = 400;
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    orbitcontrols = new THREE.OrbitControls(camera, renderer.domElement);

    var gridXZ = new THREE.GridHelper(100, 10);
    gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
    scene.add(gridXZ);

    gcontrols = new function () {
        this.speed = 0.01;
        this.type = "box";
        this.turn = false;
        this.color = "#ff1234";
        this.addMesh = function () {
            var mesh = new THREE.Mesh(
            new THREE.BoxGeometry(5, 5, 5), new THREE.MeshBasicMaterial());
            mesh.position.set(Math.random() * 50, 40, Math.random() * 50);
            adds.push(mesh);
            scene.add(mesh);
        };
        this.removeAdds = function () {
            adds.forEach(function (e) {
                scene.remove(e);
            })
        };
    }

    var gui = new dat.GUI();
    gui.domElement.id = 'gui';

    var f1 = gui.addFolder("motion");
    f1.add(gcontrols, 'speed', -1.5, 1.5);
    f1.add(gcontrols, 'turn');
    var f2 = gui.addFolder('look');
    f2.addColor(gcontrols, 'color');
    f2.add(gcontrols, 'type', ["box", "sphere"]);
    var f3 = gui.addFolder('modify');
   ...