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

问题描述

我尝试在下面使用 dat.GUI三.js 示例.

I tried to use dat.GUI in the following three.js example.

我只是做了以下代码更改来添加一个 GUI 来调整网格不透明度.

I just did the following code changes to add a GUI to adjust mesh opacity.

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

现在，一旦我单击不透明度滑块，鼠标就会跟随滑块移动.我无法摆脱鼠标点击.

Now, once I click the opacity slider the mouse is just following the slider. I am not able to come out of the mouse click.

推荐答案

将控件 init 块移动到渲染器 init 块之后，并更改这一行:

Move the controls init block after the renderer init block, and change this line:

controls = new THREE.TrackballControls( camera );

为此:

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

这篇关于在 Three.js 示例中使用 dat.GUI 时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！