Myujth

I'm attempting to take an equirectangular screenshot of a scene that has a sphere in the background with 360 video and some text/elements in the scene.

I'm exporting the screenshot to use in a video, and I want the background transparent so it can get mixed with the video later, so I'm trying to change the background to green while I'm doing the screenshot and then putting it back to video.

const scene = document.querySelector('a-scene')
const panoSphere = document.querySelector('.panoSphere')

panoSphere.setAttribute('material', 'color', '#00ff00')

const equidataData = scene.components.screenshot.getCanvas('equirectangular')

With this code, the background works and I get a green screenshot, however no other elements are shown.

If I remove the

panoSphere.removeAttribute('material-color-correction')
panoSphere.setAttribute('material', 'color', '#00ff00')

Then the hotspot entities are showing in the screenshot, however with the video background which is the part I'm trying to remove.

I've tried setting timeouts etc to see if it's a timing issue, with no luck.

I also tried adding a new sphere, or changing the sphere material in a component and no luck.

It just seems that if I've done an update to the sphere, whatever happens the screenshot component only shows that sphere

i.e. if I change the colour of the sphere

if I don't change the color, the text on the right shows but so does the video

I ended up removing the sphere and setting the background color of the scene to the green I want. This fixed it.