Three.js使用dat.gui.js更改多个对象的可见性

Question

我正在尝试将多个stl文件放在一个页面上，并且能够关闭单个对象的可见性，以便能够更好地查看仍然存在的对象。我正在使用Three.js并尝试使用dat.gui.js.请帮助我如何实现这一目标。

<script type="text/javascript">

// once everything is loaded, we run our Three.js stuff.
function init() {

    var stats = initStats();

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;

    var loader = new THREE.STLLoader();
            var doublebitt = new THREE.Object3D();
            loader.load("models/006858_binary.stl", function (geometry) {
                console.log(geometry);
                var mat = new THREE.MeshLambertMaterial({color: 0x789000});
                doublebitt = new THREE.Mesh(geometry, mat);
                doublebitt.rotation.x = 0 * Math.PI;
                doublebitt.scale.set(0.6, 0.6, 0.6);
                scene.add(doublebitt);
            });

    var loader = new THREE.STLLoader();
            var main_356 = new THREE.Object3D();
            loader.load("models/356/356_side.stl", function (geometry) {
                console.log(geometry);
                var mat = new THREE.MeshLambertMaterial({color: 0x789000});
                main_356 = new THREE.Mesh(geometry, mat);
                main_356.rotation.x = 0 * Math.PI;
                main_356.scale.set(0.6, 0.6, 0.6);
                scene.add(main_356);
            });

    // position and point the camera to the center of the scene
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(new THREE.Vector3(00, 0, 0));

    var orbit = new THREE.OrbitControls(camera);
    orbit.autoRotate = true;
    var clock = new THREE.Clock();

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x0c0c0c);
    scene.add(ambientLight);

    // add spotlight for the shadows
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 60, 020);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // add the output of the renderer to the html element
    document.getElementById("WebGL-output").appendChild(renderer.domElement);

    // call the render function
    var step = 0;

    var controls = new function () {

        this.visible = true;

    };


    var gui = new dat.GUI();
    gui.add(controls, 'visible');

    render();

    function render() {
        stats.update();

        // render using requestAnimationFrame


        doublebitt.visible = controls.visible;
        main_356.visible = controls.visible;

        var delta = clock.getDelta();
        orbit.update(delta);

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

    function initStats() {

        var stats = new Stats();

        stats.setMode(0); // 0: fps, 1: ms

        // Align top-left
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';

        document.getElementById("Stats-output").appendChild(stats.domElement);

        return stats;
    }
}
window.onload = init