Блог

Главная - Вопросы по программированию - Привязка событий мыши к объектам a-frame

Привязка событий мыши к объектам a-frame

#javascript #dom-events #aframe

#javascript #дом-события #aframe #dom-события

Вопрос:

Я использую aframe и AR.js для проекта дополненной реальности. Я пытаюсь прикрепить события мыши к 3D-объектам.В соответствии с ar.js документы Для этого вам придется использовать курсор.

Что я пытаюсь сделать, так это сделать мышь в качестве курсора, а затем прикрепить к ней события мыши, используя, aframe-mouse-cursor-component как показано здесь.

Это работает до некоторой степени. Я могу перетаскивать 3D-ресурсы по экрану с помощью мыши, но ни одно из событий мыши не работает.

Это 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>

И это тот самый JS:

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

Я перепробовал множество событий — наведение курсора мыши, наведение курсора мыши, щелчок и т.д. Но ничего не работает.

Как мне привязать эти события к мыши?

Ответ №1:

Aframe имеет режим мыши в компоненте курсора

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

Вот ссылка

Комментарии:

1. Я тоже пробовал это, это заставляет мышь выглядеть по-другому рядом с 3D-объектом, но наведение курсора мыши по-прежнему не работает