Three.js - 将纹理导出为图像

Question

我渲染场景的某些部分，并将其用作对象上的纹理。但现在我想将这个纹理导出为图像。有什么想法吗？

这就是我创建纹理对象的方法：

frameTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});

我在材质上指定了这个纹理：

var material = new THREE.MeshBasicMaterial( {map:frameTexture.texture} );

这就是我将它呈现给纹理的方式：

renderer.render(frameScene,frameCamera,frameTexture);

现在的问题是如何将frameTexture保存为图像。

Answer 1

将图像渲染到画布，然后调用toDataURL

renderer.render(sceneThatHasASingleQuadPlaneUsingFrameTexture, camera);
var dataURL = renderer.domElement.toDataURL();

您现在可以使用该dataURL执行操作，例如打开窗口

window.open(dataURL, "image");

或者用它制作图像

var img = new Image();
img.src = dataURL;
document.body.appendChild(img);

通过XHR将其发送到某个服务器

const xhr = new XMLHttpReqeust();
xhr.open('PUT', 'https://myserverthatsavesimages.com', true);
xhr.send(dataURL);
...

等等...