1

I'm making AR web app using AR.js and React. It renders the 3D model using <a-gltf-model> component by A-Frame because AR.js is related with A-Frame.

I'd like to make a function to save favorite 3D models(gltf models) as screenshots.

how to get screenshot of gltf model in javascript?

Gufran Hasan
  • 8,910
  • 7
  • 38
  • 51
Junghyuk Yoo
  • 13
  • 5

1 Answers1

1

You can save the current state of A-Frame's <canvas> element to an image. See How To Save Canvas As An Image With canvas.toDataURL()?, or (in the easiest case) as below:

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
Don McCurdy
  • 10,975
  • 2
  • 37
  • 75
  • i have solved by the method `document.querySelector('a-scene').components.screenshot.getCanvas('equirectangular')` but your answer is really helpful for me to know how to save canvas as an image! thanks a lot :) – Junghyuk Yoo May 10 '18 at 06:58