Flip camera and opening transitions


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


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:


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.