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

等...