Egyszerű vezérlők és FPS számláló hozzáadása

    <script src="js/stats.min.js"></script>
    <script src="js/dat.gui.min.js"></script>

    var container;
    var scene, camera, renderer;
    var ctrl, stats;
    var geometryBox, geometrySphere;
    var material;
    var meshBox, meshSphere;
    var eghBox, eghSphere;
    var renderObject, lastRenderObject;

    function addStatsObject() {
        stats = new Stats();
        stats.setMode(0);

        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = container.offsetLeft + 'px';
        stats.domElement.style.top = container.offsetTop + 'px';
        document.body.appendChild( stats.domElement );
    }

    var meshController = function () {
        this.rotationX = 0.01;
        this.rotationY = 0.005;
        this.colorSolid = material.color.getHex();
        this.colorWire = eghBox.material.color.getHex();
        this.object = 'kocka';
        renderObject = 'kocka';
        lastRenderObject = 'kocka';
    };

    function addControlGui( controlObject ) {
        var gui = new dat.GUI( { autoPlace: false });
        gui.add( controlObject, 'rotationX', -0.01, 0.01);
        gui.add( controlObject, 'rotationY', -0.01, 0.01);
        gui.addColor(controlObject, 'colorSolid');
        gui.addColor(controlObject, 'colorWire');
        gui.add( controlObject, 'object', [ 'kocka', 'gömb' ] );

        gui.domElement.style.position = 'absolute';
        gui.domElement.style.top = container.offsetTop + 'px';
        gui.domElement.style.left = container.offsetLeft + container.width - gui.width + 'px';
        document.body.appendChild( gui.domElement );
    }

    function init() {
        container = document.getElementById( 'myCanvas' );
        renderer = new THREE.WebGLRenderer( { antialias: true, canvas: container } );
        renderer.setSize( container.clientWidth, container.clientHeight );

        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera( 75, container.clientWidth / container.clientHeight, 0.1, 1000 );

        geometryBox = new THREE.BoxGeometry( 10, 10, 10 );
        geometrySphere = new THREE.SphereGeometry( 8, 50, 30);
        material = new THREE.MeshBasicMaterial( { color: 0x333388, wireframe: false } );
        meshBox = new THREE.Mesh( geometryBox, material );
        meshSphere = new THREE.Mesh( geometrySphere, material );
        scene.add( meshBox );

        eghBox = new THREE.EdgesHelper( meshBox, 0xffffff );
        eghBox.material.linewidth = 2;
        scene.add( eghBox );
        eghSphere = new THREE.EdgesHelper( meshSphere, 0xffffff );
        eghSphere.material.linewidth = 2;

        camera.position.z = 18;

        ctrl = new meshController();
        addControlGui( ctrl );

        addStatsObject();

        render();
    }

    var render = function () {
        if( lastRenderObject != ctrl.object ) {
            lastRenderObject = ctrl.object;
            scene.remove(scene.children[1]);
            scene.remove(scene.children[0]);
            if( ctrl.object == 'kocka' ) {
                scene.add( meshBox );
                scene.add( eghBox );
            } else {
                scene.add( meshSphere );
                scene.add( eghSphere );
            }
        }

        if( ctrl.object == 'kocka') {
            meshBox.material.color = new THREE.Color( ctrl.colorSolid );
            meshBox.rotation.x += ctrl.rotationX;
            meshBox.rotation.y += ctrl.rotationY;
            eghBox.material.color = new THREE.Color( ctrl.colorWire );
        }

        if( ctrl.object == 'gömb' ) {
            meshSphere.material.color = new THREE.Color( ctrl.colorSolid );
            meshSphere.rotation.x += ctrl.rotationX;
            meshSphere.rotation.y += ctrl.rotationY;
            eghSphere.material.color = new THREE.Color( ctrl.colorWire );
        }

        renderer.render(scene, camera);
        stats.update();
        requestAnimationFrame( render );
    };