[英]Binding mouse events to a-frame objects
我正在將 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
});
}
});
我嘗試了很多事件 - mousedown、mouseup、click 等。但都沒有工作。
如何將這些事件綁定到鼠標?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.