使用 ThreeJS 光线投射 HTML 元素

Question

我们在 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 元素时，它会返回一个空数组。有什么建议吗？

提前谢谢

Answer 1

Raycaster

适用于具有

raycast

方法的对象，例如

Mesh

。当您调用

raycaster.intersectObject( scene, true )

时，

Raycaster

会通过

scene

递归查找使用

raycast

方法的对象。当它找到一个时，它会执行该方法来确定是否存在任何交叉点。

DIV 和其他 HTML 元素不是 Three.js 场景的一部分。它们是网页 DOM 的一部分。

Raycaster

无法与它们相交，因为它甚至不知道它们在那里。

选项1

您可以将文本写入纹理并创建

Sprite

来显示标签。

Sprite

支持

raycast

方法。

选项2

您可以向场景中添加一个模拟来表示 HTML 元素。这可能应该是透明的

Sprite

或其他类型的广告牌，以确保方向保持正确。诀窍是确保定位与 HTML 元素的 2D 定位相匹配。

选项3

您可以将单击处理程序（或类似事件）添加到包含标签的元素。当您单击时，事件对象应包含一个

target

，它应该是您单击的 HTML 元素，无论侦听器的宿主元素如何。事件的属性将包括 2D 单击位置，但如果您尝试获取 3D 点，则需要将其投影到 3D 空间中。