在Three.js示例中使用dat.GUI时出现的问题 [英] Issue while using dat.GUI in a three.js example

问题描述

我在以下尝试使用 dat.GUI three.js 示例。

我只是做了以下代码更改，以添加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，'不透明度'，0，1）; 
 opacity.onChange（function（value）{
 mesh.material.opacity = value; 
}）; 
 
 maingui。 open（）; 
 
 animate（）; 
  

现在，一旦我单击

解决方案

移动鼠标的不透明度滑块在渲染器init块之后控制init块，并更改此行：

  controls = new 3。 TrackballControls（camera）; 
  

为此：

< pre class = lang-js pre ttyprint-override> controls = new THREE.TrackballControls（camera，renderer.domElement）;


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

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.

解决方案

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

controls = new THREE.TrackballControls( camera );

to this:

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

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