THRE.js CSS2Renderer-如何将普通和CSS2D图像保存为单个.jpg文件

Question

使用下面列出的代码。。。

(1( 我已经能够将普通渲染的THREE.js场景保存为.jpg文件；

(2( 我还能够使用CCD_；渲染"；CSS2D标签在画布的顶部(而不是"在"画布上(；

(3( 接下来，我想将CSS2DRenderer渲染的叠加图像保存为第二个.jpg文件；

但我得到了错误：-TypeError: labelRenderer.domElement.toDataURL is not a function。

我在想，也许从CSS2D出口是不可能的？

(4( 理想情况下，我想将组合的(普通和CSS2D叠加(屏幕图像保存为单个.jpg文件。

代码：-

// GLOBALS
// INITIATION
var MyContainer = document.getElementById( "for_3JS" );
MyContainer.innerHTML = "";
renderer = new THREE.WebGLRenderer( {antialias:true , preserveDrawingBuffer: true} );   
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( wwww, hhhh );
MyContainer.appendChild( renderer.domElement ); 
var labelRenderer = new CSS2DRenderer();
labelRenderer.setSize( wwww, hhhh );     
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;

MyContainer.appendChild( labelRenderer.domElement ); 
// ANIMATION & RENDERING
renderer.render     ( scene, camera );
labelRenderer.render( scene, camera );
// ONCLICK

var strMime = "image/jpg";

//... THIS WORKS OK (but NO LABELS):- 
var imgDataA = renderer.domElement.toDataURL( strMime );            

//... THIS FAILS  with:- TypeError: labelRenderer.domElement.toDataURL is not a function.           
var imgDataB = labelRenderer.domElement.toDataURL( strMime );   

//... save as file (imgDataA only at present).
var fileURL = imgDataA;//imgDataB
//...from http://muaz-khan.blogspot.co.uk/2012/10/save-files-on-disk-using-javascript-or.html
var Fsave = document.createElement('a'); //... creates an html <a> anchor object.                       

document.body.appendChild( Fsave ); //... for Firefox, not needed in Opera (?)
Fsave.style     = "display: none";
Fsave.href      = fileURL;
Fsave.target    = '_blank';
Fsave.download  = filename || 'unknown';
Fsave.click();
document.body.removeChild( Fsave );

Answer 1

(2(我还能够使用CSS2Renderer将CSS2D标签渲染到画布上；

恐怕这个公式是不正确的，因为您没有渲染"；在画布上"；当使用CCD_ 8或CCD_。实际上，您将HTML元素放在画布的顶部，并为它们分配相应的2D或3D转换。

因此，不可能使用toDataURL()将WebGLRenderer和CSS2DRenderer的输出保存到图像中。

我在调试器中检查了.domElement，但即使对于renderer.domElement.，也看不到toDataURL

使用WebGLRenderer时该方法肯定存在，请参阅https://jsfiddle.net/dxmrvzw6/.