Loading multiple textures from different url's fails

I am trying to render textures on planes loaded from different URL's. For some reason after 2nd or 3rd image I can see in browser that loading image is stuck and it is not being rendered. enter image description here

Adding the code used:

function init() 
 loadPicturesFromDirectUrl();


function loadPicturesFromDirectUrl(currentPictureIndex) 
 if (currentPictureIndex === undefined) 
 currentPictureIndex = 0;
 
 var picture = data.pictures[currentPictureIndex];
 var loader = new THREE.TextureLoader();
 loader.load(picture.url, function (texture) 
 renderPicture(picture, texture);
 currentPictureIndex++;
 if (currentPictureIndex > data.pictures.length - 1) 
 return;
 
 loadPicturesFromDirectUrl(currentPictureIndex);
 , null, function (e) 
 console.log(e);
 );


function renderPicture(picture, texture) 
 var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
 var planeMaterial = new THREE.MeshBasicMaterial( map: texture );
 var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.position.x = picture.location.x;
 planeMesh.position.y = picture.location.y;
 planeMesh.rotateY(myzeum.toRadians(180));
 scene.add(planeMesh);

edited Nov 14 '18 at 5:09

asked Nov 12 '18 at 4:39

eddyuk

1,62632647

Are you loading all images over HTTPS? Maybe it's not working because you load insecure content (via HTTP).
– Mugen87
Nov 12 '18 at 11:09

You've got to give us something to work with. Where is your code? What have you tried?
– Marquizzo
Nov 13 '18 at 0:21

I added the code to original post.
– eddyuk
Nov 14 '18 at 5:10

add a comment |

Adding the code used:

function init() 
 loadPicturesFromDirectUrl();


function loadPicturesFromDirectUrl(currentPictureIndex) 
 if (currentPictureIndex === undefined) 
 currentPictureIndex = 0;
 
 var picture = data.pictures[currentPictureIndex];
 var loader = new THREE.TextureLoader();
 loader.load(picture.url, function (texture) 
 renderPicture(picture, texture);
 currentPictureIndex++;
 if (currentPictureIndex > data.pictures.length - 1) 
 return;
 
 loadPicturesFromDirectUrl(currentPictureIndex);
 , null, function (e) 
 console.log(e);
 );


function renderPicture(picture, texture) 
 var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
 var planeMaterial = new THREE.MeshBasicMaterial( map: texture );
 var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.position.x = picture.location.x;
 planeMesh.position.y = picture.location.y;
 planeMesh.rotateY(myzeum.toRadians(180));
 scene.add(planeMesh);

edited Nov 14 '18 at 5:09

asked Nov 12 '18 at 4:39

eddyuk

1,62632647

Are you loading all images over HTTPS? Maybe it's not working because you load insecure content (via HTTP).
– Mugen87
Nov 12 '18 at 11:09

You've got to give us something to work with. Where is your code? What have you tried?
– Marquizzo
Nov 13 '18 at 0:21

I added the code to original post.
– eddyuk
Nov 14 '18 at 5:10

add a comment |

Adding the code used:

function init() 
 loadPicturesFromDirectUrl();


function loadPicturesFromDirectUrl(currentPictureIndex) 
 if (currentPictureIndex === undefined) 
 currentPictureIndex = 0;
 
 var picture = data.pictures[currentPictureIndex];
 var loader = new THREE.TextureLoader();
 loader.load(picture.url, function (texture) 
 renderPicture(picture, texture);
 currentPictureIndex++;
 if (currentPictureIndex > data.pictures.length - 1) 
 return;
 
 loadPicturesFromDirectUrl(currentPictureIndex);
 , null, function (e) 
 console.log(e);
 );


function renderPicture(picture, texture) 
 var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
 var planeMaterial = new THREE.MeshBasicMaterial( map: texture );
 var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.position.x = picture.location.x;
 planeMesh.position.y = picture.location.y;
 planeMesh.rotateY(myzeum.toRadians(180));
 scene.add(planeMesh);

edited Nov 14 '18 at 5:09

asked Nov 12 '18 at 4:39

eddyuk

1,62632647

Adding the code used:

function init() 
 loadPicturesFromDirectUrl();


