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

Question

我正在使用 WebGLRenderTarget 渲染自定义纹理。我现在需要的是能够将生成的 renderTarget.texture 直接绘制到 Canvas 上，而无需先将其添加到平面上。

这样做的原因是我的相机在旋转和移动很多，我希望纹理固定在右上角，就像广告牌一样，不会落在后面。

我的伪代码如下所示:

// 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 Canvas 。有什么方法可以获取 renderTarget.texture 并将其绘制在第一个 Canvas 上，这样我就可以跳过使用第二个渲染器了吗？我需要 renderTarget 输出来创建高度图，但还需要它在右上角以广告牌的形式可见。

更新:我已经尝试创建 2D Canvas 上下文并使用 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