Automatic rotation on 360° image

[AdrienPoupa]

Description:

Hello,

Is it possible to make a 360° image automatically rotate at load, endlessly? I searched the docs, especially the "rotation" section but it does not seem to be able to rotate the image automatically.

What I would like as a final result is this: http://photo-sphere-viewer.js.org/

Thank you.

• A-Frame Version: 0.3.0 (current I guess)
• Platform/Device: Android smartphone and desktop
• Reproducible Code Snippet or Demo URL [highly encouraged]: https://aframe.io/examples/showcase/sky/

[Stefie]

Hi, the rotation-attribute only rotates the object around the three different axes once on load. What you're looking for are animations, which you can attach to the 'a-sky'-element.

Like this:

<a-sky src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg">
    <a-animation attribute="rotation" fill="forwards" easing="linear" dur="15000" from="0 0 0" to="0 360 0" repeat="indefinite"></a-animation>
</a-sky>

Example on jsbin http://jsbin.com/qacawoz/edit?html,output

See docs for further information about a-animations https://aframe.io/docs/0.3.0/core/animations.html

[AdrienPoupa]

Awesome! Many thanks.

[AdrienPoupa]

One more question, if I may: how can I stop the animation on click?

I tried end="click" within tag but it does not stops the animation on click.

Hi Adrien, what are you trying to achieve? Do you want your scene to be controllable in VR-Mode? Or do you want to disable VR-Mode (vr-mode-ui="enabled: false" on the a-scene) and just use aframe present your 360-photos in a browser window and control the animation from outside the scene? The concept of a "click" is a bit different in VR compared to a button in html (for example), because you don't have an actual, physical click/touch-action, when you view your scene in VR-Mode.

I'd recommend you to have a look at the docs for the following components. https://aframe.io/docs/0.3.0/components/raycaster.html https://aframe.io/docs/0.3.0/components/camera.html https://aframe.io/docs/0.3.0/components/cursor.html https://aframe.io/docs/0.3.0/components/look-controls.html

Maybe you should head over to the aframe Slack Channel. There are around 2000 people asking and answering questions around the clock, so that's probably the better place to get answers for your questions. You can join the channel here https://aframevr-slack.herokuapp.com/ See you there!

[AdrienPoupa]

Hi,

Once again, thanks for your argumented answer.

This may sound dumb, but I would like to display my photos with an animated 360° panorama on desktop like you did in the jsbin; the animation would stop after a click on the image.

On the other hand, if the user's device supports VR, like a smartphone for example, then it makes no sense to launch an animation and the default presets are good enough.

An other possibility would be to let the image spin indefinitely on any device, stopping the animation after a click (assuming we are not in VR yet) but enable VR, which would of course not be animated but controlled by phone's sensors.

You can see a live example here: http://jsbin.com/suwogaveju/edit?html,output

If I open the image on a smartphone, I see the animation until I tap it; when I enter in the VR mode I am controlling the animation.

I am not using this script because it is not actively maintained and VR support is filled with bugs.

I will join the channel, thank you!

[AdrienPoupa]

Just in case anyone is wondering, I managed to do it:

http://output.jsbin.com/mofuyavude