Sự cố khi sử dụng dat.GUI trong ví dụ ba.js

Question

Tôi đã cố gắng sử dụng dat.GUI trong ba.js example sau đây.

Tôi vừa thực hiện các thay đổi mã sau để thêm GUI để điều chỉnh độ mờ của lưới.

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

Bây giờ, khi tôi nhấp vào thanh trượt độ mờ của con chuột, hãy làm theo thanh trượt. Tôi không thể đi ra khỏi nhấp chuột.

Answer 1

Di chuyển các điều khiển khối init sau khi khối renderer init, và thay đổi dòng này:

controls = new THREE.TrackballControls(camera); 

này:

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

tôi đã thay đổi mã của tôi như trong ví dụ để "THREE.TrackballControls(camera, renderer.domElement)" nhưng tôi vẫn ảnh hưởng đến GUI khi tôi sử dụng nó một lần và không thể bỏ chọn nó từ thời điểm này. Có khả năng tắt hoặc bỏ chọn các phần GUI đang hoạt động bằng lệnh không? hoặc một cái gì đó như "gui.deselect.all"?

Answer 3

Chủ đề cũ nhưng tôi chỉ gặp vấn đề tương tự và giải pháp trước đó không ổn cho trường hợp của tôi. Để khắc phục nó tôi có thể tạo một khung cụ thể đối với các mô-đun dat.gui:

Html phần:

<div id="my-gui-container"></div> 

Css phần:

#my-gui-container{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 100; 
} 

Js Phần:

this.gui = new dat.GUI({ autoPlace: false }); 

var customContainer = document.getElementById('my-gui-container'); 
customContainer.appendChild(this.gui.domElement); 

Với phương pháp này các yếu tố được cô lập và tôi không có xung đột sự kiện nữa.

Sửa: để biết thêm chi tiết bạn có tất cả các mã ở đây https://github.com/quentinchap/threeJs-morphing-test