three.jsの例でdat.GUIを使用しているときの問題

Question

dat.GUIを次のthree.js 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(); 

ここで、不透明度スライダをクリックすると、マウスがスライダのすぐ後になります。私はマウスのクリックから出ることができません。

Answer 1

レンダラーの初期化ブロックの後に制御をinitのブロックを移動し、その行を変更：実施例に示すように

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

私は私のコードを変更された：これ

controls = new THREE.TrackballControls(camera); 

を "THREE.TrackballControls(camera, renderer.domElement)" しかし、私はそれを一度使用した時点でまだ私のGUIに影響を与えており、この瞬間からそれを選択解除することはできません。コマンドを使用してアクティブなGUI部品を非アクティブ化または選択解除する可能性はありますか？ "gui.deselect.all"のようなものですか？

Answer 3

私は似たような問題を抱えていますが、以前の解決策は私の場合は問題ではありませんでした。一部

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

で

HTML部分：それを修正するために、私はdat.guiモジュールのための具体的なキャンバスを作成しますこのメソッドは、要素が分離され、私はもはやイベントの競合がありません。

編集：あなたがここにhttps://github.com/quentinchap/threeJs-morphing-test