Проблема при использовании dat.GUI в примере three.js

Я попытался использовать dat.GUI в следующих трех .js example.

Я только что сделал следующие изменения кода, чтобы добавить графический интерфейс для настройки непрозрачности сетки.

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();

Теперь, когда я нажимаю ползунок прозрачности, мышь просто следит за слайдером. Я не могу выйти из щелчка мыши.

Ответ 1

Переместите блок инициализации элементов управления после блока инициализации рендеринга и измените эту строку:

controls = new THREE.TrackballControls( camera );

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

Ответ 2

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.deselect.all"?

Ответ 3

Старый предмет, но у меня есть аналогичная проблема, и предыдущее решение было не в порядке для моего дела. Чтобы исправить это, я создаю конкретный холст для модуля dat.gui:

Часть Html:

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

Часть Css:

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

Js Part:

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

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

С помощью этого метода элементы изолируются, и я больше не конфликтую с событиями.

Edit: для более подробной информации у вас есть весь код здесь https://github.com/quentinchap/threeJs-morphing-test