Threejs将场景生成全景图导出

实现思路：
创建全景相机CubeCamera（六个方位的透视相机）并渲染场景
读取六个面的纹理数据
填充进canvas中
即可按照常规的canvas导出图片了

demo https://gitee.com/honbingitee/three-template-next.js/tree/HDR

核心代码

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(1024 * 2, {
                colorSpace: THREE.SRGBColorSpace,
            });

            const cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);

            cubeCamera.position.y = -3;

            cubeCamera.update(this.helper.renderer, this.helper.scene);

            for (let index = 0; index < 6; index++) {
                var pixels = new Uint8ClampedArray(2048 * 2048 * 4); //Uint8Array也可以接收 但ImageData 需要 Uint8ClampedArray类型

                this.helper.renderer.readRenderTargetPixels(
                    cubeRenderTarget,
                    0,
                    0,
                    2048,
                    2048,
                    pixels,
                    index
                );

                const canvas = document.createElement("canvas");
                canvas.width = 2048;
                canvas.height = 2048;

                const ctx = canvas.getContext("2d");

                if (ctx) {
                    // 如果不是 Uint8ClampedArray 则转换成 Uint8ClampedArray类型数据
                    // const _data = Uint8ClampedArray.from(data.data);

                    const imageData = new ImageData(pixels, 2048, 2048);

                    ctx.putImageData(imageData, 0, 0);

                    document.body.appendChild(canvas);
                    canvas.style.position = "fixed";
                    canvas.style.zIndex = "999";
                    canvas.style.left = index * 200 + "px";
                    canvas.style.top = 200 + "px";
                    canvas.style.width = "200px";
                    canvas.style.height = "200px";
                }
            }