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";}}