Wie kann ich einen THREE.js-Raycast mit HTML-Elementen blockieren?

Question

Ich möchte HTML-Elemente auf meiner Seite, um THREE.js Raycasts zu blockieren, wie kann ich das tun? Das Problem, das ich habe, ist die Raycast Ruft Objekte in meiner Szene, wenn der Benutzer auf ein offenes DIV-Element klickt (Es ruft die Objekte hinter dem DIV). Ich möchte das Raycasting nicht deaktivieren, solange das DIV offen ist. Ich möchte nur, dass der DIV den Raycast blockiert.

Danke, Reece

Answer 1

Der beste Weg, dies zu tun, ist wahrscheinlich das DOM Event-Handling zu verwenden.

Angenommen, Sie eine dom-Struktur wie diese:

<div class="container"> 
    <canvas class="threejs-canvas"></canvas> 
    <div class="some-overlay"></div> 
</div> 

Und Sie wollen Interaktionen in .some-overlay nicht auf der three.js Szene in dem Leinwand-Elemente einen Effekt haben, müssen Sie zwei Dinge tun :

1. die Raycaster nur Ereignisse verwenden sollten, die auf den .container -elementigen
2. Klicks innerhalb der Overlay passieren müssen stopPropagation() verwenden, um Ereignisse zu der von sprudeln zu stoppen

   var container = document.querySelector('.container'); 
   var overlay = document.querySelector('.some-overlay'); 
   
   container.addEventListener('click', function() { 
       // do raycasting here 
   }); 
   
   overlay.addEventListener('click', function(ev) { 
       ev.stopPropagation(); // prevent event from bubbling up to .container 
   
       // ...do whatever you like 
   }); 
   

   Es wird noch einfacher, wenn Sie für die Ereignisse für die Raycaster auf der Leinwand-Element selbst hören: Behälter

Also, zusammen so etwas wie dies sein könnte. In diesem Fall werden die Ereignisse niemals das Canvas-Element erreichen und Sie müssen nichts Besonderes tun.