a-frame vr how to drag and drop assets / elements insight a picture?

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/39939318/a-frame-vr-how-to-drag-and-drop-assets-elements-insight-a-picture

标签

aframe

webvr