如何在javascript中获取gltf模型的屏幕截图？

Question

我正在使用 AR.js 和 React 制作 AR 网络应用。 它使用 A-Frame 的 <a-gltf-model> 组件渲染 3D 模型，因为 AR.js 与 A-Frame 相关。

我想做一个功能，将最喜欢的 3D models(gltf models) 保存为屏幕截图。

如何在javascript中获取gltf模型的截图？

Answer 1

您可以将 A-Frame 的 <canvas> 元素的当前状态保存到图像中。请参阅How To Save Canvas As An Image With canvas.toDataURL()?，或（在最简单的情况下）如下：

var canvas = sceneEl.canvas;

// here is the most important part because if you dont replace you will get a DOM 18 exception.
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  

window.location.href=image; // it will save locally