Question

我一直在与three.js一起创建可视化效果，其中涉及围绕地球旋转的卫星。目前，我有两颗卫星已作为精灵包含在场景中，并且我正在使用Raycaster来检测对这些精灵的点击。单击其中一颗卫星后，将弹出一个弹出窗口，显示卫星信息。到目前为止，一切都很好！。现在，此弹出窗口具有一个x按钮，单击该按钮时应关闭该弹出窗口。但是，这似乎不起作用。即使悬停似乎也没有反应。我希望有人能对此事发表一点看法。我最初的猜测是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;
}

感谢您的帮助：）

模态弹出窗口在Three.js中没有响应

0 个答案: