ThreeJS WebGLRenderTarget具有空白纹理

Question

使用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();   

我做了fiddle进行演示。

Answer 1

您不能将WebGLRenderer生成的渲染目标与WebGLRenderer的其他实例一起使用，因为不能在WebGL上下文之间共享WebGL资源，例如缓冲区或纹理。

因此，您必须使用renderer来生成渲染目标并渲染最终场景。

更新的小提琴：https://jsfiddle.net/x4snr9tq/

three.js R112。