javascript - AR.JS - 旋转地球仪

标签 javascript augmented-reality aframe ar.js

我是第一次使用 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>

地球也是从上方显示的,因此主要显示北极。我希望最高点是赤道,这样你就可以看到几乎所有有人居住的世界。我查看了 client documentation对于一个框架并试图找到一个更好的例子,但我真的很难弄清楚如何旋转它来查看世界上人口稠密的部分而不是冰盖。

关于最终期望结果的一些背景。

我最终想要实现的是一个旋转地球仪的 AR 叠加层,其中突出显示了用户所在的国家/地区。为此,我需要定义多个源图像并使用(大概)一些 javascript 内联更改它们。

感谢您的帮助。

最佳答案

您需要添加一个执行旋转的空实体。 这在这里有效:

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

关于javascript - AR.JS - 旋转地球仪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47126654/

相关文章:

webpack - AFrame gltf 加载程序无法识别我的 Assets

javascript - 如何防止这两个立方体同时被拖动?

javascript - 如何在 WebVR/A-Frame 中监听 Android Chrome 上的点击事件?

javascript - 使用 Javascript 进行响应式编程

javascript - 使 Bootstrap 导航栏在滚动时折叠?

android - 使用适用于 Android 的 Qualcomm AR SDK 对标记进行远程跟踪

iphone - 使用陀螺仪改进 iPhone AR(工具)套件

javascript - 有人可以用 async/await 向我解释以下内容吗?

javascript - 在 v-for 循环中使用 v-model

android - ARKit vs. ARCore vs. Vuforia vs. D'Fusion Mobile vs. Layar SDK