[英]Issue while using dat.GUI in a three.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();
现在,一旦我单击不透明度滑块,鼠标就会跟随滑块。 我无法点击鼠标。
在渲染器init块之后移动控件init块,并更改以下行:
controls = new THREE.TrackballControls( camera );
对此:
controls = new THREE.TrackballControls( camera, renderer.domElement );
老主题,但我只是有一个类似的问题,以前的解决方案不适合我的情况。 为了解决这个问题,我为dat.gui模块创建了一个特定的画布:
Html部分:
<div id="my-gui-container"></div>
Css部分:
#my-gui-container{
position: absolute;
top: 0;
right: 0;
z-index: 100;
}
Js部分:
this.gui = new dat.GUI({ autoPlace: false });
var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(this.gui.domElement);
使用这种方法,元素是孤立的,我不再有事件冲突。
编辑 :有关详细信息,请在此处获取所有代码https://github.com/quentinchap/threeJs-morphing-test
var clock = new THREE.Clock();
var trackballControls;
function render() {
stats.update();
var delta = clock.getDelta();
trackballControls.update(delta);
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function trackBall(){
trackballControls = new THREE.TrackballControls(camera, render.domElement) ;
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;
// trackballControls.noZoom=false;
//trackballControls.noPan=false;
trackballControls.staticMoving = true;
//trackballControls.dynamicDampingFactor=0.3;
}
trackBall();
render();
我将示例中显示的代码更改为“ THREE.TrackballControls(camera, renderer.domElement)
”,但是当我使用它时仍然会影响我的GUI,并且此时无法取消选择它。 是否有可能通过命令取消激活或取消选择活动的GUI部件? 或者类似“gui.deselect.all”的东西?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.