3

I am trying out a-frame and can't find anything about how to drag and drop elements and have been looking for it for hours! Is anyone familiar with a-frame? Thanks

thats my code so far:

<a-scene>
    <a-cursor></a-cursor>
 <a-assets>
  <img id="enemy-sprite" crossorigin="" src="mustache1.jpg">
 </a-assets>
 <a-image look-at="#player" src="#enemy-sprite" transparent="true" position="0 1.8 -4"></a-image>
 <a-camera id="player" position="0 1.8 0"></a-camera>
 <a-sky src="street.jpg"></a-sky>

EDIT: browser/home.html:

  <scene scene-id="sceneId"></scene>

browser/js/app/directives/screne.html:

  <a-scene>
    <a-sphere click-drag position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-camera look-controls-enabled="false"></a-camera>
  </a-scene>

index.html

<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-click-drag-component"></script>
<script>  registerAframeClickDragComponent(window.AFRAME); </script>
H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
javascript2016
  • 973
  • 3
  • 17
  • 41

1 Answers1

6

This isn't built into Aframe, 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:

Entities with the click-drag component can be click and dragged around the 3D scene. Even works while the camera is moving or rotating!

<head>
  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-click-drag-component"></script>
  <script>
    registerAframeClickDragComponent(window.AFRAME);
  </script>
</head>

<body>
  <a-scene>
    <a-sphere click-drag position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-camera look-controls-enabled="false"></a-camera>
  </a-scene>
</body>

Check out the demo.

Jess Telford
  • 12,880
  • 8
  • 42
  • 51
  • Thank you. Are you familiar with the drawing component? I tried to npm install it and then require it (var AFRAME = require("aframe-core"); var draw = require("aframe-draw-component").component; AFRAME.registerComponent("draw", draw);) but I keep getting the error message that AFRAME is not defined – javascript2016 Oct 10 '16 at 17:11
  • 1
    Try using aframe, not aframe-core. – ngokevin Oct 10 '16 at 23:00
  • Hey, your answer was great and back then drag and drop started working but now not anymore and I can't tell why. I updated my question with the code, would be great if you could help. Been researching for so long but there is not much online for a-frame..Did it just like you suggested and can't move the object and neither 'move' the screen..its all just static.. – javascript2016 Jan 29 '17 at 16:26
  • I am following the installation instructions exactly and am getting this error in the console. v-tour-embed:10 Uncaught ReferenceError: registerAframeClickDragComponent is not defined at v-tour-embed:10 – Spencer Cooley Apr 25 '17 at 00:20
  • 1
    @SpencerCooley See here : https://github.com/jesstelford/aframe-click-drag-component/issues/17 – Dunatotatos May 08 '17 at 15:05