单击 A-Frame 获取场景坐标

Question

我正在尝试使用 A 帧渲染 3D 模型。这就是我所做的

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>glTF Test</title>
  <meta name="description" content="OBJ Test">
  <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>.
</head>

<body>
  <a-scene>
    <!-- Assets definition -->
    <a-assets>
      <a-asset-item id="object-ref" src="/public/Scene/scene.gltf"></a-asset-item>
    </a-assets>

    <!-- Using the asset management system. -->
    <a-gltf-model src="#object-ref" position="0 25 0"></a-gltf-model>

    <!-- Camera and cursor -->
    <a-camera position="0 25 15">
      <a-cursor></a-cursor>
    </a-camera>

    <!-- Environment elements-->
    <a-sky color="#000000"></a-sky>
    <a-plane color="#1A1A1A" rotation="-90 0 0" width="500" height="500"></a-plane>
  </a-scene>
</body>

</html>

此代码有效，渲染效果很好。

但是，我正在尝试添加一些事件侦听器，以获取我用鼠标单击的点的场景坐标 (x, y, z)。

有什么办法吗？

Answer 1

如果您想检测网格被点击的位置，那么信息在 click event detail:

entity.addEventListener("click", e => {
  console.log(e.detail.intersection.point)
})

例如：

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      const text = document.querySelector("a-text")
      // listen for clicks
      this.el.addEventListener("click", e => {
        // log the points
        //console.log(e.detail.intersection.point)
        let point = e.detail.intersection.point
        let pointString = point.x.toFixed(2) + ", " + point.y.toFixed(2) + ", " + point.z.toFixed(2);
        text.setAttribute("value", "Click at: " + pointString)
      })
    }
  })
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable">
  <a-text position="-1 2 -3" color="black"></a-text>
  <a-box class="clickable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
  <a-sphere class="clickable" position="0 1.25 -5" radius="1.25" color="#EF2D5E" foo></a-sphere>
  <a-cylinder class="clickable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" foo></a-cylinder>
  <a-plane class="clickable" position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" foo></a-plane>
  <a-sky class="clickable" color="#ECECEC" foo></a-sky>
</a-scene>

万一您想点击任何地方并获得一个点，由于映射 2D <x, y> -> 3D <x, y, z>.

，事情会变得复杂

在这种情况下，我会在相机周围创建一个碰撞网格（如球体），用它来确定点击点。

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      const text = document.querySelector("a-text")
      // listen for clicks
      this.el.addEventListener("click", e => {
        // log the points
        //console.log(e.detail.intersection.point)
        let point = e.detail.intersection.point
        let pointString = point.x.toFixed(2) + ", " + point.y.toFixed(2) + ", " + point.z.toFixed(2);
        text.setAttribute("value", "Click at: " + pointString)
      })
    }
  })
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable">
  <a-text position="-1 2 -3" color="black"></a-text>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-camera>
    <a-sphere class="clickable" material="side: back" visible="false" foo></a-sphere>
  </a-camera>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

单击 A-Frame 获取场景坐标

Get coordinates of a scene with a click in A-Frame

mouseevent

3d-model

aframe