如何使用 <a-assets> 和 <a-image> 使图像可拖动放置在 <a-scene> 中答案

【问题标题】：how to make image draggable in placed in <a-scene> using <a-assets> and <a-image>如何使用 <a-assets> 和 <a-image> 使图像可拖动放置在 <a-scene> 中
【发布时间】：2017-12-15 08:29:58
【问题描述】：

我正在尝试使用 aframe-ar.js 和 aframe.js 的网络增强现实。我想制作一张我放在<a-scene> 中的可拖动图像。我使用<a-assets> 标签首先注册图像，然后在网络摄像头中识别标记时使用<a-image> 显示图像。该图像已成功显示，但即使尝试了许多选项，我也无法使其可拖动。我的代码在这里：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Augmented Reality For Web</title>
    <script src="three.js"></script>
    <script src="aframe.min.js"></script>
    <script src="aframe-ar.js"></script>
    <script src="aframe-click-drag-component.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script src="https://unpkg.com/aframe-click-drag-component"></script>
    </head>
    <body>
    <a-scene embedded arjs='sourceType: webcam;'>
    <a-assets>
    <img id="my-image" src="Samplee.jpg"><img>
    </a-assets>
    <a-image id="img_disp"  src="#my-image" rotation="90 180 0" 
    visible="true">
    </a-image>  
    <a-marker-camera preset='hiro'></a-marker-camera>
    </a-scene>
    </body>
    </html>

【问题讨论】：

标签： javascript three.js augmented-reality aframe ar.js

【解决方案1】：

这不是内置在 A-Frame 中的，但您可以使用第 3 方组件来获得所需的结果。

aframe-click-drag-component 允许在屏幕上单击和拖动实体：

查看the demo。

【讨论】：