3つのjs GUIを介したレイキャストピッキングの防止

Question

オブジェクトをクリックしてオブジェクトを選択し、非モーダルダイアログをポップアップしてオブジェクトに関する情報を表示する必要があります。ただし、ユーザーがダイアログを含むGUIアイテムをクリックしてオブジェクトがある場合、3つの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などを確認する必要があります。

より理想的にあなたのthree.jsコンテナのための特定のイベントを設定することではなく、世界的な文書イベントを使用する必要があります

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

が、例外は今のために働く必要があります。多くのコード例では、ベストプラクティスではなく、単純さからdocument.addEventListenerを使用しています。