首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将鼠标事件绑定到a-frame对象

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

Stack Overflow用户
提问于 2020-09-11 15:47:31
回答 1查看 310关注 0票数 2

我正在为一个增强现实项目使用aframe和AR.js。我正在尝试将鼠标事件附加到3D objects.According和ar.js文档中,为此,您必须使用光标。

我要做的是,将鼠标作为光标,然后使用如here所示的aframe-mouse-cursor-component将鼠标事件附加到它。

它在一定程度上是有效的。我可以使用鼠标在屏幕上拖动3D资源,但鼠标事件都不起作用。

这是HTML:

代码语言:javascript
复制
<!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>

这是JS:

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

我尝试了很多事件-- mousedown,mouseup,click等等,但都不起作用。

如何将这些事件绑定到鼠标?

EN

回答 1

Stack Overflow用户

发布于 2020-09-12 14:36:05

Aframe在光标组件中具有鼠标模式

代码语言:javascript
复制
<a-entity cursor="rayOrigin: mouse">

这是link

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63842855

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档