Aframe screenshot is not showing elements
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
![no color change]](https://i.stack.imgur.com/RxQJ1.png)
three.js aframe
asked Nov 13 '18 at 1:51
beekbeek
9441031
add a comment |
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
three.js aframe
asked Nov 13 '18 at 1:51
beekbeek
9441031
add a comment |
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
three.js aframe
asked Nov 13 '18 at 1:51
beekbeek
9441031
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
three.js aframe
three.js aframe
asked Nov 13 '18 at 1:51
beekbeek
9441031
asked Nov 13 '18 at 1:51
beekbeek
9441031
edited Nov 13 '18 at 2:38
beek
asked Nov 13 '18 at 1:51
beekbeek
9441031
asked Nov 13 '18 at 1:51
beekbeek
9441031
asked Nov 13 '18 at 1:51
beekbeek
9441031
9441031
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I ended up removing the sphere and setting the background color of the scene to the green I want. This fixed it.
answered Nov 13 '18 at 2:53
beekbeek
9441031
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53272636%2faframe-screenshot-is-not-showing-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I ended up removing the sphere and setting the background color of the scene to the green I want. This fixed it.
answered Nov 13 '18 at 2:53
beekbeek
9441031
add a comment |
I ended up removing the sphere and setting the background color of the scene to the green I want. This fixed it.
answered Nov 13 '18 at 2:53
beekbeek
9441031
add a comment |
I ended up removing the sphere and setting the background color of the scene to the green I want. This fixed it.
answered Nov 13 '18 at 2:53
beekbeek
9441031
I ended up removing the sphere and setting the background color of the scene to the green I want. This fixed it.
answered Nov 13 '18 at 2:53
beekbeek
9441031
answered Nov 13 '18 at 2:53
beekbeek
9441031
answered Nov 13 '18 at 2:53
beekbeek
9441031
answered Nov 13 '18 at 2:53
beekbeek
9441031
9441031
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53272636%2faframe-screenshot-is-not-showing-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
