在three.js示例中使用dat.GUI时出现问题

Question

我尝试在以下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();

现在,一旦我单击不透明度滑块,鼠标就会跟随滑块.我无法点击鼠标.

Answer 1

在渲染器init块之后移动控件init块,并更改以下行:

controls = new THREE.TrackballControls( camera );

对此:

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