Threejs将场景生成全景图导出_git

实现思路：
创建全景相机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";
                }
            }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.