实现思路:
创建全景相机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";
}
}