Three.js - 攻克截图下载痛点，轻松搞定画面保存！

2023-09-23 19:53:56

Three.js，一个强大的 JavaScript 库，赋予我们操控 3D 图形的无限可能。然而，在使用 Three.js 的过程中，常常会遇到截图保存的难题。别担心，本文将为您一一揭晓解决之道，助您轻松搞定画面保存！

HTML 截图的困境

传统 HTML 截图方法通常依靠截图工具或浏览器内置功能，但对于 Three.js 的动态场景，这些方法往往无能为力。究其原因，Three.js 的场景渲染是一个动态的过程，涉及大量的实时计算和 GPU 操作，常规截图方法难以捕捉到完整的画面。

Canvas 大显神通

为了解决 HTML 截图的困境，Three.js 提供了 Canvas 渲染器，它允许您将 Three.js 场景渲染到 Canvas 元素中。借助 Canvas 的强大功能，我们可以通过简单的 JavaScript 代码将 Canvas 转换为图像，从而实现 Three.js 场景的截图。

代码示例：

const canvas = document.getElementById('threejs-canvas');
const renderer = new THREE.WebGLRenderer({ canvas });

// 渲染场景
renderer.render(scene, camera);

// 将 Canvas 转换为图像
const dataURL = canvas.toDataURL('image/png');

下载图像

有了图像数据之后，我们就可以将其下载到本地了。这里可以使用 HTML5 的 Blob 和 URL 对象来实现。

// 将图像数据转换为 Blob 对象
const blob = new Blob([dataURL], { type: 'image/png' });

// 创建一个指向 Blob 对象的 URL
const url = URL.createObjectURL(blob);

// 创建一个用于下载的链接元素
const link = document.createElement('a');
link.href = url;
link.download = 'threejs-image.png';

// 将链接元素添加到文档中并触发下载
document.body.appendChild(link);
link.click();

// 移除链接元素
document.body.removeChild(link);