Closed comsyspro closed 6 years ago
I'll take a look this weekend.
I've updated the component so that el.setObject3D()
isn't called until after the textures have loaded. This should prevent the object3dset
event from being emitted before the cubemap has finished loading.
One way to do a fade:
<a-scene>
<!-- Sphere smaller than cubemap, large enough to surround user -->
<a-sphere radius="4000" material="color: black; side: back; transparent: true; opacity: 0">
<!-- Fade animations -->
<a-animation id="fadeOut" attribute="material.opacity"
dur="3000"
from="0.0"
to="1.0"
begin="fadeOut"></a-animation>
<a-animation id="fadeIn" attribute="material.opacity"
dur="3000"
from="1.0"
to="0.0"
begin="fadeIn"></a-animation>
</a-sphere>
<a-entity id="skybox" cubemap="folder:../assets/Yokohama3/"></a-entity>
</a-scene>
// Fade in when skybox finishes update.
skybox.addEventListener('object3dset', () => fadeIn.emit('fadeIn'));
// When changing backgrounds
function changeBackground () {
fadeOut.emit('fadeOut');
fadeOut.addEventListener('animationend', function() {
skybox.setAttribute('cubemap', 'folder:../assets/GoldenGateBridge2/');
});
}
Thanks. So it looks much better.
No prob.
There is probably a more direct and performant way of doing a fade with shader material, but this works for now.
That's a good solution, because you can sytle the fade effect and it only starts fading in when the material has updated, and not in between, so it's a smooth blending.
Hi,
I'm looking for a solution to have a fadeout / fadein effect after a new cubemap has loaded.
Here is a code snippet which shows the fade effect: https://github.com/aframevr/360-image-gallery-boilerplate/blob/master/components/set-image.js
And here is the project site where you can see the fade effect when pressing the link buttons: https://aframe.io/360-image-gallery-boilerplate/
The same should be done also for cubemap components: Component that listens to an event, fades out an entity, swaps the texture, and fades it back in.
Regards.