2017-07-11 4 views
2

私はaframe-ar.jsとaframe.jsを使用しているウェブ用の拡張リアリティを試しています。私は<a-scene>に置いた画像をドラッグ可能にしたい。最初に画像を登録するのに<a-assets>タグを使用してから、<a-image>を使用して、ウェブカメラでマーカーが識別されたときに画像を表示します。イメージは正常に表示されましたが、多くのオプションを試してもドラッグ可能にすることはできません。私のコードはここにあります:<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> 

答えて

0

これはAフレームには組み込まれていませんが、サードパーティコンポーネントを使用して目的の結果を得ることができます。

aframe-click-drag-componentは、画面上でエンティティをクリックしてドラッグすることができます:

the demoをチェックしてください。

関連する問題