Jump to content

How to load textures dynamically


hit2501
 Share

Recommended Posts

Hi.

 

I´m trying to load a texture dynamically to a mesh through an input type="file" as you can see here:

http://concept.wec360project.se/tff.html

 

But I don´t know how to do it

 

I´m using the following code to show the choosed image in a <img>:

Select image to upload:<input type='file' name="fileToUpload" onchange="readURL(this);" /><img id="fileToUpload" src="#" alt="your image"/><script>   var design;   function readURL(input) {      if (input.files && input.files[0]) {         var reader = new FileReader();         reader.onload = function (e) {            $('#fileToUpload').attr('src', e.target.result)            $('#fileToUpload').width(200)            $('#fileToUpload').height(200);         };         reader.readAsDataURL(input.files[0]);      }   }</script>

Sorry if its messy, I´m still learning (javascript, html and english ^^')

Link to comment
Share on other sites

Something like that seems to work: http://www.babylonjs-playground.com/#VNVOU (found here: http://www.html5gamedevs.com/topic/14278-image-data-as-a-texture/)

 

But somehow it only works on the first selected file. If you try to change the file it somehow doesn't work anymore and I couldn't figure out why :(

 

Ohw and there might be a way using createObjectURL like davrous suggested here: http://www.html5gamedevs.com/topic/17066-loading-texture-from-file-dialog/?hl=%2Bcreate+%2Blocal+%2Bimage#entry96040

... but I didn't really figure that out...maybe somebody else can make a simple example :P

Link to comment
Share on other sites

Thanks RaananW with your example I can go on with my research, but when I try to run locally I get the following error: "Uncaught ReferenceError: $ is not defined" in the line:

$('#upload').remove();

Do you know why this happens?

 

Thank you too jerome and iiceman.

Link to comment
Share on other sites

  • 8 months later...

Hello,

I've been looking for a way to select video textures by the user, and came across this post. I've tried using jquery, but have been unsucessful. If someone would be kind enough to modify the following playground scene posted by @iiceman, or provide how I might change textures on the sphere (Iassume this will work for videoTextures as well), I would be indepted.

 http://www.babylonjs-playground.com/#VNVOU

Thank you,

DB

 

Link to comment
Share on other sites

Hi @Nabroski -

Thank you for putting the Playground scene together. I tried in several browsers, and no texture loads on the shpere.

I do receive an error in the console for the loader.js file Duplicate definition of module 'vs/languages/javascript/javascript'  which I don't recive on the 1st version Playgound scene. Any thoughts - perhaps a line left out?

DB

Link to comment
Share on other sites

@Nabroski -

Again, thank you. So does this work for you? I cannot get any texture to load on the sphere. Also, to see the error I was speaking of you need to open the JS console - it may not be an issue, but it doesn't appear when a single texture loads in the previous playground scene. I'm using Windows and have tried Chrome, Safari, and others with no luck. Is it something specific to your platform or OS?

Cheers,

DB

Link to comment
Share on other sites

Hey @dbawel

could be a problem with crossOrigin settings in you browser maybe
i use with chrome --allow-file-access-from-files
try also 
chromium-browser --disable-web-security

I receive this message since two days, but ignore it.

@dbawel created a ground for you:
alternativ version
http://www.babylonjs-playground.com/#VNVOU#9

babylon-video.gif

Edited by Nabroski
gif + new playground
Link to comment
Share on other sites

@dbawel
download and try this one:
http://www.babylonjs-playground.com/textures/babylonjs.mp4

you can also set a timeinterval, or check if the texture is loaded. ~ control structures befor you draw
when babylon console log shows percentloading the video is buffered, then the problem is somewhere else.

Maybe a Texture/Video Problem

texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
texture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
texture._generateMipMaps = false;
//this dont work for me, but you can give it a try
//texture.video.crossOrigin = "anonymous";


I guess we should wait for the response of developers :) 

Best

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...