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); 
... 

等...