在 three.js 示例中使用 dat.GUI 时出现问题答案

【问题标题】：Issue while using dat.GUI in a three.js example在 three.js 示例中使用 dat.GUI 时出现问题
【发布时间】：2012-07-03 04:51:29
【问题描述】：

我尝试在下面三个.js中使用dat.GUI example。

我只是做了以下代码更改以添加一个 GUI 来调整网格不透明度。

var loader=new THREE.VTKLoader();
loader.load ("models/vtk/bunny.vtk", function(geom){
var mesh = new THREE.Mesh(geom, material );
mesh.doubleSided=true;
mesh.position.setY(-0.09);
scene.add( mesh );

var gui = new dat.GUI();

var view = this;
view.Opacity = 0.2;

var maingui = gui.addFolder('Main');
var opacity = maingui.add(view, 'Opacity', 0, 1);
opacity.onChange( function(value) {
    mesh.material.opacity = value;
});

maingui.open();

animate();

现在，一旦我单击不透明度滑块，鼠标就会跟随滑块。我无法摆脱鼠标点击。

【问题讨论】：

你试过opacity.onChange函数中的console.log吗？

标签： javascript user-interface three.js dat.gui

【解决方案1】：

将控件初始化块移动到渲染器初始化块之后，并更改此行：

controls = new THREE.TrackballControls( camera );

到这里：

controls = new THREE.TrackballControls( camera, renderer.domElement );

【讨论】：

【解决方案2】：

老主题，但我只是有一个类似的问题，以前的解决方案不适合我的情况。为了修复它，我为 dat.gui 模块创建了一个特定的画布：

HTML部分：

<div id="my-gui-container"></div>

CSS部分：

#my-gui-container{
    position: absolute; 
    top: 0; 
    right: 0;
    z-index: 100;
}

JS部分：

this.gui = new dat.GUI({ autoPlace: false });

var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(this.gui.domElement);

使用这种方法，元素是隔离的，我不再有事件冲突。

编辑：有关更多详细信息，您可以在这里找到所有代码 https://github.com/quentinchap/threeJs-morphing-test

【讨论】：

【解决方案3】：

var clock = new THREE.Clock();
var trackballControls;


function render() {
stats.update();
        var delta = clock.getDelta();   
        trackballControls.update(delta);

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);    
    }


    function trackBall(){
        trackballControls = new THREE.TrackballControls(camera, render.domElement) ;

        trackballControls.rotateSpeed = 1.0;
        trackballControls.zoomSpeed = 1.0;
        trackballControls.panSpeed = 1.0;
        //  trackballControls.noZoom=false;
        //trackballControls.noPan=false;
        trackballControls.staticMoving = true;
        //trackballControls.dynamicDampingFactor=0.3;
    }


        trackBall();

        render();

我将示例中的代码更改为 “THREE.TrackballControls(camera, renderer.domElement)” 但是当我使用它一次时我仍然会影响我的 GUI，并且不能从此刻取消选择它。是否有可能使用命令停用或取消选择活动的 GUI 部件？或类似“gui.deselect.all”的东西？

【讨论】：