Styjun

Is it fair for a professor to grade us on the possession of past papers?

What order were files/directories output in dir?

AppleTVs create a chatty alternate WiFi network

What does 丫 mean? 丫是什么意思？

Tannaka duality for semisimple groups

What does Turing mean by this statement?

How often does castling occur in grandmaster games?

Amount of permutations on an NxNxN Rubik's Cube

In musical terms, what properties are varied by the human voice to produce different words / syllables?

How can I prevent/balance waiting and turtling as a response to cooldown mechanics

Do wooden building fires get hotter than 600°C?

Why can't I install Tomboy in Ubuntu Mate 19.04?

Is it possible for SQL statements to execute concurrently within a single session in SQL Server?

Can the Flaming Sphere spell be rammed into multiple Tiny creatures that are in the same 5-foot square?

Converted a Scalar function to a TVF function for parallel execution-Still running in Serial mode

What makes a man succeed?

How were pictures turned from film to a big picture in a picture frame before digital scanning?

What initially awakened the Balrog?

Random body shuffle every night—can we still function?

Is CEO the "profession" with the most psychopaths?

Should a wizard buy fine inks every time he want to copy spells into his spellbook?

How many time has Arya actually used Needle?

Project Euler #1 in C++

Why does it sometimes sound good to play a grace note as a lead in to a note in a melody?

ThreeJS scene with textures, why toDataUrl return black JPG?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I have a scene with 2 textures, that loaded from jpg. I make

 imgData = renderer.domElement.toDataURL(strMime)

and see black image. I found this question and
took from him this lines:

 texture.needsUpdate = true
 texture2.needsUpdate = true

but result jpg file is black square.
I make a codepen with full code for reproduce this case

How save jpg frame image correctly? Thanks!

three.js

share|improve this question

asked Mar 22 at 11:03

tolyantolyan

114114

add a comment | 

1

I have a scene with 2 textures, that loaded from jpg. I make

 imgData = renderer.domElement.toDataURL(strMime)

and see black image. I found this question and
took from him this lines:

 texture.needsUpdate = true
 texture2.needsUpdate = true

but result jpg file is black square.
I make a codepen with full code for reproduce this case

How save jpg frame image correctly? Thanks!

three.js

share|improve this question

asked Mar 22 at 11:03

tolyantolyan

114114

add a comment | 

I have a scene with 2 textures, that loaded from jpg. I make

 imgData = renderer.domElement.toDataURL(strMime)

and see black image. I found this question and
took from him this lines:

 texture.needsUpdate = true
 texture2.needsUpdate = true

but result jpg file is black square.
I make a codepen with full code for reproduce this case

How save jpg frame image correctly? Thanks!

three.js

share|improve this question

asked Mar 22 at 11:03

tolyantolyan

114114

 imgData = renderer.domElement.toDataURL(strMime)

 texture.needsUpdate = true
 texture2.needsUpdate = true

share|improve this question

asked Mar 22 at 11:03

tolyantolyan

114114

share|improve this question

asked Mar 22 at 11:03

tolyantolyan

114114

asked Mar 22 at 11:03

tolyantolyan

114114

asked Mar 22 at 11:03

tolyantolyan

114114

1 Answer
1

active

oldest

votes

1

Save it after call to renderer.render(scene, camera), when the canvas is guaranteed to be initialized with some render output.

For example:

var saveRequested = false;

function render() 
 renderer.render(scene, camera);

 // FIX: scene is rendered, ready to save it
 if (saveRequested) 
 saveAsImage2();
 saveRequested = false;
 


function saveAsImage() 
 // say, need to take a snapshot after next frame is rendered
 saveRequested = true;


function saveAsImage2() 
 var imgData, imgNode;

 try 
 var strMime = "image/jpeg";
 var strDownloadMime = "image/octet-stream";

 let imgData = renderer.domElement.toDataURL(strMime);
 console.log(imgData);

 saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

 catch (e) 
 console.log(e);
 return;
 

share|improve this answer

answered Mar 22 at 12:53

Alex KhoroshylovAlex Khoroshylov

1,2321419

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alex, as you see in codepen, I make saveAs by clicking a link. So, renderer.render(scene, camera) is executed before click
  
  – tolyan
  Mar 22 at 16:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  pls try to apply my changes, I was not able to update your codepen example
  
  – Alex Khoroshylov
  Mar 22 at 19:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alex, sorry, I not carefully read your code at first time. i did as you said, and now all working good. Thanks!
  
  – tolyan
  Mar 23 at 8:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  always welcome, come again with more questions
  
  – Alex Khoroshylov
  Mar 23 at 10:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alex, I have one thought that I would like to discuss with you. Unfortunately stackoverflow does not allow to send private messages. If you are comfortable, please contact me tolyan.com@gmail.com Thanks!
  
  – tolyan
  Mar 25 at 10:54
  

  
  
  
  

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
);



);

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55298242%2fthreejs-scene-with-textures-why-todataurl-return-black-jpg%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Save it after call to renderer.render(scene, camera), when the canvas is guaranteed to be initialized with some render output.

