3 개의 js GUI를 통한 광선 추적 방지

Question

개체를 클릭하고 개체가 아닌 정보를 표시하는 비모수 대화 상자 팝업을 눌러 개체를 선택해야합니다. 그것은 그래야만 작동하지만 사용자가 대화 상자를 포함하여 GUI 항목을 클릭하고 객체가 뒤에 있으면 세 개의 js 객체가 선택되어 팝업의 정보가 변경됩니다.

다음은 스 니펫입니다.

document.addEventListener('mousedown', onDocumentMouseDown, false); 

jQuery를 대화 발생기 :

function createDialog(title, text, top) { 
     return $("<div class='dialog' title='" + title + "'><p id='bodyText'> " + text + "</p></div>") 
     .dialog({ position: { my: ("right" + 0 + "top+" + top), at: "right top" }, 
     close : setDialogNull, }); 
} 

하면 onMouseDown 기능 :

function onDocumentMouseDown(e) { 
    e.preventDefault(); 
    console.log(dialog); 
    var mouseVector = new THREE.Vector3(); 
    mouseVector.x = 2 * (e.clientX/window.innerWidth) - 1; 
    mouseVector.y = 1 - 2 * (e.clientY/window.innerHeight); 
    var raycaster = new THREE.Raycaster(); 
    raycaster.setFromCamera(mouseVector, camera); 
    var intersects = raycaster.intersectObjects(objectCollection); 

    if (intersects.length > 0) { 
     var selectedObject = intersects[0]; 
     console.log("Intersected object", intersects[0]); 
     selectedObject.object.material = (selectedObject.object.material.wireframe) ? selectedBoxMaterial : unselectedBoxMaterial; 

     var text = intersects[0].distance; 
     var title = "Shelf info"; 

     if (dialog == false) { 
      createDialog(title, text, offset); 
      offset = offset - 50; 
      console.log(offset); 
      dialog = true; 

      console.log(dialog); 
     } 

     if (dialog == true) { 
      {jQuery("#bodyText").text(text); 
     } 
    } 
} 

다른 GUI 요소는 dat.GUI 만들어집니다.

이 문제에 관해 검색 할 때 대부분의 결과는 Unity에 관한 것이지만 숙련 된 개발자가 아니기 때문에 나는 그것들에 적응하는 방법을 정말로 이해하지 못합니다.

Answer 1

설정 및 이벤트를 이해하는 코드가 더 이상 없으므로 해결책이 무엇인지 알기가 어렵습니다. 내가 당신의 three.js 특정 ID를 보유하고있는 요소를주고, onDocumentMouseDown에서 그것이 활성 요소인지 확인하십시오. 설정에 따라 document.activeElement.parentElement.id 또는 무엇이든 확인해야 할 수도 있습니다.

function onDocumentMouseDown(e) { 
    if(document.activeElement.id != "myThreeJSElementID"){ 
     //some other element has been clicked so let's return with nothing: 
     return; 
    } 
    e.preventDefault(); 
    console.log(dialog); 
    var mouseVector = new THREE.Vector3(); 
    mouseVector.x = 2 * (e.clientX/window.innerWidth) - 1; 
    mouseVector.y = 1 - 2 * (e.clientY/window.innerHeight); 
    var raycaster = new THREE.Raycaster(); 
    raycaster.setFromCamera(mouseVector, camera); 
    var intersects = raycaster.intersectObjects(objectCollection); 

    if (intersects.length > 0) { 
     var selectedObject = intersects[0]; 
     console.log("Intersected object", intersects[0]); 
     selectedObject.object.material = (selectedObject.object.material.wireframe) ? selectedBoxMaterial : unselectedBoxMaterial; 

     var text = intersects[0].distance; 
     var title = "Shelf info"; 

     if (dialog == false) { 
      createDialog(title, text, offset); 
      offset = offset - 50; 
      console.log(offset); 
      dialog = true; 

      console.log(dialog); 
     } 

     if (dialog == true) { 
      {jQuery("#bodyText").text(text); 
     } 
    } 
} 

이상적으로 당신이 당신의 three.js를 컨테이너에 대한 특정 이벤트를 설정하기보다는 글로벌 문서 이벤트를 사용하지만, 예외가 지금은 작업을해야한다 더. 많은 코드 예제에서는 모범 사례가 아닌 단순함에서 document.addEventListener를 사용합니다.