Three.js

Question

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

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

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

然后我在 material 上分配了这个纹理：

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

这就是我将其渲染到纹理的方式：

renderer.render(frameScene,frameCamera,frameTexture);

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

Answer 1

将图像渲染到 canvas 然后调用 toDataURL

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

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

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

等等...

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