文章/答案/技术大牛

发布

问AR.JS -旋转球
EN

Stack Overflow用户

提问于 2017-11-05 21:07:25

回答 1查看 3K关注 0票数 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>

地球也是从上面展示的，所以大部分是北极。我希望顶端是赤道，所以当它旋转时，你可以看到几乎所有有人居住的世界。我查看了客户文件中的一个框架，并试图找到一个更好的例子，但我真的很难弄清楚如何旋转它来观察世界上人口稠密的部分，而不是冰盖。

关于最终想要的结果的一些背景。

我最终试图实现的是一个AR覆盖一个旋转的地球仪与用户的祖国突出显示。要做到这一点，我需要定义多个源映像，并使用(大概)一些javascript对它们进行内联更改。

谢谢你的帮助。

aframe

ar.js

javascript

augmented-reality

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-05 20:16:13

您需要添加一个执行旋转操作的空实体。这里起作用的是：

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47126654

复制

相似问题

问AR.JS -旋转球
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AR.JS -旋转球EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AR.JS -旋转球
EN