function loadPicturesFromDirectUrl(currentPictureIndex) 
 if (currentPictureIndex === undefined) 
 currentPictureIndex = 0;
 
 var picture = data.pictures[currentPictureIndex];
 var loader = new THREE.TextureLoader();
 loader.load(picture.url, function (texture) 
 renderPicture(picture, texture);
 currentPictureIndex++;
 if (currentPictureIndex > data.pictures.length - 1) 
 return;
 
 loadPicturesFromDirectUrl(currentPictureIndex);
 , null, function (e) 
 console.log(e);
 );


function renderPicture(picture, texture) 
 var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
 var planeMaterial = new THREE.MeshBasicMaterial( map: texture );
 var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.position.x = picture.location.x;
 planeMesh.position.y = picture.location.y;
 planeMesh.rotateY(myzeum.toRadians(180));
 scene.add(planeMesh);

three.js

edited Nov 14 '18 at 5:09

asked Nov 12 '18 at 4:39

eddyuk

1,62632647

edited Nov 14 '18 at 5:09

asked Nov 12 '18 at 4:39

eddyuk

1,62632647

edited Nov 14 '18 at 5:09

asked Nov 12 '18 at 4:39

eddyuk

1,62632647

asked Nov 12 '18 at 4:39

eddyuk

1,62632647

asked Nov 12 '18 at 4:39

eddyuk

1,62632647

Are you loading all images over HTTPS? Maybe it's not working because you load insecure content (via HTTP).
– Mugen87
Nov 12 '18 at 11:09

You've got to give us something to work with. Where is your code? What have you tried?
– Marquizzo
Nov 13 '18 at 0:21

I added the code to original post.
– eddyuk
Nov 14 '18 at 5:10

add a comment |

Are you loading all images over HTTPS? Maybe it's not working because you load insecure content (via HTTP).
– Mugen87
Nov 12 '18 at 11:09

You've got to give us something to work with. Where is your code? What have you tried?
– Marquizzo
Nov 13 '18 at 0:21

I added the code to original post.
– eddyuk
Nov 14 '18 at 5:10

Are you loading all images over HTTPS? Maybe it's not working because you load insecure content (via HTTP).
– Mugen87
Nov 12 '18 at 11:09

You've got to give us something to work with. Where is your code? What have you tried?
– Marquizzo
Nov 13 '18 at 0:21

I added the code to original post.
– eddyuk
Nov 14 '18 at 5:10

add a comment |

1 Answer
1

active

oldest

votes

You may want to try to preload all the pictures in one function and store them in an array and render them only after all of them have been loaded. Like so:

var all_textures = ;
function init() 
 loadPicturesFromDirectUrl();
 for int (i = 0; i < all_picture.length; i++) 
 renderPicture(data.pictures[i], all_textures[i])
 

function loadPicturesFromDirectUrl(currentPictureIndex) 
 if (currentPictureIndex === undefined) 
 currentPictureIndex = 0;
 
 var picture = data.pictures[currentPictureIndex];
 var loader = new THREE.TextureLoader();
 loader.load(picture.url, function (texture) 
 all_textures[currentPictureIndex] = texture
 currentPictureIndex++;
 if (currentPictureIndex > data.pictures.length - 1) 
 return;
 
 loadPicturesFromDirectUrl(currentPictureIndex);
 , null, function (e) 
 console.log(e);
 );


function renderPicture(picture, texture) 
 var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
 var planeMaterial = new THREE.MeshBasicMaterial( map: texture );
 var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.position.x = picture.location.x;
 planeMesh.position.y = picture.location.y;
 planeMesh.rotateY(myzeum.toRadians(180));
 scene.add(planeMesh);

answered Nov 15 '18 at 22:54

Evan D'Elia

415

I tried that, but even without the rendering, the loading sometimes fails. It goes to onError but there is no details about the error.
– eddyuk
Nov 17 '18 at 8:05

I think you might also want to try it with the loading manager threejs.org/docs/#api/en/loaders/managers/LoadingManager This way you can guarantee the pictures are being loaded synchronously. Are any particular pictures throwing 404s or 500s?
– Evan D'Elia
Nov 19 '18 at 15:51

Actually non of them. When loading 10 images for example, 2 being loaded, and second one is returning 200 but as you can see in original post, only few rows of pixels are being loaded. I think it is something internal in three js lib
– eddyuk
Nov 20 '18 at 5:21

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

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256048%2floading-multiple-textures-from-different-urls-fails%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You may want to try to preload all the pictures in one function and store them in an array and render them only after all of them have been loaded. Like so:

