Zezwalaj na kontrolę myszy w scenie three.js tylko wtedy, gdy mysz znajduje się na płótnie

Obszar roboczy three.js to 500 x 500 kwadrat wewnątrz większej strony internetowej z inną zawartością i potrzebuję myszy do sterowania kamerą (do powiększania i obracania obiekt), który ma się zdarzyć tylko wtedy, gdy mysz znajduje się w kwadracie 500 x 500.Zezwalaj na kontrolę myszy w scenie three.js tylko wtedy, gdy mysz znajduje się na płótnie

Ponadto, nie mogę przewinąć strony internetowej, ale może to zostanie naprawione, gdy izolujemy odbiornik zdarzeń myszy na płótno 500 x 500.

Aktualny kod:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    div   { 
      position:relative; 
      left:100px;   
      top:100px; 
      background-color: #eeeeee; 
      border:1px solid black;    
      width:500px; 
      height:500px; 
       } 

    canvas  { 
      width:500px; 
      height:500px; 
       } 

    </style> 
</head>  
<body> 

    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script> 

    <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script> 

    <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script> 

    <script> 
     var container, camera, scene, renderer, controls; 

     init(); 
     animate(); 

     function init() { 

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

      var width = container.clientWidth; 
      var height = container.clientHeight; 


      camera = new THREE.PerspectiveCamera(10 , width/height , .1 , 10000); 

      camera.position.set(0, 0, 10); 

      scene = new THREE.Scene(); 

      controls = new THREE.TrackballControls(camera); // mouse control 
      controls.addEventListener('change', render); // mouse control 

      // object 

      var loader = new THREE.STLLoader(); 
      loader.addEventListener('load', function (event) { 

       var geometry = event.content; 

       var material = new THREE.MeshLambertMaterial({ ambient: 0xff5533, color: 0xff5533 }); 

       var mesh = new THREE.Mesh(geometry, material); 

       scene.add(mesh); 

      }); 

      loader.load('slotted_disk.stl'); // from https://raw.github.com/mrdoob/three.js/master/examples/models/stl/slotted_disk.stl 


      // lights 

      scene.add(new THREE.AmbientLight(0x222222)); 

      var directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
      directionalLight.position = camera.position; 
      scene.add(directionalLight); 

      // renderer 

      renderer = new THREE.WebGLRenderer({ antialias: true }); 
      renderer.setSize(width , height); 
      container.appendChild(renderer.domElement); 

      window.addEventListener('resize', onWindowResize, false); 


     } 

     function addLight(x, y, z, color, intensity) { 

      var directionalLight = new THREE.DirectionalLight(color, intensity); 
      directionalLight.position.set(x, y, z) 
      scene.add(directionalLight); 

     } 

     function onWindowResize() { 

      camera.aspect = width/height; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(width, height); 
     } 

     function animate() { 

      requestAnimationFrame(animate); 
    controls.update(); 
      render(); 

     } 

     function render() { 

      camera.lookAt(scene.position); 
      renderer.render(scene, camera); 

     } 

    </script> 

</body> 
</html>

Źródło

2012-12-02 ForumLeech

Większość kontroli pozwalają określić, które DOM węzeł słuchacze zdarzeń są dodawane do. obsługi zdarzeń są dodawane do dokumentowania domyślnie, ale to powinno ograniczyć obsługę myszy na elemencie pojemnika:

controls = new THREE.TrackballControls(camera , container);

Źródło

2012-12-02 16:26:19 yaku

Tak, działa! Dziękuję Ci! – ForumLeech

** Zasadniczo, upewnij się, że ten wiersz: ** 'document.getElementById ("WebGL-output") appendChild (renderer.domElement);' ** pojawia się przed tą linią. ** 'var trackballControls = new THREE.TrackballControls (camera, renderer.domElement); ' –

Sugerowana odpowiedź nie działa dla mnie, to jednak robi. Mam nadzieję, że to komuś pomaga!

controls = new THREE.TrackballControls(camera, renderer.domElement);

Źródło

2014-05-15 13:10:41

Używam r73 i to nie działa dla mnie. Mam tu inny powiązany problem: http://stackoverflow.com/questions/33332655/three-js-dat-gui-trackballcontrols-renderer-domelement-disables-rotate-and-p – rjd

Zezwalaj na kontrolę myszy w scenie three.js tylko wtedy, gdy mysz znajduje się na płótnie

Odpowiedz

Powiązane problemy