Three.JS：直接在画布上绘制纹理而不创建平面（以广告牌方式）

Question

我使用WebGLRenderTarget渲染自定义纹理。我现在需要的是能够将结果renderTarget.texture直接绘制到画布上，而不是先将它添加到平面上。

原因是我的相机在轨道上移动很多，我想要将纹理固定在右上角，就像广告牌一样，不会落在后面。

我的伪代码如下所示：

// Create renderer 1
var renderer1 = new THREE.WebGLRenderer();
renderer1.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer1.domElement);

// Create renderer 2
var renderer2 = new THREE.WebGLRenderer();
renderer2.setSize(100, 100);
document.body.appendChild(renderer2.domElement);

var renderTarget = new THREE.WebGLRenderTarget(100, 100);

// Create texture to renderTarget
renderer1.render(textureScene, ortoCam, renderTarget, false);

// Render textureScene to second renderer to see texture
renderer2.render(textureScene, ortoCam);

// Render the rest of the scene, with a moving perspective camera
renderer1.render(scene, perspCam);

这很有效，但感觉非常低效，特别是因为我正在创建第二个渲染器以添加第二个100x100画布。有没有办法抓住renderTarget.texture并在第一个画布上绘制它，以便我可以跳过使用第二个渲染器？我需要renderTarget输出来创建高度贴图，但也需要它在右上角以广告牌方式显示。

更新 我尝试创建2D画布上下文并使用context.drawImage(this.renderTarget.texture.image, 10, 10, 20, 20);，但renderTarget.texture.image未定义。有什么想法我无法获得图像数据吗？

Answer 1

您只需要一个渲染器。

您可以使用如下图案渲染叠加层：

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false; // important!
document.body.appendChild( renderer.domElement );

在render()函数中，

renderer.clear();

// render to texture
renderer.render( texture_scene, ortho_camera, renderTarget, true );

// render scene first
renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
renderer.render( scene, camera );

// render inset second
renderer.clearDepth(); // clear the depth buffer
renderer.setViewport( 10, window.innerHeight - insetHeight - 10, insetWidth, insetHeight );
renderer.render( inset_scene, ortho_camera );

three.js r.84

Answer 2

我制作了一个npm模块，它应该使用着色器和高级接口（宽度，高度，顶部，左侧）渲染屏幕四边形。

现在，片段着色器不会读取纹理，但在自述文件中有一个简单的片段着色器，您可以使用它。

https://www.npmjs.com/package/three-screen-quad