GUI und Raycaster arbeiten nicht zusammen (three.js)

Question

Ich habe den folgenden Code, um eine GUI und die Fähigkeit, auf Objekte klicken hinzuzufügen. Wenn ich die Kontrollen als controls = new THREE.TrackballControls(camera, renderer.domElement); setze, funktioniert die GUI, aber der Raycaster scheint nicht zu arbeiten. Wenn ich die Constrole als controls = new THREE.TrackballControls(camera); definiere, funktioniert der Rycaster, aber sobald ich die GUI an der Ecke klicke, ändern sich die Werte der GUI, wenn ich die Maus drücke, wenn ich sie schließe, wird die GUI mit der Antwort auf Mausbewegungen

Kann mir jemand einen Hinweis geben, wie ich das beheben kann?

Im Moment funktioniert, aber ich bin in der Lage von der Steuerung an unclick durch gleichzeitig links und rechts

Dieser Link zeigt klicken, wie weit ich Ihnen eine Vorstellung von dem http://subsurface.gr/joomla/threejs/StreamFnc_ws.html

Problem weg und geben hier ist der vollständige Code:

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

Wenn ich richtig verstehe, die TrackballControls stoppt Ausbreitung des mouseDown- Ereignisses (gebunden an die renderer.domElement) - meani ng Ihr onDocumentMouseDown-Handler wird nicht aufgerufen. Versuchen Sie, Ihren document.addEventListener (...) so zu verschieben, dass er vor neuen THREE.TrackballControls (...) steht.

Als Reaktion auf Ihren Kommentar unten:

Ich sehe jetzt das Problem. Es scheint eine Inkompatibilität zwischen TrackballControls und Dat.GUI zu geben, da die MouseUp-Ereignisse von TrackballControl die Weiterleitung des Ereignisses stoppen, was dazu führt, dass Dat.GUI aus irgendeinem Grund nicht mehr funktioniert und die Größe der Benutzeroberfläche ändert.

Ich glaube, Sie diese TrackballControls durch die Deaktivierung lösen kann, wenn die GUI klicken und Wiederfreigabe TrackballControls auf mouseup:

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