10

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

ここで、不透明度スライダーをクリックすると、マウスはスライダーに追従します。マウスクリックから抜け出せません。

4

3 に答える 3

26

コントロールの初期化ブロックをレンダラーの初期化ブロックの後に移動し、次の行を変更します。

controls = new THREE.TrackballControls( camera );

これに：

controls = new THREE.TrackballControls( camera, renderer.domElement );
于 2012-07-03T10:46:00.010 に答える
1

Old subject but I just have a similar issue and previous solution wasn't ok for my case. To fix it I create a specific canvas for the dat.gui module:

Html part:

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

Css part:

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

With this method the elements are isolate and I have no event conflict anymore.

Edit: for more details you have all code here https://github.com/quentinchap/threeJs-morphing-test

于 2016-12-28T10:33:06.597 に答える