How to do 360 snapshot/screenshot an object/geometry ??

[dellwatson]

Hello, since i wanted to do it programmatically, i cant just screenshot the windows,
instead i might need to screenshot the 3D model, perhaps the scene in box mode ?

this is for products image later send as a pdf to customer, but imnot sure how to snapshot the scene

[dangrabcad]

Could you describe further what you're trying to achieve? It's really not obvious from your question.

[dellwatson]

i have canvas that rendering a (jersey) .glb, and customer could customize it,
then i need a button to get images (canvas snapshot) from 4 angles so I could have customized jersey on images from 4 angles, then I could use that images for customer-pdf.

   <Canvas
        onCreated={({ gl, events }) => {
          console.log(gl.domElement.toDataURL())
          setImg(gl.domElement.toDataURL())
        }}

i could get the canvas.dataURL, but it's a blank white, not sure how to do it properly especially with a rendered-perspectives,
im still looking for the answer

[drcmda]

i think the canvas needs a special prop for that to work. i believe it was <Canvas gl={{ preserveDrawingBuffer: true }}> the canvas in oncreated is probably zero anyway, oncreated is meant to flag that the canvas is ready to run.

[dangrabcad]

Obviously if you read the canvas in onCreated it will be blank - that gets called before anything is drawn. The best place to take the screenshot is with the useFrame hook. See hooks.md in the repo for more info. If you give the useFrame callback a positive priority, it'll take over rendering completely, so you can render the same scene with as many cameras as you like to get all the angles you need.