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

Question

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

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

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

Answer 1

<canvas>您可以将 A-Frame元素的当前状态保存到图像中。请参阅如何使用 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