how to make image draggable in placed in <a-scene> using <a-assets> and <a-image>
Question
I am trying out augmented reality for web for which i am using aframe-ar.js and aframe.js. I want to make a image draggable which i have placed in <a-scene> . I have use <a-assets> tag to first register the image and then used <a-image> to display the image when the marker is identified in the webcam. The image was displayed successfully but i am not able to make it draggable even after trying many options. My code goes here:
<!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>
1 answers
solution1
0 2017-11-22 21:14:59
This isn't built into A-Frame, but you can use a 3rd party component to get the desired results.
aframe-click-drag-component allows for clicking and dragging entities around on the screen:
Check out the demo .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.