GUIとレイキャスターは一緒に動作しません（three.js）

Question

私はguiとオブジェクトをクリックする機能を追加する次のコードを持っています。 コントロールをcontrols = new THREE.TrackballControls(camera, renderer.domElement);と設定すると、GUIは機能しますが、レイキャスターは機能しません。 constrolsをcontrols = new THREE.TrackballControls(camera);と定義すると、コーナーのGUIをクリックするとGUIの値をマウスのどこに移動してもGUIの値は変わりますが、マウスの動きに応じてGUIのサイズが変更されます

誰でも私にこれを解決するためのヒントを教えてもらえますか？現時点で

は動作しますが、私はによってコントロールからunclickすることができるよ同時に左右はこのリンクは、私が行っているどこまで示していて、あなたに問題 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は（renderer.domElementに結合している）mouseDownイベントの伝播を停止している - meani onDocumentMouseDownハンドラが呼び出されていません。新しいTHREE.TrackballControls（...）の前にdocument.addEventListener（...）を移動してみてください。私は今の問題を参照してください

：以下、あなたのコメントへの対応

。 TrackballControlsとDat.GUIの間に互換性がないように見えるのは、TrackballControls mouseupイベントによってイベントの伝播が停止し、何らかの理由でDat.GUIがバグアウトし、UIのサイズが固定されなくなることです。

私はあなたがのmouseupにTrackballControlsをGUIをクリックすると、再び有効にするときTrackballControlsを無効にすることでこの問題を解決できると信じて：

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