Три js Предотвращение выбора raycast через GUI

Question

Мне нужно выбрать объекты, щелкнув по ним и всплывающее не модальное диалоговое окно, чтобы отобразить информацию об объекте. Он работает так, как должен, однако, если пользователь нажимает на любой элемент графического интерфейса пользователя, включая диалог, и есть объект позади, будет выбран три объекта 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); 
     } 
    } 
} 

Другие элементы графического интерфейса созданы с dat.GUI.

При поиске по этой проблеме большинство результатов о Unity, а не опытный разработчик, я не совсем понимаю, как их адаптировать.

Answer 1

Без дополнительного кода, чтобы понять ваши настройки и события, сложно понять, каким будет решение. Я бы дал элемент, который содержит ваш твой.js определенный идентификатор, и в 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 из простоты, а не для лучшей практики.