threejs 显示 THREE.WebGLRenderTarget 纹理图片

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、设置WebGLRenderTarget

            this.groundTarget = new THREE.WebGLRenderTarget(1024, 1024, {

                minFilter: THREE.LinearFilter,

                magFilter: THREE.LinearFilter

            });

            this.groundTarget.depthBuffer = true;

            this.groundTarget.stencilBuffer = true;

二、设置HTML

    <div class="main">

      <div class="model" id="domId"></div>

    </div>

    <canvas id="preview" width="800" height="600"></canvas>

三、读取图片

代码如下：

            const preview = document.getElementById('preview');

            const ctx = preview.getContext('2d');

            const buffer = new Uint8Array(800 * 600 * 4);

            const clamped = new Uint8ClampedArray(buffer.buffer);

            renderer.readRenderTargetPixels(groundTarget, 0, 0, 800, 600, buffer); // 读取像素到 buffer

            const imageData = new ImageData(clamped, 800, 600); // 创建可供 canvas 使用的图像数据类型

            ctx.putImageData(imageData, 0, 0);

四、下载图片

                var link = document.createElement('a');

                // 通过超链接herf属性，设置要保存到文件中的数据

                // var canvas = renderer.domElement;//获取canvas对象

                link.href = preview.toDataURL("image/png");

                link.download = 'threejs.png'; //下载文件名

                link.click();

---

结果