three.js - 纹理到 THREE.js 中的数据 URI

Question

大多数人都有相反的问题，但我想问有没有什么简单的方法可以将纹理数据返回到数据 URI。

我正在使用渲染到纹理(RTT)来渲染背景中的场景(使用不同的相机)。我希望能够将此数据发送到服务器或仅显示在 img 元素中以进行测试。

Answer 1

由于您专门询问了渲染到纹理的情况，因此在另一个答案中有一个函数:https://stackoverflow.com/a/18804083/3640489

假设你有一个 THREE.WebGLRenderTarget像这样定义:

var renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { 
    minFilter: THREE.NearestFilter, 
    magFilter: THREE.NearestFilter, 
    format: THREE.RGBAFormat 
});

然后你会得到 WebGLRenderingContext从渲染器并调用函数:

var gl = renderer.getContext();
var webglTexture = renderTarget.__webglTexture;
var img = createImageFromTexture(gl, webglTexture, width, height);