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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

I'm trying to render a 3D model using A-Frame. This is what I've done

<!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>

This code works and rendering is done well.

However,I'm tryng to add some event listeners that enable to get the sceene coordinates (x, y, z) of the point where I clicked with mouse.

Is there any way to do this?

question from:https://stackoverflow.com/questions/65844344/get-coordinates-of-a-scene-with-a-click-in-a-frame

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:30:45+0000

If you want to detect where the meshes were clicked, then the information is within the click event detail:

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

For example:

<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>

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags