2017-11-05 43 views
1

私はAR.JSで初めて作業しており、単純な小さなアニメーションでいくつかの問題を抱えています。私はHIROマーカーの上を回転する地球のイメージを取得しようとしています。以下のコードが動作します:AR.JS - 回転する地球儀

<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script> 
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script> 
<body style='margin : 0px; overflow: hidden;'> 
     <a-scene embedded arjs='trackingMethod: best;'> 
      <a-assets> 
     <img id='earth' src='https://raw.githubusercontent.com/aframevr/sample-assets/master/assets/images/space/earth_atmos_4096.jpg'/> 
     <img id='earth2' src='http://www.keepthestreak.net/Earth_NZ.jpg'/> 
</a-assets> 
     <a-anchor hit-testing-enabled='true'> 
       <a-sphere material='src: #earth;' 
       position="0 0.5 0" radius="1" segments-height="53"> 
      <a-animation attribute="rotation" 
       dur="7000" 
       to="0 360 0" 
       easing= "linear"  
       repeat="indefinite"> 
     </a-animation> 
</a-sphere> 
</a-anchor> 
<a-camera-static/> 
</a-scene> 
</body> 

地球儀もまた北極を示しています。私はトップポイントが赤道になるようにしたいので、あなたが住む世界のほとんどすべてを見ることができるようにします。私はclient documentationを見て、これのより良い例を見つけようとしましたが、私はそれを回転させて、icecapsの代わりに世界の人口のビットをどのように見ることができるか把握するのに本当に苦労しています。

最終的に望ましい結果に少しの背景があります。

私が最終的に達成しようとしているのは、回転する地球儀のARオーバーレイで、ユーザーの母国が強調表示されています。これを行うには、複数のソース画像を定義し、それらを(おそらく)いくつかのjavascriptでインラインに変更する必要があります。

ありがとうございました。

答えて

0

ローテーションを行う空のエンティティを追加する必要があります。 これが動作します:

<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script> 
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script> 

<body style='margin : 0px; overflow: hidden;'> 
    <a-scene embedded arjs='trackingMethod: best;'> 
    <a-assets> 
     <img id='earth' src='https://raw.githubusercontent.com/aframevr/sample-assets/master/assets/images/space/earth_atmos_4096.jpg' /> 
    </a-assets> 

    <a-anchor hit-testing-enabled='true'> 
     <a-entity rotation="90 0 0"> 
     <a-sphere material='src: #earth;' position="0 0.5 0" radius="1" segments-height="53"> 
      <a-animation attribute="rotation" dur="7000" to="0 360 0" easing="linear" repeat="indefinite"> 
      </a-animation> 
     </a-sphere> 
     </a-entity> 
    </a-anchor> 
    <a-camera-static/> 
    </a-scene> 
</body> 
関連する問題