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

【问题标题】：Three.js: Cannot change value in dat.GUIThree.js：无法更改 dat.GUI 中的值
【发布时间】：2015-01-30 13:54:25
【问题描述】：

我有一个 dat.GUI 的实例。我向该实例添加了一个“组合框”以选择可能的值。当我运行我的应用程序时，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 更改值。

【问题讨论】：

你没有 `onChange() 事件。
嗨 gaitat，我做了以下更改，但我的 GUI 仍然冻结：gui.add(text, 'level', [ 'Operacion', 'Procesos', 'Participantes', 'Fuentes de Datos', 'Logica de software', 'Telecomunicaciones', 'Infraestructura'] ).onChange(function(value){ this.level = value; });
冻结是什么意思？选择后无法选择或没有任何反应？
这有帮助吗？ code.google.com/p/dat-gui/issues/detail?id=5
code.google 链接包含答案，谢谢 gaitat！

标签： javascript three.js dat.gui

【解决方案1】：

解决方法：如果你使用带three.js的鼠标控制摄像头，你必须在mouseDown动作的MouseListener中注释以下行：

event.preventDefault();

【讨论】：

不要修改TrackballControls，试试var controls = new THREE.TrackballControls( camera, renderer.domElement );
哦，哇，这行得通——在我的情况下，我必须在 THREE.OrbitControls.onMouseDown 中更改它

【解决方案2】：

将包含 dat.gui 元素的 div 置于 Three.js div 下方

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

然后是 dat.gui

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

【讨论】：