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

Question

我正在使用AR.js和React制作AR网络应用程序。 它使用{-1}组件通过A-Frame渲染3D模型，因为AR.js与A-Frame相关。

我想创建一个功能，将喜爱的3D <a-gltf-model>保存为屏幕截图。

如何在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