三個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，而不是最佳實踐。