javascript - ThreeJS WebGLRenderTarget 有空白纹理

Question

使用 A-Frame 和 Three.JS，我想渲染到 WebGLRenderTarget 并根据其纹理创建 Material ，如下所示:

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);

结果只是一个空白的白色 Material 。相机设置正确。以下代码有效:

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

我做了一个 fiddle展示。

Answer 1

您不能使用由 WebGLRenderer 生成的渲染目标。与 WebGLRenderer 的不同实例因为像缓冲区、纹理或着色器程序这样的 WebGL 资源不能在 WebGL 上下文之间共享。

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

更新 fiddle :https://jsfiddle.net/x4snr9tq/
three.js R112 .