Rendering to texture within a-frame

Question

I'm trying to implement something very similar to this...

https://stemkoski.github.io/Three.js/Camera-Texture.html

... as an a-frame component. However, I'm getting merely a blank white on the quad which is supposed to be "monitoring" this extra camera. It changes to black when entering VR mode.

Here is my code:

AFRAME.registerComponent('viewfinder', {
schema:{
    //
},
init:function(){
    this.renderer = new THREE.WebGLRenderer({antialias:true});
    this.renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild(this.renderer.domElement);

    this.dronecamera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    this.dronecamera.position.z=5;
    this.monitorbuffercam = new THREE.OrthographicCamera(window.innerWidth/-2, window.innerWidth/2, window.innerHeight/2, window.innerHeight/-2, -10000, 10000);
    this.monitorbuffercam.position.z=1;

    this.buffertexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { format: THREE.RGBFormat });
    this.monitortexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { format: THREE.RGBFormat });

    this.bufferscene = new THREE.Scene();
    var ambientlight = new THREE.AmbientLight(0xffffff);
    this.bufferscene.add(ambientlight);
    var bufferplaneG = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight);
    var bufferplaneM = new THREE.MeshBasicMaterial({map:this.buffertexture});
    this.bufferplane = new THREE.Mesh(bufferplaneG, bufferplaneM);
    this.bufferscene.add(this.bufferplane);
    this.bufferscene.add(this.monitorbuffercam);
    this.el.sceneEl.object3D.add(this.dronecamera);

    this.monitorplaneG = new THREE.PlaneGeometry(10, 10);
    this.monitorplaneM = new THREE.MeshBasicMaterial({map:this.monitortexture});
    this.monitor = new THREE.Mesh(this.monitorplaneG, this.monitorplaneM);
    this.el.setObject3D('monitor', this.monitor);
},

tick:function(){

    var r = this.renderer;
    var s = this.el.sceneEl.object3D;
    var bs = this.bufferscene;
    var dc = this.dronecamera;
    var bt = this.buffertexturee;
    var mbc = this.monitorbuffercam;
    var mt = this.monitortexture;
    requestAnimationFrame(draw);
    function draw(){
        r.render(s, dc, bt, true);
        r.render(bs, mbc, mt, true);

    }
}

});

Any help is greatly appreciated. I'm attempting to follow the model from the three.js example, rendering from a camera in the main scene to a quad texture map in a separate off-screen scene, then pointing an orthographic camera at it, and rendering that camera's view to a texture map back in the main scene. I have a hunch that there is merely some boilerplate code I'm forgetting or I'm doing wrong.

Thanks in advance!

You don't need to call `requestAnimationFrame`. The tick method is invoked once per frame. You can just call `render` — Diego Marcos, Jun 26 '18 at 02:03

score 0 · Answer 1 · answered Dec 27 '18 at 19:38

I'm not sure if this what you're looking for, but maybe this answer to AFrame: How to render a camera to a texture could be of some help. In short, it shows how to use a component that creates a renderer for a secondary camera, that can be referenced as material for an object.

Rendering to texture within a-frame

1 Answers1