如何获得整个 3D Three.js 场景的 2D 快照 [如全景]？答案

【问题标题】：How To get 2D Snapshot [like panoramic] of whole 3D Three.js Scene?如何获得整个 3D Three.js 场景的 2D 快照 [如全景]？
【发布时间】：2016-12-18 04:32:03
【问题描述】：

如何获取 Three.js 3D 场景的 2d 快照？我需要像全景图像一样获取我的 3D 场景的 2D 快照。（全 360 度快照）

使用的演示：- http://patcat.com/demos/VRWeatherParticles/

我尝试了这个解决方案：- 1.How do you save an image from a Three.js canvas? 2. Three.js: How can I make a 2D SnapShot of a Scene as a JPG Image?

当我这样做时（链接 2 中提到的内容）：-

renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true
});

var strMime = "image/jpeg";
imgData = renderer.domElement.toDataURL(strMime);
imgData1 = renderer.domElement.toDataURL();

我正在获取字符串 base64，但我无法正确解码（使用在线工具 [http://codebeautify.org/base64-to-image-converter]）。只有黑色图像出现。

请告诉我如何获取：- 我的 3D 场景的 2D 快照，如全景图像。

注意：- Similar Question 应该可以工作，但它不适合我。

【问题讨论】：

这可能会有所帮助stackoverflow.com/a/26790802/128511 如果您想将其转换为 PNG，您需要在 binary = someBase64ToBinaryFunction(dataUrl.split(",")[1]) 中以逗号分隔；
谢谢你。这会有所帮助。我的问题的另一部分是：- 在 2D 图像中捕捉 360 度场景。你能帮我吗？
@kautuksahni：您能创建一个 jsfiddle 或 codepen 示例吗？
我猜这就是你想要的。 github.com/spite/THREE.CubemapToEquirectangular
@gman 谢谢，这就是我想要的。非常感谢您的帮助。

标签： three.js webgl

【解决方案1】：

Gman 向我建议了解决方案。为了他们的利益，我正在与社区一起剪掉它。

"CubemapToEquirectangular" 库有助于获取 3D 场景的全景图像。

链接：- https://github.com/spite/THREE.CubemapToEquirectangular

演示解决方案：- https://www.clicktorelease.com/tools/CubemapToEquirectangular/index-managed.html

感谢和问候

考图克·萨尼

【讨论】：