JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<a-scene foo></a-scene>

CSS

body img {
  display: block;
  position: relative;
}

JavaScript

// top left red plane -> img src from DataURL, projection of red plane on the right -> CORRECT
// white plane -> texture from renderTarget, should also be red -> INCORRECT
AFRAME.registerComponent('foo', {
  init: function(){
    var scene = this.el.object3D;
    var renderer = this.el.renderer;
    var camera = this.el.camera;

    scene.background = new THREE.Color('gray');

    var targetPlane = new THREE.Mesh(
      new THREE.PlaneBufferGeometry(2, 2),
      new THREE.MeshBasicMaterial({color: 'blue'})
    );
    targetPlane.position.set(-2, 1, -2);
    scene.add(targetPlane);

    var redPlane = new THREE.Mesh(
      new THREE.PlaneBufferGeometry(2, 2),
      new THREE.MeshBasicMaterial({color: 'red'})
    );
    redPlane.position.set(2, 1, -2);
    scene.add(redPlane);

    var myCamera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
    myCamera.position.set(2, 1, 0);
    scene.add(myCamera);

    var renderTarget = new THREE.WebGLRenderTarget(
      200, 200, {minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});
      
      
    renderer.setRenderTarget(renderTarget);
    renderer.render(scene, myCamera);
    
    targetPlane.material = new THREE.MeshBasicMaterial({
    	map: renderTarget.texture});
      
		renderer.setRenderTarget(null);
    renderer.render(scene, camera);
  }});