在three.js示例中使用dat.GUI時出現問題

Question

我嘗試在以下three.js 示例中使用dat.GUI 。

我剛剛進行了以下代碼更改，以添加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();

現在，一旦我單擊不透明度滑塊，鼠標就會跟隨滑塊。 我無法點擊鼠標。

Answer 1

在渲染器init塊之后移動控件init塊，並更改以下行：

controls = new THREE.TrackballControls( camera );

對此：

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

Answer 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

Answer 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”的東西？