GUI и Raycaster не работают вместе (three.js)

Question

У меня есть следующий код, чтобы добавить gui и возможность щелчка по объектам. Когда я установил элементы управления как controls = new THREE.TrackballControls(camera, renderer.domElement);, GUI работает, но Raycaster, похоже, не работает. Если я определяю конструкторы как , то работает 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 в том, что события mouseball мыши TrackballControls останавливают распространение события, что приводит к ошибке Dat.GUI и по какой-то причине приводит к изменению размера пользовательского интерфейса.

Я считаю, что вы можете решить эту проблему путем отключения TrackballControls при нажатии на графический интерфейс пользователя, и повторное включение TrackballControls на MouseUp:

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