Problema al usar dat.GUI en un ejemplo three.js

Question

Intenté usar dat.GUI en los siguientes three.js example.

Acabo de hacer los siguientes cambios de código para agregar una GUI para ajustar la opacidad de la malla.

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

Ahora, una vez que haga clic en la barra de opacidad del ratón está simplemente siguiendo el deslizador. No puedo salir del clic del mouse.

Answer 1

Mueva los controles bloque init después de que el bloque procesador de inicio y cambiar esta línea:

controls = new THREE.TrackballControls(camera); 

a esto:

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

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

he cambiado de código como se muestra en el ejemplo de "THREE.TrackballControls(camera, renderer.domElement)" pero sigo afectando a mi GUI cuando la utilicé una vez y no puedo anular su selección a partir de este momento. ¿Hay alguna posibilidad de desactivar o anular la selección de las partes activas de la GUI con un comando? o algo así como "gui.deselect.all"?

Answer 3

Tema antiguo pero tengo un problema similar y la solución anterior no estaba bien para mi caso. Para solucionarlo creo una tela específica para el módulo dat.gui:

Html parte:

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

parte Css:

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

Js pieza:

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

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

Con este método los elementos están aislados y ya no tengo conflictos de eventos.

Editar: para más detalles que tiene todo el código aquí https://github.com/quentinchap/threeJs-morphing-test