Three.js: Cannot change value in dat.GUI

问题

i have an instance of dat.GUI. I added a "comboBox" to that instance to make a selection of possible values. When i run my app, the dat.GUI appears with the comboBox but there is a problem: I cannot change it's default value (my gui is frozen), here is my code:

<html>
    <head>
        <title>Stack Overflow</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/three.min.js"></script>
        <script src="js/optimer_regular.typeface.js"></script>
        <script src="js/TrackballControls.js"></script>
        <script src="js/stats.min.js"></script>
        <script src="js/threex.dynamictexture.js"></script>
        <script src="js/dat.gui.min.js"></script>
        <script>
            //Basic Three components
            var scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000 );
            //position camera
            camera.position.z = 700;
            //Set camera controls
            var controls = new THREE.TrackballControls( camera );
            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;

            controls.noZoom = false;
            controls.noPan = false;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            //Set the renderer
            var renderer = new THREE.WebGLRenderer( { antialias: false } );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );


            //Set the lights
            var light;
            scene.add( new THREE.AmbientLight( 0x404040 ) );

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 0, 1, 1 );
            scene.add( light );

            //GUI
            initGUI();

            //Let's add a cube
            var geometry = new THREE.BoxGeometry( 50, 50, 50 );
            var material = new THREE.MeshBasicMaterial( { color: 0x5484d3 } );
            var cube = new THREE.Mesh( geometry, material );
            cube.position.set(0,20,50)
            scene.add( cube );

            function initGUI(){ //HERE IS THE MEAT, I THINK

                var LevelView = function() {
                this.level = 'Operacion';
                // Define render logic ...
                };
                var gui = new dat.GUI();
                var text = new LevelView();
                gui.add(text, 'level', [ 'Operacion', 'Procesos', 'Participantes', 'Fuentes de Datos', 'Logica de software', 'Telecomunicaciones', 'Infraestructura'] ).onChange(function(value){
    this.level = value;
                });

            }



            function animate() {

                requestAnimationFrame( animate );
                render();

            }


            //Render scene
            function render() {
                controls.update();
                renderer.render( scene, camera );
            }


            animate();
        </script>
    </body>
</html>

¿What i am doing wrong? I need to be able to change values with my GUI.

回答1:

Solution: If you use a mouse-controlled camera with three.js, you have to comment the following line in the MouseListener of the mouseDown action:

event.preventDefault();

回答2:

Place div containing dat.gui element bellow Three.js div

<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

and then dat.gui

<div id="gui"></div>

来源：https://stackoverflow.com/questions/28237414/three-js-cannot-change-value-in-dat-gui

标签

javascript

three.js

dat.gui