var all_textures = ;
function init() 
 loadPicturesFromDirectUrl();
 for int (i = 0; i < all_picture.length; i++) 
 renderPicture(data.pictures[i], all_textures[i])
 

function loadPicturesFromDirectUrl(currentPictureIndex) 
 if (currentPictureIndex === undefined) 
 currentPictureIndex = 0;
 
 var picture = data.pictures[currentPictureIndex];
 var loader = new THREE.TextureLoader();
 loader.load(picture.url, function (texture) 
 all_textures[currentPictureIndex] = texture
 currentPictureIndex++;
 if (currentPictureIndex > data.pictures.length - 1) 
 return;
 
 loadPicturesFromDirectUrl(currentPictureIndex);
 , null, function (e) 
 console.log(e);
 );


function renderPicture(picture, texture) 
 var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
 var planeMaterial = new THREE.MeshBasicMaterial( map: texture );
 var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.position.x = picture.location.x;
 planeMesh.position.y = picture.location.y;
 planeMesh.rotateY(myzeum.toRadians(180));
 scene.add(planeMesh);

answered Nov 15 '18 at 22:54

Evan D'Elia

415

I tried that, but even without the rendering, the loading sometimes fails. It goes to onError but there is no details about the error.
– eddyuk
Nov 17 '18 at 8:05

I think you might also want to try it with the loading manager threejs.org/docs/#api/en/loaders/managers/LoadingManager This way you can guarantee the pictures are being loaded synchronously. Are any particular pictures throwing 404s or 500s?
– Evan D'Elia
Nov 19 '18 at 15:51

Actually non of them. When loading 10 images for example, 2 being loaded, and second one is returning 200 but as you can see in original post, only few rows of pixels are being loaded. I think it is something internal in three js lib
– eddyuk
Nov 20 '18 at 5:21

add a comment |

You may want to try to preload all the pictures in one function and store them in an array and render them only after all of them have been loaded. Like so:

var all_textures = ;
function init() 
 loadPicturesFromDirectUrl();
 for int (i = 0; i < all_picture.length; i++) 
 renderPicture(data.pictures[i], all_textures[i])
 

function loadPicturesFromDirectUrl(currentPictureIndex) 
 if (currentPictureIndex === undefined) 
 currentPictureIndex = 0;
 
 var picture = data.pictures[currentPictureIndex];
 var loader = new THREE.TextureLoader();
 loader.load(picture.url, function (texture) 
 all_textures[currentPictureIndex] = texture
 currentPictureIndex++;
 if (currentPictureIndex > data.pictures.length - 1) 
 return;
 
 loadPicturesFromDirectUrl(currentPictureIndex);
 , null, function (e) 
 console.log(e);
 );


function renderPicture(picture, texture) 
 var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
 var planeMaterial = new THREE.MeshBasicMaterial( map: texture );
 var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.position.x = picture.location.x;
 planeMesh.position.y = picture.location.y;
 planeMesh.rotateY(myzeum.toRadians(180));
 scene.add(planeMesh);

answered Nov 15 '18 at 22:54

Evan D'Elia

415

I tried that, but even without the rendering, the loading sometimes fails. It goes to onError but there is no details about the error.
– eddyuk
Nov 17 '18 at 8:05

I think you might also want to try it with the loading manager threejs.org/docs/#api/en/loaders/managers/LoadingManager This way you can guarantee the pictures are being loaded synchronously. Are any particular pictures throwing 404s or 500s?
– Evan D'Elia
Nov 19 '18 at 15:51

Actually non of them. When loading 10 images for example, 2 being loaded, and second one is returning 200 but as you can see in original post, only few rows of pixels are being loaded. I think it is something internal in three js lib
– eddyuk
Nov 20 '18 at 5:21

add a comment |

You may want to try to preload all the pictures in one function and store them in an array and render them only after all of them have been loaded. Like so:

var all_textures = ;
function init() 
 loadPicturesFromDirectUrl();
 for int (i = 0; i < all_picture.length; i++) 
 renderPicture(data.pictures[i], all_textures[i])
 

