Three.js create texture from image file

Question

I'm having some trouble creating a texture from an image file in Three.js. I have a function to create a mesh that looks like this:

    var image = document.createElement('img');
    image.src = imageFile;
    var texture = new THREE.Texture(image);
    var mat = new THREE.MeshPhongMaterial();
    mat.map = texture;

    var mesh = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), mat);
    var plane = mesh;
    plane.position.x = 0;
    scene.add(plane);

However, my texture renders black and the image doesn't seem to render properly.

take a look at http://stackoverflow.com/questions/7919516/using-textures-in-three-js — gaitat, Jul 31 '14 at 19:50

score 1 · Accepted Answer · answered Jul 31 '14 at 20:31

1

The easiest way to use an image as a texture is to load it using THREE.ImageUtils.loadTexture(url, mapping, onLoad, onError), here is an example:

var mesh = new THREE.Mesh(
    new THREE.PlaneGeometry( 1, 1, 1, 1 ),
    new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('/my-image.jpg') })
);

The THREE.Texture constructor does accept an image as its first parameter, I think the problem you are encountering is because you aren't waiting for the image to complete loading. Using ImageUtils you can avoid having to dealing with callbacks.

answered Jul 31 '14 at 20:31

hapticdata

1,661
1
12
11

So how is this answer different than the given comment? – gaitat Aug 01 '14 at 01:54
`ImageUtils.loadTexture` is deprecated, so this answer isn't relevant anymore – Gangula Aug 22 '23 at 12:13

Three.js create texture from image file

1 Answers1