For example:

var saveRequested = false;

function render() 
 renderer.render(scene, camera);

 // FIX: scene is rendered, ready to save it
 if (saveRequested) 
 saveAsImage2();
 saveRequested = false;
 


function saveAsImage() 
 // say, need to take a snapshot after next frame is rendered
 saveRequested = true;


function saveAsImage2() 
 var imgData, imgNode;

 try 
 var strMime = "image/jpeg";
 var strDownloadMime = "image/octet-stream";

 let imgData = renderer.domElement.toDataURL(strMime);
 console.log(imgData);

 saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

 catch (e) 
 console.log(e);
 return;
 

share|improve this answer

answered Mar 22 at 12:53

Alex KhoroshylovAlex Khoroshylov

1,2321419

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alex, as you see in codepen, I make saveAs by clicking a link. So, renderer.render(scene, camera) is executed before click
  
  – tolyan
  Mar 22 at 16:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  pls try to apply my changes, I was not able to update your codepen example
  
  – Alex Khoroshylov
  Mar 22 at 19:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alex, sorry, I not carefully read your code at first time. i did as you said, and now all working good. Thanks!
  
  – tolyan
  Mar 23 at 8:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  always welcome, come again with more questions
  
  – Alex Khoroshylov
  Mar 23 at 10:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alex, I have one thought that I would like to discuss with you. Unfortunately stackoverflow does not allow to send private messages. If you are comfortable, please contact me tolyan.com@gmail.com Thanks!
  
  – tolyan
  Mar 25 at 10:54
  

  
  
  
  

add a comment | 

1

Save it after call to renderer.render(scene, camera), when the canvas is guaranteed to be initialized with some render output.

For example:

var saveRequested = false;

function render() 
 renderer.render(scene, camera);

 // FIX: scene is rendered, ready to save it
 if (saveRequested) 
 saveAsImage2();
 saveRequested = false;
 


function saveAsImage() 
 // say, need to take a snapshot after next frame is rendered
 saveRequested = true;


function saveAsImage2() 
 var imgData, imgNode;

 try 
 var strMime = "image/jpeg";
 var strDownloadMime = "image/octet-stream";

 let imgData = renderer.domElement.toDataURL(strMime);
 console.log(imgData);

 saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

 catch (e) 
 console.log(e);
 return;
 

share|improve this answer

answered Mar 22 at 12:53

Alex KhoroshylovAlex Khoroshylov

1,2321419

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alex, as you see in codepen, I make saveAs by clicking a link. So, renderer.render(scene, camera) is executed before click
  
  – tolyan
  Mar 22 at 16:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  pls try to apply my changes, I was not able to update your codepen example
  
  – Alex Khoroshylov
  Mar 22 at 19:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alex, sorry, I not carefully read your code at first time. i did as you said, and now all working good. Thanks!
  
  – tolyan
  Mar 23 at 8:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  always welcome, come again with more questions
  
  – Alex Khoroshylov
  Mar 23 at 10:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Alex, I have one thought that I would like to discuss with you. Unfortunately stackoverflow does not allow to send private messages. If you are comfortable, please contact me tolyan.com@gmail.com Thanks!
  
  – tolyan
  Mar 25 at 10:54
  

  
  
  
  

add a comment | 

Save it after call to renderer.render(scene, camera), when the canvas is guaranteed to be initialized with some render output.

For example:

var saveRequested = false;

function render() 
 renderer.render(scene, camera);

 // FIX: scene is rendered, ready to save it
 if (saveRequested) 
 saveAsImage2();
 saveRequested = false;
 


function saveAsImage() 
 // say, need to take a snapshot after next frame is rendered
 saveRequested = true;


function saveAsImage2() 
 var imgData, imgNode;

 try 
 var strMime = "image/jpeg";
 var strDownloadMime = "image/octet-stream";

 let imgData = renderer.domElement.toDataURL(strMime);
 console.log(imgData);

 saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

 catch (e) 
 console.log(e);
 return;
 

share|improve this answer

answered Mar 22 at 12:53

Alex KhoroshylovAlex Khoroshylov

1,2321419

var saveRequested = false;

function render() 
 renderer.render(scene, camera);

 // FIX: scene is rendered, ready to save it
 if (saveRequested) 
 saveAsImage2();
 saveRequested = false;
 


function saveAsImage() 
 // say, need to take a snapshot after next frame is rendered
 saveRequested = true;


function saveAsImage2() 
 var imgData, imgNode;

 try 
 var strMime = "image/jpeg";
 var strDownloadMime = "image/octet-stream";

 let imgData = renderer.domElement.toDataURL(strMime);
 console.log(imgData);

 saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

 catch (e) 
 console.log(e);
 return;
 

share|improve this answer

answered Mar 22 at 12:53

Alex KhoroshylovAlex Khoroshylov

1,2321419

answered Mar 22 at 12:53

Alex KhoroshylovAlex Khoroshylov

1,2321419

answered Mar 22 at 12:53

Alex KhoroshylovAlex Khoroshylov

1,2321419