1

私は初めて AR.JS を使用していますが、HIRO マーカーの上で回転する地球儀の画像を取得しようとしている単純な小さなアニメーションでいくつかの問題を抱えています。以下のコードが機能します。

<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>

地球も上から表示されるため、主に北極が表示されます。頂点を赤道にしたいので、赤道が回転すると、人が住んでいる世界のほとんどすべてを見ることができます. a-frame のクライアント ドキュメントを調べて、これのより良い例を見つけようとしましたが、それを回転させて、氷冠ではなく人口の多い世界を見る方法を理解するのに本当に苦労しています。

最終的な望ましい結果の背景を少し説明します。

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

ご協力いただきありがとうございます。

4

1 に答える 1

2

回転を行う空のエンティティを追加する必要があります。これはここで機能します：

<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>
于 2018-03-05T20:16:13.367 に答える