当前位置：首页 > news >正文

基于 Three.js 的 3D 模型快照生成方案

news 来源：原创 2025/6/10 12:27:46

基于 Three.js 的 3D 模型快照生成方案

此方案通过 Three.js 渲染场景并异步生成图像数据，同时支持分辨率缩放和 Blob 格式输出，为模型预览、截图保存等需求提供完整解决方案。

问题分析：
使用html2canvas 生成的快照画布显示为空，通常是因为 html2canvas 在渲染时无法正确捕获 Three.js 生成的 WebGL 内容。因为 html2canvas 主要设计用于捕获普通 DOM 元素，而 Three.js 使用 WebGL 上下文渲染 3D 内容，这部分内容不会被直接包含在 DOM 中。

推荐的方案：
使用 Three.js 自身的渲染功能导出图像
直接使用 Three.js 的渲染器来捕获图像，而不是依赖外部库，这种方法直接从WebGL上下文获取像素数据，能够可靠地获取3D模型的渲染结果。

下面介绍具体实现方法：（默认已经使用threejs搭建完成一个三维场景）
步骤1：场景渲染与尺寸获取

renderer.render(scene, camera); // 渲染当前场景
const { width, height } = renderer.getSize(new THREE.Vector2()); // 获取渲染窗口原始尺寸

步骤2：临时画布创建与缩放处理

const canvasWidth = Math.floor(width * resolutionScale);
const canvasHeight = Math.floor(height * resolutionScale);
const tempCanvas = document.createElement("canvas");
tempCanvas.width = canvasWidth;
tempCanvas.height = canvasHeight;

根据resolutionScale计算目标画布尺寸，使用Math.floor避免浮点尺寸导致的渲染模糊。
创建 HTMLCanvasElement 作为临时画布，用于后续图像绘制和数据导出

步骤3： WebGL 内容转绘至 2D 画布

const webglCanvas = renderer.domElement; // 获取WebGL渲染的画布元素
const destCtx = tempCanvas.getContext("2d");
if (destCtx) {destCtx.drawImage(webglCanvas, 0, 0, canvasWidth, canvasHeight); // 绘制WebGL内容到临时画布
}

通过renderer.domElement获取 Three.js 内部使用的 WebGL 画布（通常为元素）
使用 2D 画布上下文的drawImage方法，将 WebGL 画布内容绘制到临时画布中，并按目标尺寸缩放

步骤4：异步导出 Blob 数据

tempCanvas.toBlob((blob) => {if (blob) {resolve(blob); // 成功时返回Blob对象} else {reject(new Error("生成Blob失败")); // 失败时抛出错误}},"image/png", // 输出格式为png（可改为image/jpeg等）1 // 质量系数（1为最高，仅适用于支持的格式）
);

使用画布的toBlob方法异步生成图像数据，该方法支持指定格式（如 WebP、PNG）和质量参数
通过 Promise 机制处理异步操作结果，成功时解析 Blob，失败时通过reject传递错误信息

调用示例

scene.generateSnapshot(1).then((blob) => {if (blob) {//根据需求处理blob对象，以下是本地下载此图片示例const url = URL.createObjectURL(blob)const a = document.createElement("a")a.href = urla.download = "snapshot.png"a.click()URL.revokeObjectURL(url) // 释放内存}
})

完整代码：

function generateSnapshot(resolutionScale: number = 1): Promise<Blob | null> {return new Promise((resolve, reject) => {// 渲染当前场景renderer.render(scene, camera);try {const { width, height } = renderer.getSize(new THREE.Vector2());const canvasWidth = Math.floor(width * resolutionScale);const canvasHeight = Math.floor(height * resolutionScale);let tempCanvas: HTMLCanvasElement = document.createElement("canvas");tempCanvas.width = canvasWidth;tempCanvas.height = canvasHeight;const tempContext = tempCanvas.getContext("2d");if (!tempContext) {throw new Error("无法获取canvas上下文");}// 将WebGL内容绘制到临时canvas中const webglCanvas = renderer.domElement;if (tempCanvas instanceof HTMLCanvasElement) {const destCtx = tempCanvas.getContext("2d");if (destCtx) {destCtx.drawImage(webglCanvas, 0, 0, canvasWidth, canvasHeight);}}// 使用 toBlob 异步导出图片if (tempCanvas instanceof HTMLCanvasElement) {tempCanvas.toBlob((blob) => {if (blob) {resolve(blob); // 返回Blob对象} else {reject(new Error("生成Blob失败"));}},"image/png",1);} else {reject(new Error("不支持的canvas类型"));}} catch (error) {console.error("生成快照失败:", error);reject(error);}});}