Problem beim Verwenden von dat.GUI in einem three.js-Beispiel

Question

Ich habe versucht, dat.GUI in den folgenden three.jszu verwenden.

Ich habe gerade die folgenden Codeänderungen vorgenommen, um eine GUI hinzuzufügen, um die Netzopazität anzupassen.

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

Sobald ich nun auf den Deckkraft-Schieberegler klicke, folgt die Maus nur dem Schieberegler. Ich bin nicht in der Lage, aus dem Mausklick zu kommen.

Answer 1

Bewegen Sie den Regler init Block nach dem Renderer init Block, und ändern Sie diese Zeile:

controls = new THREE.TrackballControls(camera); 

dazu:

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

Ich änderte meinen Code wie in dem Beispiel gezeigt, "THREE.TrackballControls(camera, renderer.domElement)" aber ich meine GUI immer noch, wenn ich es einmal verwendet habe und es ab diesem Moment nicht abwählen kann. Gibt es eine Möglichkeit, die aktiven GUI-Teile mit einem Befehl zu deaktivieren oder abzuwählen? oder etwas wie "gui.deselect.all"?

Answer 3

Altes Thema, aber ich habe nur ein ähnliches Problem und vorherige Lösung war nicht in Ordnung für meinen Fall. Um es zu beheben erstelle ich eine bestimmte Leinwand für das dat.gui Modul:

Html Teil:

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

Css Teil:

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

Js Teil:

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

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

Mit Bei dieser Methode sind die Elemente isoliert und ich habe keinen Ereigniskonflikt mehr.

bearbeiten: , um weitere Informationen Sie den gesamten Code hier haben https://github.com/quentinchap/threeJs-morphing-test