एक .js उदाहरण

Question

में dat.GUI का उपयोग करते समय समस्या मैंने निम्नलिखित तीन.js example में dat.GUI का उपयोग करने का प्रयास किया।

मैश अस्पष्टता समायोजित करने के लिए मैंने 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

रेंडरर init ब्लॉक के बाद नियंत्रण init ब्लॉक ले जाएँ, और इस लाइन बदलने के लिए: के रूप में करने के लिए उदाहरण में दिखाया गया

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.deselect.all" की तरह?

Answer 3

पुराना विषय लेकिन मेरे पास अभी भी एक समान समस्या है और पिछले समाधान मेरे मामले के लिए ठीक नहीं था। इसे ठीक करने के लिए मैं dat.gui मॉड्यूल के लिए एक विशिष्ट कैनवास बनाने के लिए:

एचटीएमएल हिस्सा:

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

Css हिस्सा:

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

जे एस भाग:

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