javascript - Three.JS:直接在 Canvas 上绘制纹理而不创建平面(以广告牌方式)

我正在使用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未定义。有什么想法为什么我无法获取该图像数据？

最佳答案

您只需要一个渲染器。

您可以使用如下模式来渲染叠加插图：

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