Access camera texture in Universal AR / A-Frame

Universal AR A-Frame
#1

Hello there!

I’m struggling to get my hands on the live camera texture in A-Frame, so that I can use it as a texture in my scene (end goal is dynamic environmental reflections by building a dynamic cubemap).

I created a new component called cubeMapRealtime attached to a simple primitive in my scene, and my experimentations so far are in this kind of mood:

const cubeMapRealTime = {
schema: { },
init() {

    var camTexture = new THREE.Texture();
    const refMat = new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        color: 0xffffff,
        map: camTexture,
    })

    const staticTexture = new THREE.TextureLoader().load('https://www.matthughes.info/blog/content/images/2019/02/helping-hands-lkg.jpg');

    var camEl = document.querySelector('#myCamera'); // this id is attached to my camera entity in the A-Frame scene
    console.log("Camera entity:", camEl);
    
    camTexture = camEl.getObject3D('camera').backgroundTexture; // this is where I miss something

    var mesh = this.el.getObject3D('mesh');
    mesh.material.map = camTexture;

    },
  }

export {cubeMapRealTime}

(the above code is stripped down to the sole part for fetching the camera texture) :slight_smile:

I can see from the camera.js definition under zappar-threejs-for-aframe that there is a “backgroundTexture” meant for this use but it seems I’m wrong on how to access it; probably not making my way correctly from the different encapsulations through the different Three > AFrame > Zappar cameras.

Can someone point me in the right direction?
Thanks!

Thomas

1 Like
Acces camera texture in Universal AR / BabylonJS
#2

Hi @thomas2,

You’re able to get the camera from the scene’s systems like so:

const system = document.querySelector("a-scene").systems[
  "zappar-camera"
];
const camera = system.camera;
const texture = camera.backgroundTexture;

Here’s a basic example where I draw the camera texture onto a cube:

Hopefully this will get you started :slight_smile:

1 Like
#3

Hey Deim,

Thanks a lot for your reply!
That was simple indeed.

Definitely add this snippet to the tutorials or the templates :nerd_face:
I guess that would be useful also to have the equivalent for the different SDK if the query differs.

Will get back to my cubemap experimentation soon then!

Best,
Thomas

1 Like