Модальное всплывающее окно не отвечает в Three.js - PullRequest
Новая
       19

Модальное всплывающее окно не отвечает в Three.js

0 голосов
/ 27 июня 2019

Я работал с three.js, чтобы создать визуализацию спутников, вращающихся вокруг Земли.В настоящее время у меня есть два спутника, которые были включены в сцену как спрайты, и я использую Raycaster для обнаружения кликов по этим спрайтам.Как только на один из спутников нажимают, появляется модальное всплывающее окно, отображающее информацию о спутниках.Все идет нормально!.Теперь у этого всплывающего окна есть кнопка «топор», которая должна закрываться при нажатии.Однако это, кажется, не работает.Даже зависание, похоже, не отвечает.Я надеялся, что кто-нибудь сможет пролить немного света на этот вопрос.Мое первоначальное предположение состоит в том, что холст сцены three.js действует как препятствие.У меня есть следующий код:

JAVASCRIPT 

// Detecting clicks on Sprite
var modal = document.querySelector(".modal");
var closeButton = document.querySelector(".close-button");

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector3();

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function clickOnSprite(event) {
    console.log("CLICK!" + event.clientX + "," + event.clientY);

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(clickableObjects);

    if (intersects.length > 0) {
        intersects.forEach(function (element) {
        console.log("Intersection: " + element.object.id);
        element.object.material.color.set('#0bffff');
        clicked = !clicked; // This will temporarily stop the animation
        toggleModal();

    });
}   

} // Function ending

closeButton.addEventListener("click", toggleModal);
window.addEventListener('click', clickOnSprite, false);

HTML 

    <div class="modal">
    <div class="modal-content">
        <span class="close-button">×</span>
        <h1>Satellite Information</h1>
    </div>
</div>

CSS 

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
.close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}
.close-button:hover {
    background-color: darkgray;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

Спасибо за помощь:)

...