HTML 요소로 THREE.js 레이 캐스트를 차단하는 방법은 무엇입니까?

Question

내 페이지의 HTML 요소가 THREE.js 레이 캐스트를 차단하고 싶습니다. 어떻게해야합니까? 내가 겪고있는 문제는 사용자가 열려있는 DIV 요소를 클릭하면 (DIV 뒤에있는 객체를 가져 오는) 광선이 내 장면의 객체를 검색한다는 것입니다. DIV가 열려있는 동안에는 레이 캐스팅을 비활성화하고 싶지 않습니다. DIV가 레이 캐스트를 막고 싶습니다.

감사합니다, 리스

Answer 1

이 작업을 수행하는 가장 좋은 방법은 DOM의 이벤트 처리를 사용하는 아마.

는이 같은 DOM 구조가 있다고 가정 :

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

을 그리고 캔버스 요소에서 three.js를 현장에 영향을하지 .some-overlay의 상호 작용을 원하는 두 가지 작업을 수행 할 필요가 다음 raycaster 오버레이 내에서 .container - 요소

클릭에 일어날 이벤트 만 사용해야합니다

1. 받는 버블 링 이벤트를 중지 stopPropagation()를 사용할 필요가 캔버스 요소 자체에 raycaster에 대한 이벤트를 수신 할 경우

   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 
   }); 
   

   그것은, 더 쉽게 가져옵니다 용기

그래서 함께이 이런 일이 될 수 있습니다. 이 경우 이벤트는 캔버스 요소에 도달하지 않으며 사용자가해야 할 특별한 것은 없습니다.