三.js:无法更改 dat 中的值.图形用户界面

Three.js: Cannot change value in dat.GUI

本文关键字：dat 图形用户界面 js      更新时间：2023-09-26

我有一个dat的实例。图形用户界面。我向该实例添加了一个"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 更改值。

解决方案：如果使用具有三个.js的鼠标控制的相机，则必须在鼠标向下操作的 MouseListener 中注释以下行： 

event.preventDefault();

包含 dat.gui 元素的div 放置 波纹管 三.jsdiv

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

然后是 dat.gui

<div id="gui"></div>
相关文章：