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

이제 불투명도 슬라이더를 클릭하면 마우스가 슬라이더 바로 다음에 있습니다. 나는 마우스 클릭에서 나올 수 없다.

Answer 1

렌더러 초기화 블록 후 컨트롤을 초기화하기 블록을 이동하고이 라인 변경 : 예와 같이

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

Answer 2

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

내 코드를 변경 : 이것에

controls = new THREE.TrackballControls(camera); 

을 "THREE.TrackballControls(camera, renderer.domElement)" 하지만 한 번 사용한 적이 있는데이 순간부터 선택을 취소 할 수는 없습니다. 명령을 사용하여 활성 GUI 부분을 비활성화하거나 선택을 취소 할 수 있습니까? "gui.deselect.all"과 같은 것입니까?

Answer 3

이전 주제이지만 비슷한 문제가 있으며 이전 솔루션은 제 경우에는 좋지 않았습니다. 이 문제를 해결하려면 나는 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