Javascript AR.JS-旋转地球仪
我第一次使用AR.JS,用一个简单的小动画解决了一些问题,我试图得到一个地球在HIRO标记上旋转的图像。以下代码有效:Javascript AR.JS-旋转地球仪,javascript,augmented-reality,aframe,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
<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内联更改它们
谢谢您的帮助。您需要添加一个执行旋转的空实体。
这在这里起作用:
<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>