将鼠标事件绑定到 a-frame 对象

Question

I am using aframe and AR.js for an Augmented Reality project.我正在将 aframe 和 AR.js 用于增强现实项目。 I am trying to attach mouse events to the 3D objects.According to the ar.js docs You would have to use a cursor for this.我正在尝试将鼠标事件附加到 3D 对象。根据 ar.js 文档，您必须为此使用光标。

What I'm trying to do is , make the mouse as the cursor, and then attach the mouse events to it, using the aframe-mouse-cursor-component as shown here .我正在试图做的是，使鼠标的光标，然后装上鼠标事件给它，使用aframe-mouse-cursor-component如图所示这里。

It works till an extent.它在一定程度上起作用。 I am able to drag the 3D assets across the screen using the mouse, but none of the mouse events work.我可以使用鼠标在屏幕上拖动 3D 资产，但没有任何鼠标事件起作用。

This is the HTML:这是 HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script src="js/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-mouse-cursor-component@0.5.3/dist/aframe-mouse-cursor-component.min.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam' cursor="rayOrigin: mouse">
    <a-assets>
          <!--Used <a-asset-item> here  -->
    </a-assets>
    <a-marker type='pattern' url='markers/mainmarker.patt'>
        <a-entity right gltf-model="#arrow" scale="1.5 1.5 1.5" ></a-entity>
        <!-- other <a-entity> entities  -->
    </a-marker>
    <a-entity camera look-controls mouse-cursor>
        <!-- <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.049; radiusOuter: 0.05"
            material="color: red; shader: flat">
        </a-entity> I have tried the code with and without this part -->
    </a-entity>
</a-scene>
</body>
</html>

And this is the JS:这是JS：

AFRAME.registerComponent('right', {
  init: function () {
    this.el.addEventListener('mousedown', function (evt) {
        console.log("THIS GOT CLICKED");
        //other stuff to do
    });
  }
});

I have tried a lot of events - mousedown,mouseup,click etc. But none work.我尝试了很多事件 - mousedown、mouseup、click 等。但都没有工作。

How do I bind these events to the mouse?如何将这些事件绑定到鼠标？

Answer 1

Aframe has mouse mode in cursor component Aframe 在光标组件中具有鼠标模式

<a-entity cursor="rayOrigin: mouse">

Here is link这是链接

将鼠标事件绑定到 a-frame 对象

问题描述

1 个解决方案

解决方案1
2 2020-09-12 06:36:04

将鼠标事件绑定到 a-frame 对象

问题描述

1 个解决方案

解决方案1 2 2020-09-12 06:36:04

解决方案1
2 2020-09-12 06:36:04