圖形用戶界面和Raycaster不工作（three.js）

Question

我有以下代碼來添加一個gui和點擊對象的能力。 當我將控件設置爲controls = new THREE.TrackballControls(camera, renderer.domElement);時，GUI工作正常，但Raycaster似乎不起作用。 如果我定義爲controls = new THREE.TrackballControls(camera); raycaster工作，但是一旦我點擊拐角處的gui，那麼無論我移動鼠標，gui的值都會改變，而如果我關閉它，GUI將調整鼠標移動的響應大小

任何人都可以給我任何提示如何解決這個問題？

目前的作品，但我能夠從控制到取消勾選同時左，右單擊

此鏈接顯示多遠我已經給你的問題 http://subsurface.gr/joomla/threejs/StreamFnc_ws.html

的想法下面是完整的代碼：

if (! Detector.webgl) Detector.addGetWebGLMessage(); 

      // global variables 
      var camera, controls, scene, renderer; 
      var container, stats; 
      var raycaster, intersects; 
      var threshold = 0.05; 
      var mouse = new THREE.Vector2(); 

      var cube; 

      // Parameters for GUI 
      var params = { 
       AAmin: 0.0, 
       AAmax: 1000.0 
      }; 


      // main functions 
      init(); 
      animate(); 


      function init(){ 

       container = document.createElement('div'); 
       document.body.appendChild(container); 

       //Setup Camera 
       camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 1000); 
       camera.name = 'camera'; 
       camera.position.z = 20; 

       // Setup world 
       scene = new THREE.Scene(); 
       scene.fog = new THREE.FogExp2(0xcccccc, 0.002); 

       // Setup lights 
       var directionalLight = new THREE.DirectionalLight(0xffffff); 
       directionalLight.position.set(1, 1, 1); 
       scene.add(directionalLight); 
       directionalLight.name = 'directionalLight'; 

       var directionalLight1 = new THREE.DirectionalLight(0x002288); 
       directionalLight1.position.set(-1, -1, -1); 
       directionalLight1.name = 'directionalLight1'; 
       scene.add(directionalLight1); 

       var ambientLight = new THREE.AmbientLight(0x222222); 
       ambientLight.name = 'ambientLight'; 
       scene.add(ambientLight); 

       raycaster = new THREE.Raycaster(); 
       raycaster.params.Points.threshold = threshold; 

       // Main Scene 
       var geometry = new THREE.BoxGeometry(1, 1, 1); 
       var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
       cube = new THREE.Mesh(geometry, material); 
       cube.name = 'mycube'; 
       scene.add(cube); 

       // GUI parameter 
       var gui = new dat.GUI(); 
       gui.add(params, 'AAmin', -1000, 500); 
       gui.add(params, 'AAmax', 500, 2000); 
       gui.open(); 

       //renderer 
       renderer = new THREE.WebGLRenderer({ antialias: false }); 
       renderer.setClearColor(scene.fog.color); 
       renderer.setPixelRatio(window.devicePixelRatio); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       container.appendChild(renderer.domElement); 

       //controls 
       controls = new THREE.TrackballControls(camera); 
       controls.rotateSpeed = 1.0; 
       controls.zoomSpeed = 1.2; 
       controls.panSpeed = 0.8; 
       controls.noZoom = false; 
       controls.noPan = false; 
       controls.staticMoving = true; 
       controls.dynamicDampingFactor = 0.3; 
       controls.keys = [ 65, 83, 68 ]; 
       controls.addEventListener('change', render); 

       stats = new Stats(); 
       container.appendChild(stats.dom); 

       // events 
       document.addEventListener('mousedown', onDocumentMouseDown, false); 

       render(); 
      } 

      function animate() { 
       requestAnimationFrame(animate); 
       render(); 
       controls.update(); 
      } 
      function render() { 

       renderer.render(scene, camera); 
       stats.update(); 
      } 

      function onDocumentMouseDown(event){ 
       event.preventDefault(); 
       mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
       mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 


       raycaster.setFromCamera(mouse, camera); 
       intersects = raycaster.intersectObject(cube); 
       if (intersects.length > 0){ 
        console.log("You click a cube!"); 
       } 
      } 

Answer 1

如果我理解正確的話，TrackballControls被停止mouseDown事件的傳播（綁定到renderer.domElement） - meani你的onDocumentMouseDown處理程序沒有被調用。嘗試移動你的document.addEventListener（...）來到新的THREE.TrackballControls（...）之前。

答覆如下的評論：

我現在看到的問題。 TrackballControls和Dat.GUI之間似乎存在不兼容問題，因爲TrackballControls mouseup事件會停止事件的傳播，導致Dat.GUI出錯，並因某種原因被卡住調整UI大小。

我相信你可以通過點擊GUI時禁用TrackballControls解決這個問題，並重新啓用在鼠標鬆開TrackballControls：

gui.domElement.addEventListener('mousedown', function(){ controls.enabled = false; }, false); 
document.addEventListener('mouseup', function(){ controls.enabled = true; }, false);