function loadPicturesFromDirectUrl(currentPictureIndex) 
 if (currentPictureIndex === undefined) 
 currentPictureIndex = 0;
 
 var picture = data.pictures[currentPictureIndex];
 var loader = new THREE.TextureLoader();
 loader.load(picture.url, function (texture) 
 all_textures[currentPictureIndex] = texture
 currentPictureIndex++;
 if (currentPictureIndex > data.pictures.length - 1) 
 return;
 
 loadPicturesFromDirectUrl(currentPictureIndex);
 , null, function (e) 
 console.log(e);
 );


function renderPicture(picture, texture) 
 var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
 var planeMaterial = new THREE.MeshBasicMaterial( map: texture );
 var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.position.x = picture.location.x;
 planeMesh.position.y = picture.location.y;
 planeMesh.rotateY(myzeum.toRadians(180));
 scene.add(planeMesh);

answered Nov 15 '18 at 22:54

Evan D'Elia

415

You may want to try to preload all the pictures in one function and store them in an array and render them only after all of them have been loaded. Like so:

var all_textures = ;
function init() 
 loadPicturesFromDirectUrl();
 for int (i = 0; i < all_picture.length; i++) 
 renderPicture(data.pictures[i], all_textures[i])
 

function loadPicturesFromDirectUrl(currentPictureIndex) 
 if (currentPictureIndex === undefined) 
 currentPictureIndex = 0;
 
 var picture = data.pictures[currentPictureIndex];
 var loader = new THREE.TextureLoader();
 loader.load(picture.url, function (texture) 
 all_textures[currentPictureIndex] = texture
 currentPictureIndex++;
 if (currentPictureIndex > data.pictures.length - 1) 
 return;
 
 loadPicturesFromDirectUrl(currentPictureIndex);
 , null, function (e) 
 console.log(e);
 );


function renderPicture(picture, texture) 
 var planeGeometry = new THREE.PlaneGeometry(picture.size.width, picture.size.height);
 var planeMaterial = new THREE.MeshBasicMaterial( map: texture );
 var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.position.x = picture.location.x;
 planeMesh.position.y = picture.location.y;
 planeMesh.rotateY(myzeum.toRadians(180));
 scene.add(planeMesh);

answered Nov 15 '18 at 22:54

Evan D'Elia

415

answered Nov 15 '18 at 22:54

Evan D'Elia

415

answered Nov 15 '18 at 22:54

Evan D'Elia

415

answered Nov 15 '18 at 22:54

Evan D'Elia

415

I tried that, but even without the rendering, the loading sometimes fails. It goes to onError but there is no details about the error.
– eddyuk
Nov 17 '18 at 8:05

I think you might also want to try it with the loading manager threejs.org/docs/#api/en/loaders/managers/LoadingManager This way you can guarantee the pictures are being loaded synchronously. Are any particular pictures throwing 404s or 500s?
– Evan D'Elia
Nov 19 '18 at 15:51

Actually non of them. When loading 10 images for example, 2 being loaded, and second one is returning 200 but as you can see in original post, only few rows of pixels are being loaded. I think it is something internal in three js lib
– eddyuk
Nov 20 '18 at 5:21

add a comment |

I tried that, but even without the rendering, the loading sometimes fails. It goes to onError but there is no details about the error.
– eddyuk
Nov 17 '18 at 8:05

I think you might also want to try it with the loading manager threejs.org/docs/#api/en/loaders/managers/LoadingManager This way you can guarantee the pictures are being loaded synchronously. Are any particular pictures throwing 404s or 500s?
– Evan D'Elia
Nov 19 '18 at 15:51

Actually non of them. When loading 10 images for example, 2 being loaded, and second one is returning 200 but as you can see in original post, only few rows of pixels are being loaded. I think it is something internal in three js lib
– eddyuk
Nov 20 '18 at 5:21

I tried that, but even without the rendering, the loading sometimes fails. It goes to onError but there is no details about the error.
– eddyuk
Nov 17 '18 at 8:05

I think you might also want to try it with the loading manager threejs.org/docs/#api/en/loaders/managers/LoadingManager This way you can guarantee the pictures are being loaded synchronously. Are any particular pictures throwing 404s or 500s?
– Evan D'Elia
Nov 19 '18 at 15:51

Actually non of them. When loading 10 images for example, 2 being loaded, and second one is returning 200 but as you can see in original post, only few rows of pixels are being loaded. I think it is something internal in three js lib
– eddyuk
Nov 20 '18 at 5:21

add a comment |

draft saved

draft discarded

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb