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

Question

我尝试使用 dat.GUI在下面三个.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();

现在，一旦我单击不透明度 slider ，鼠标就会跟随 slider 移动。我无法从鼠标单击中退出。

Answer 1

将控件初始化 block 移到渲染器初始化 block 之后，并更改此行:

controls = new THREE.TrackballControls( camera );

为此:

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