Consenti il controllo del mouse della scena three.js solo quando il mouse è su tela

Il canvas three.js è un quadrato 500 x 500 all'interno di una pagina Web più grande con altro contenuto e ho bisogno del controllo del mouse della fotocamera (per zoomare e ruotare intorno l'oggetto) si verifica solo quando il mouse si trova all'interno del quadrato 500 x 500.Consenti il controllo del mouse della scena three.js solo quando il mouse è su tela

Inoltre, non riesco a scorrere la pagina Web, ma forse verrà risolto quando isoleremo il listener di eventi del mouse sul canvas 500 x 500.

codice attuale:

<!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>

fonte

2012-12-02 ForumLeech

maggior parte dei controlli consentono di specificare quale nodo DOM i listener di eventi sono aggiunti. I gestori di eventi vengono aggiunti per documentare per impostazione predefinita, ma questo dovrebbe vincolare la gestione del mouse per il vostro elemento contenitore:

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

fonte

2012-12-02 16:26:19 yaku

Sì, funziona! Grazie! – ForumLeech

** In sostanza, assicurarsi che questa linea: ** 'document.getElementById ("WebGL-output") appendChild (renderer.domElement);' ** appare prima di questa riga:. ** 'var trackballControls = new THREE.TrackballControls (camera, renderer.domElement); ' –

risposta suggerita non funziona per me, questo però lo fa. Spero che aiuti qualcuno!

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

fonte

2014-05-15 13:10:41

Sto usando r73 e questo non sembra funzionare per me. Ho un altro problema correlato aperto qui: http://stackoverflow.com/questions/33332655/three-js-dat-gui-trackballcontrols-renderer-domelement-disable-rotate-and-p – rjd

Consenti il ​​controllo del mouse della scena three.js solo quando il mouse è su tela

risposta

Problemi correlati

Consenti il controllo del mouse della scena three.js solo quando il mouse è su tela