Flip camera and opening transitions

Universal AR A-Frame
#1

Hello,
Have been checking out these Three.js examples. Any way we can recreate something similar to it in aframe? especially the flip camera function.
Three Flip Camera
Three Open Transition

#3

Hi @mihir !

This is a great question - I’ll start by answering the flip camera query, with some information later on regarding the ‘Open Transition’.

Luckily, it’s quite simple to create this ‘flip camera’ behaviour! Universal AR for A-Frame’s components function pretty much in the same way as A-Frame’s own components, so you can just change the zappar-camera attribute using the setAttribute() method - you can find the A-Frame documentation for that here. :zap:

As a simple example, you might want to do something like this:

<!-- Inside index.html -->

<!-- Scene set-up etc.... -->

<!-- Zappar Camera -->
<a-camera id="my-zappar-camera" zappar-camera="user-facing: true;"></a-camera>

<!-- End my scene... -->

<!-- Flip Camera Button -->
<div id="flip-camera-ui" class="btn">Flip Camera</div>

// Inside index.js

window.addEventListener("load", setup);

function setup() {
    // Get the flip camera UI button
    const flipCameraUi = document.getElementById('flip-camera-ui');
    // Get the zappar-camera component
    const myZapparCamera = document.getElementById("my-zappar-camera");
    // Get a variable we can manipulate
    let rearFacing = false;

    flipCameraUi.addEventListener("click", () => {
        // If we are not using the rear-facing camera...
        if (!rearFacing) {
            // ...set 'user-facing' to false so that we use the rear-facing camera instead...
            myZapparCamera.setAttribute("zappar-camera", "user-facing: false");
            // Make sure we update our rearFacing variable to keep track
            rearFacing = true;
        } else {
            // else, if we already are using the rear camera, make user-facing equal true
            myZapparCamera.setAttribute("zappar-camera","user-facing: true");
            // update rearFacing to reflect this change
            rearFacing = false;
        }
    });
}

Of course, this is a very basic demo - you could for example register a component to do this behaviour - this was just a good way of showing exactly what sort of process you could take.

When it comes to the opening door transition - this was all done with Three.js content - the only real Universal AR parts are the Zappar Camera and tracker bits. It should be able to be re-created relatively easily, especially since A-Frame is built upon Three.js! :tada:

For some context, all I did to create the ‘Open Transition’ for the Three.js example was create a ‘door’ group (you will more than likely be able to do this with an a-entity), then create two door meshes to add to the group (the equivalent geometry would be a-box). I then offset each door’s position so that their turning circle has more of a hinged effect. For the Three.js example, I used tween.js to give me the nice easing (notice how the door bounces a little) effect, but A-Frame has it’s own animation section on the docs as it makes use of anime.js. These easings look to be implemented by default.

Hopefully that is helpful!

Have a great day,
Francesca :blush:

1 Like
#4

Thanks Francesca for this, it will be worth a try. For now I have implemented the face tracking AR link on a cta button to open it in the same page and for the opening transition animated the 3d card model itself. Thank you for this solution.

1 Like