Javascript ThreeJS WebGLRenderTarget具有空白纹理

使用A-Frame和Three.JS，我希望渲染到WebGLRenderTarget并基于其纹理创建材质，如下所示：

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 myRenderer = new THREE.WebGLRenderer();
myRenderer.setSize(200, 200);
myRenderer.render(scene, myCamera);

var renderTarget = new THREE.WebGLRenderTarget(200, 200, {minFilter: THREE.LinearFilter,
                                                           magFilter: THREE.NearestFilter});
myRenderer.setRenderTarget(renderTarget);
myRenderer.render(scene, myCamera);

targetPlane.material = new THREE.MeshBasicMaterial({map: renderTarget.texture});
renderer.render(scene, camera);

结果只是一个空白的白色材料。摄像头设置正确。以下代码起作用：

 myRenderer.setRenderTarget(null);
 myRenderer.render(scene, myCamera);
 img.src = myRenderer.domElement.toDataURL();   

---

我做了一个演示。

您不能将

WebGLRenderer

生成的渲染目标与

WebGLRenderer

的不同实例一起使用，因为WebGL资源（如缓冲区、纹理或着色器程序）不能在WebGL上下文中共享

因此，必须使用

渲染器

生成渲染目标并渲染最终场景

更新小提琴：

three.js R112