Develop Reference

How can I change textures for a MTLLoader.MaterialCreator instance in three.js?

I want to change the texture maps on a MTLLoader.MaterialCreator instance and I can not find and documentation about MTLLoader.MaterialCreator or how to change it's texture map, if someone knows about any documentation that talks about it or how to do this it would be amazing.
After I ran the preload() method I tried to do this:
image = new Image();
image.src = "data:image/png;base64,blahblahblah";
mtlInstance.materials[materialName].map.image = image;
How ever that didn't seem to change anything (when I loaded it with OBJLoader)

You need to convert the image into a texture first:
image = new Image();
image.src = "data:image/png;base64,blahblahblah";
let texture = new Texture(image);
mtlInstance.materials[materialName].map = texture;

How to set a fill style (texture) to an existing data URI in canvas

I have an existing PNG data URI like:
let dataURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAD+qAB849H0AAAAAXRSTlMAQObYZgAAAAxJREFUCNdjSEsgiACnWAlJEDYe/gAAAABJRU5ErkJggg==";
I want to use that as a texture in my canvas that I am doing some draw operations on. I've tried a few things with canvas.fillStyle, but I'm not seeing that working. Colors work fine.
What would be the way to use a dataURI as a texture in drawing operations?

You need to load it as an image first (be sure to handle the asynchronous aspect), so basically to set an image as pattern:
var img = new Image;
img.onload = imageIsReady;
img.src = "data: ....."; // full uri here
function imageIsReady() {
var pattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = pattern;
// fill, etc.
}

onload or addEventListener on new Image() canvas doesn't work

I have a problem when I load local (or online) images. So I use canvas HTML 5 then I put a new image on it but image never load at first time. I need to refresh page one time. The first time, images are loaded but not in good time so there are not showed. Then,, when I refresh, images are still in caches of my browser (firefox 50) so that's work.
I saw on forum that I need to wait with :
myimage.onload = function(){
context.drawImage(myimage,0,0,myimage_size,myimage_size);
}
myimage.src = mysrc;
But this doesn't work, images are not showed. So I try another way with that:
var elementHTML = document.createElement('img');
var canvas = document.createElement('canvas');
canvas.width = my_size;
canvas.height = my_size;
elementHTML.appendChild(canvas);
context = canvas.getContext('2d');
base_image = new Image();
base_image.src = base_image_src;
base_image.addEventListener('load', test(this.owner));
function test(owner){
//here there is the trick, with that, all work but I need program work without that !
while(window.alert("done")){};
context.drawImage(base_image,0,0,my_size,my_size)
if (owner == "1") {
//I modified some colors of my image
recolorRGBImage(context,lineTuleColorRGB,playerLineTuleColorRGB_1,lineTrigger);
recolorRGBImage(context,fillTuleColorRGB,playerFillTuleColorRGB_1,fillTrigger);
}
else {
recolorRGBImage(context,lineTuleColorRGB,playerLineTuleColorRGB_2,lineTrigger);
recolorRGBImage(context,fillTuleColorRGB,playerFillTuleColorRGB_2,fillTrigger);
}
}
That's work but obviously, alerts must never show. How can I do what I did without alert? (Alert used like onload because these methods doesn't work)
Thanks !

Loading an image with external js file

I'm trying to load an image using an external js file that contains the following:
myimage = new Image(1,1);
myimage.src = 'http://myserver.com/pixel.gif';
I see the js file loaded and no error in the console, but also no call to my image pixel. Any idea?
EDIT:
After the first responses I tried the following and it still doesn't work:
var myimage = document.createElement("img");
myimage.src = 'http://myserver.com/pixel.gif';
myimage.height = "1";
myimage.width = "1";
document.body.appendChild(myimage);

The image needs to be inserted into the page/DOM.
The image will not be called until it is placed into the page/DOM directly, and therefore loaded.
What you want will happen with something like: document.body.appendChild(myimage)

There is an example of how to do this at http://www.w3schools.com/tags/canvas_drawimage.asp by inserting the image into a canvas.
A small modification which I found makes this work better is putting the drawImage line into an img.onload callback like this:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload(function() {ctx.drawImage(img,10,10);});

getImageData cross-origin error

Precursor: I know there have been a few questions already asked about this topic, but none of them seem to offer a straight JavaScript only solution.
So I ran into this error where I am trying to get the pixel data from a canvas using something like context.getImageData(), my exact code can been seen here or below:
<canvas id="imageCanvas" width="600" height="800"></canvas>
// Load Image
var canvas = document.getElementById('imageCanvas');
var image = new Image();
image.src = 'http://emoticons.pw/emoticons/emoticon-faces-002-medium.png';
image.onload = function() {
width=image.width;
height=image.height;
var context = canvas.getContext('2d');
context.fillStyle="#024359"; // canvas background color
context.fillRect(0, 0, width, height);
context.drawImage(this,0,0);
imageData = context.getImageData(0,0,width, height); // PROBLEM HERE
context.putImageData(imageData, 0, 0);
}
I get the following errors in Chrome:
Unable to get image data from canvas because the canvas has been
tainted by cross-origin data.
and then a security error as well. I don't want to make server changes or start chrome with a weird instruction thing. I feel like there has to be something I can do in JavaScript.
Using local images only is not a problem, but when trying that, I got the same error!
I am trying to do this without a server, if I put this on my "default" godaddy web server, are all my problems solved? I heard rumors dropbox could also simulate a server close enough?

You can't use file:// if you're using that (Chrome allow you to override this but I won't recommend it).
For local testing use a light-weight server such as Mongoose which allow you use http://localhost as a domain to test your local pages. This way you avoid problems with CORS.
If you need to host images on a different domain you need to make sure they support cross-origin usage.
DropBox and ImgUrl (I recommend the latter for just images) both support CORS usage, but you need to request such usage by adding the crossOrigin property to your image before setting the source (or include it in the HTML tag if you're using that):
var img = new Image;
img.onload = myLoader;
img.crossOrigin = ''; ///=anonymous
img.src = 'http://imgur.com/....';
or in HTML:
<img src="..." alt="" crossOrigin="anonymous" />

Make sure you put the img.setAttribute('crossOrigin', ''); before you set the source of your image object. just like this:
var img = document.createElement("img");
//fix crossorigin here...
img.setAttribute('crossOrigin', '');
//after that put your source
img.src = imageSrcURL;
document.body.appendChild(img);