Loading textures in three.js

Question

I am new to three.js and what I done so far is: model a geometry in Blender, export it to JSON, and put it into my three.js scene. It works fine with the basic three.js materials. Now I want to load a color, specular and normal map to my geometry. But everytime I try to add just a single texture, the geometry disappears in the browser.

Here is my code:

    var jsonLoader = new THREE.JSONLoader();
    jsonLoader.load( "models/schuh.js", addModelToScene );

    var texture = new THREE.ImageUtils.loadTexture("images/test_COL.jpg");

    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);

}

function addModelToScene( geometry, materials ) 
{

    var material = new THREE.MeshBasicMaterial(map:texture});
    mesh = new THREE.Mesh( geometry, material );
    mesh.scale.set(50,50,50);
    scene.add( mesh );
}

what did I do wrong?

Chris Laarman · Accepted Answer · 2013-09-09 08:44:19Z

1

It looks like you are loading the texture after calling the addModelToScene function.

Try to change your code like this:

function someFunction() {  
    var texture    = new THREE.ImageUtils.loadTexture("images/test_COL.jpg");
    var jsonLoader = new THREE.JSONLoader();

    jsonLoader.load('models/schuh.js', addModelToScene);        

    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);

}

function addModelToScene( geometry, materials ) 
{

    var material = new THREE.MeshBasicMaterial({map:texture});
    mesh = new THREE.Mesh( geometry, material );
    mesh.scale.set(50,50,50);
    scene.add( mesh );
}

edited Sep 9, 2013 at 8:44

answered Jul 2, 2013 at 10:39

Chris Laarman

1,62713 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2524500 Over a year ago

Hello claarman, thank you for your reply. I tried what you suggested but it didn`t change anything.

Chris Laarman Over a year ago

Could you add some more code or ideally a (not) working example

JVE999 Over a year ago

Check the end of the 5th line from the bottom, it looks like a typo occurred ( "(map:texture})" ).

Collectives™ on Stack Overflow

Loading textures in three.js

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related