在 Three.js 中，我们可以实现各种复杂的 3D 形状和动态特效。但是当我们需要将这些形状和特效导出为图片时，该怎么做呢？
本文将介绍如何在 Three.js 中保存 Canvas 画布中的图片。我们将探讨两种方法：使用 canvas.toDataURL() 和利用 Three.js 提供的 THREE.WebGLRenderer。
方法一：使用 canvas.toDataURL()
One of the simplest ways to save an image from a Three.js canvas is to use the toDataURL() method of the HTML5 canvas element. This method returns a data URL that represents the contents of the canvas as a PNG image.
以下是一个简单的示例代码，演示如何将 Three.js 场景保存为 PNG 图片：
-- -------------------- ---- ------- -- -- -------- -- ----- ----- - --- -------------- ----- ------ - --- --------------------------- ----------------- - ------------------- ---- ------ ----- -------- - --- ---------------------- ----------------------------------- -------------------- ----------------------------------------------- -- ------- ----- -------- - --- -------------------- ----- -------- - --- ------------------------- ------ -------- --- ----- ---- - --- -------------------- ---------- ---------------- ----------------- - -- -- ---- ---------------------- -------- -- --- --- ------- ----- ---- - ---------------------------- ------------- - --------------------- --------- - -------------------------------- -------------
在这个示例代码中，我们首先创建了一个 Three.js 场景，并将其渲染到 canvas 中。然后，我们使用 toDataURL() 方法将 canvas 画布中的内容导出为 PNG 图片，并将其保存到本地文件。
方法二：利用 THREE.WebGLRenderer
如果您需要更高质量的图片，或者希望将 Three.js 场景中的相机角度、光照等参数保存到图片中，那么可以使用 Three.js 提供的 THREE.WebGLRenderer。
以下是一个示例代码，演示如何使用 WebGLRenderer 将 Three.js 场景保存为 PNG 图片：
-- -------------------- ---- ------- -- -- -------- -- ----- ----- - --- -------------- ----- ------ - --- --------------------------- ----------------- - ------------------- ---- ------ ----- -------- - --- ---------------------- ----------------------------------- -------------------- ----------------------------------------------- -- ------- ----- -------- - --- -------------------- ----- -------- - --- ------------------------- ------ -------- --- ----- ---- - --- -------------------- ---------- ---------------- ----------------- - -- -- ---- ---------------------- -------- -- ---------- ----- --------- - ------------------------------------------- ----- ---- - ---------------------------- ------------- - --------------------- --------- - -------------------------------------- --------------------------------- -------------
在这个示例代码中，我们首先创建了一个 Three.js 场景，并将其渲染到 canvas 中。然后，我们使用 toDataURL() 方法获取场景的图片数据，并将其保存到本地文件。
需要注意的是，在使用 THREE.WebGLRenderer 时，我们需要将图片数据的 MIME 类型从 image/png 改为 application/octet-stream，以便浏览器可以将其当作二进制文件下载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27288