ThreeJS WebGLRenderTarget 有空白纹理

Posted 2023-02-27

【中文标题】ThreeJS WebGLRenderTarget 有空白纹理

【英文标题】：ThreeJS WebGLRenderTarget has blank texture

【发布时间】：2020-05-11 08:26:45

【问题描述】：

使用 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 来演示一下。

【参考方案1】：

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

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

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

three.js R112.