Aframe: Able to change environment

[dlnkprs]

Hi all,

I want to tell a image-based story in VR, by using multiple images with sound following each other. It should be so that the user can "click" or gaze at an object to see a new image with new sounds (to achieve viewing from another perspective). One solution could be redirecting to a new page with new html, but I don't see a possibility to add those interactions. Is it possible to achieve this?

Or is it possible to fade from one a-scene to another?

Thanks,
Dylan

[dmarcos]

When do you say an image what do you exactly mean? An image floating in the user's field of view? A completely different scene? For the former you can now show/hide entities based on user interactions. For the latter we will be soon supporting multiple a-scene elements on the same page.

[dlnkprs]

I'm sorry, it's the latter: different scenes.
So it would be possible to gaze at an object and change (show/hide) entities like a-sky and a-entity with sound? That would create a new "scene".

[nylki]

Until multiple scenes are supported, you could certainly do something like:

``` .html

<a-camera position="2 0 3">
  <a-entity cursor="fuse: true; maxDistance: 30; timeout: 1000">
  </a-entity>
</a-camera>

<a-entity id="scene1">
  <a-cube color="red" onclick="nextScene()"> </a-cube>
</a-entity>

<a-entity id="scene2" visible="false">
  <a-cube color="green" position="0 2 -5"> </a-cube>
  <a-cube color="yellow" position="5 0 -5"> </a-cube>
  <a-cube color="blue" position="0 0 -1"> </a-cube>
</a-entity>

```

Instead of setting the visible attribute in the onclick function, you could also add a-animation's to eg. trigger transparency etc.

[nylki]

@dlnkprs btw. I just updated my code above to include cursor/click behaviour.

[dlnkprs]

@nylki thank you for the code provided. It works perfectly. Even with sound being played only when clicked:

<a-cube color="red" position="-2 0 0" onclick="start1()" sound="src: radioactiveshort.mp3; on: click"> </a-cube>

However the fuse doesn't work. It's essential for the experience (not having to leave the environment to touch the screen on mobile). Is there a way to achieve the following effect? (recorded from JauntVR app)

[nylki]

@dlnkprs A-Frame is still in heavy development, so it should work in the future, but I noticed some glitches with the fuse cursor as well.

You may want to try the dev branch though, it includes many improvements and new components.
If you use _npm_ you can do npm install mozvr/aframe#dev.

I did a small demo for you (using the dev branch of aframe) showing the _fuse_ cursor and a-animation's to fade in/out the pseudo-scenes:
http://codepen.io/anon/pen/pyzjPL

[ngokevin]

Yea, there's also http://codepen.io/team/mozvr/pen/RrxgwE for Cursor with Visual Feedback.

And yeah, there are many ways to do transitions. One way we did before is to create a black mask entity that fades in when transitioning, and you change the scene during the transition.

[ngokevin]

For now, use <a-entity camera> instead of <a-camera> to get fuse working

[coleholyoake]

Hi @dlnkprs, do you mind me asking how you did that animation around the button? I really like that experience! Cheers. (sorry I know it's off topic)

[ngokevin]

@coleholyoake Something similar to http://codepen.io/team/mozvr/pen/RrxgwE but you can animation the theta-length/geometry.thetaLength rather than the scale

[coleholyoake]

Cool thanks heaps @ngokevin