提问人：kartGIS 提问时间：10/11/2023 更新时间：10/11/2023 访问量：43
使用 ThreeJS 进行光线投射 HTML 元素
Raycasting HTML elements with ThreeJS
问：
我们面临着 ThreeJS 的一个问题。我们正在尝试在 ThreeJS 中包含 HTML 元素，并且我们正在进行光线投射以获取我们是否指向任何 HTML 元素。但是当我们与它相交时，返回一个空数组。一个简单的例子是下一个：
https://codepen.io/wazosa/pen/OJrqRRy?editors=1111
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(scene, true);
console.log(intersects)
if (intersects.length > 0) {
var object = intersects[0].object;
}
你有一个 div 和一个立方体，当你单击立方体时，它会返回一个带有它的控制台，但当你尝试单击 div 元素时，它会返回一个空数组。有什么建议吗？
提前感谢
答：
2赞
TheJim01
10/11/2023
#1
Raycaster对具有方法的对象起作用，例如 .调用 时，通过使用该方法查找对象来递归。当它找到一个时，它会执行该方法来确定是否存在任何交叉点。raycastMeshraycaster.intersectObject( scene, true )Raycastersceneraycast
DIV 和其他 HTML 元素不是 three.js 场景的一部分。它们是网页 DOM 的一部分。 不能与它们相交，因为它甚至不知道它们在那里。Raycaster
选项 1
您可以将文本写入纹理并创建一个 Sprite 来显示标签。 支持该方法。Spriteraycast
选项 2
您可以向表示 HTML 元素的场景添加模拟。这应该是一个透明的或其他类型的广告牌，以确保方向保持正确。诀窍是确保定位与 HTML 元素的 2D 定位匹配。Sprite
选项 3
可以将单击处理程序（或类似事件）添加到包含标签的元素。单击时，事件对象应包含一个属性，该属性应是单击的 HTML 元素，而不考虑侦听器的 host 元素。其他事件属性包括 2D 单击位置，但如果您尝试获取 3D 点，则需要将其投影到 3D 空间中。target
评论
0赞
kartGIS
10/11/2023
很好的答案，可悲的是，但谢谢:D！
评论