Javascript Three.js:无法更改dat.GUI中的值_Javascript_Three.js_Dat.gui

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

javascript three.js

Javascript Three.js:无法更改dat.GUI中的值,javascript,three.js,dat.gui,Javascript,Three.js,Dat.gui,我有一个dat.GUI的实例。我向该实例添加了一个“comboBox”，以选择可能的值。当我运行我的应用程序时，dat.GUI与组合框一起出现，但有一个问题：我无法更改它的默认值（我的GUI已冻结），下面是我的代码： <html> <head> <title>Stack Overflow</title> <style> body { margin: 0; }

我有一个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>


堆栈溢出
正文{页边距：0；}
画布{宽度：100%；高度：100%}
//基本三要素
var scene=new THREE.scene（）；
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，0.11000）；
//定位摄像机
摄像机位置z=700；
//设置摄影机控件
var控制=新的三个轨迹球控制（摄像头）；
controls.rotateSpeed=1.0；
controls.zoomSpeed=1.2；
控制点速度=0.8；
controls.noZoom=false；
controls.noPan=false；
controls.staticMoving=true；
controls.dynamicDampingFactor=0.3；
controls.keys=[65,83,68]；
//设置渲染器
var renderer=new THREE.WebGLRenderer（{antialas:false}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//点灯
var灯；
添加（新的三个环境光（0x404040））；
灯光=新的三个方向灯光（0xffffff）；
光。位置。设置（0，1，1）；
场景。添加（灯光）；
//桂
initGUI（）；
//让我们添加一个立方体
var geometry=新的3.BoxGeometry（50,50,50）；
var material=新的三个.MeshBasicMaterial（{color:0x5484d3}）；
var cube=新的三个网格（几何体、材质）；
立方体位置集（0,20,50）
场景.添加（立方体）；
函数initGUI（）{//我想这是肉
var LevelView=函数（）{
this.level='Operacion'；
//定义渲染逻辑。。。
};
var gui=new dat.gui（）；
var text=new LevelView（）；
添加（文本、“级别”、“操作”、“过程”、“参与者”、“数据对象”、“软件逻辑”、“远程通信”、“基础结构”））.onChange（函数（值）{
这个水平=数值；
});
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
//渲染场景
函数render（）{
控件更新（）；
渲染器。渲染（场景、摄影机）；
}
制作动画（）；

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

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

event.preventDefault();

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

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

然后是dat.gui

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

您没有“onChange（）事件”。您好，gaitat，我做了以下更改，但我的GUI仍然冻结：

GUI.add（text，'level'，['Operacion'，'proceos'，'Participantes'，'Fuentes de Datos'，'Logica de software'，'telecounications'，'infrastructure']）。onChange（函数（值）{this.level value；}）冻结是什么意思？您无法进行选择，或者选择后什么都没有发生？这有帮助吗？google链接包含答案，谢谢gaitat！不要修改TrackballControls
，而是尝试var controls=new THREE.TrackballControls（camera，renderer.doelement）哦，哇，这很有效-在我的情况下，我必须在THREE.OrbitControls.onMouseDown中更改它