我正在用 Three.js 制作一個帶有移動物件的影片。在這個影片中，我在單擊一個物件時創建了一個文本氣泡，它有一個“X”按鈕來關閉它。但是，如果 x 按鈕覆寫了 Three.js 中的 3D 物件，則該按鈕將被完全忽略，而是單擊 3D 物件。我怎樣才能避免這種情況，而是允許此 HTML 內容始終優先？
如果有幫助，我正在使用光線投射來檢測我的 3D 物件上的點擊。我已經嘗試給按鈕一個更高的 z 順序，但是沒有用。而且，要清楚的是，HTML 內容在視覺上位于 3D 物件之上。
此外，如果單擊文本氣泡不會直接落入文本氣泡下方的物件，那就太好了。
編輯：這是我的 onclick 函式的簡化代碼（適用于我的 3D 物件）。我將一個不同的 onclick 函式系結到我有問題的按鈕上。
document.addEventListener('mousedown', () => {
raycaster.setFromCamera(mouse, camera);
const hits = raycaster.intersectObjects(scene.children);
if(hits.length > 0) {
---do stuff---
}
renderer.render(scene, camera);
});
uj5u.com熱心網友回復：
我能夠通過僅對z-index可點擊物件做出反應來實作這一點，但如果這不起作用，您可以嘗試pointer-events: none;在 3D 渲染上使用。在此處查看螢屏截圖https://streamable.com/yzp68c。webGL 地球在反應中使用three.js，是鏈接位于頂部的活動區域的全寬。
然后外部容器是position: relative;...鏈接位于內部的 div 中position: absolute; z-index: 1000;，然后地球 Three.js 渲染是最后一個 div，但仍在容器內。
uj5u.com熱心網友回復：
請參閱此鏈接的最佳答案：How can I block a THREE.js raycast with HTML elements?
這對我來說非常有效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/402151.html
標籤：javascript html css 动画片 三.js
上一篇：如何使用JavaScript為加速的DOM元素設定影片？
下一篇：wxmaxima中的影片