Three.js：无法更改 dat.GUI 中的值

Question

我有一个 dat.GUI 的实例。我向该实例添加了 "comboBox" 以选择可能的值。当我运行我的应用程序时， dat.GUI 与组合框一起出现但是有一个问题：我无法更改它的默认值（我的 gui 被冻结），这是我的代码：

<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>

¿我做错了什么？我需要能够使用我的 GUI 更改值。

Answer 1

解决方案：如果您使用带有three.js的鼠标控制相机，则必须在mouseDown 动作的MouseListener 中注释以下行：

event.preventDefault();

Answer 2

将包含 dat.gui 元素的 div 放在 Three.js div

下方

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

然后是dat.gui

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

Three.js：无法更改 dat.GUI 中的值

Three.js: Cannot change value in dat.GUI

javascript

three.js

dat.gui