adding external texture to three.js scene object

Question

just getting my hands dirty with three.js and im curious on something that may be relatively simple…

I built a scene in the three.js editor and have figured out how to load the scene. In the editor, I added an image as a map texture but I realize it wont know where it is loaded externally on my server. So I've loaded the scene and objects and lights, but how can I map my textures to the objects?

// MATERIALS
    var wireframe = THREE.ImageUtils.loadTexture( 'textures/wireframe.jpg' );
    wireframe.wrapS = wireframe.wrapT = THREE.RepeatWrapping;
    wireframe.repeat.set( 4, 4 );
    var wireframeMaterial = new THREE.MeshLambertMaterial({ 
            map : wireframe, 
            side : THREE.DoubleSide 
        });


// LOAD SCENE
    var loader = new THREE.ObjectLoader();
    loader.load( 'js/scene.js', function ( obj ) {
        obj.traverse( function( node ) { 
            if ( node instanceof THREE.Mesh ) { 
                node.castShadow = true; 
                node.receiveShadow = true;
                var plane = scene.getObjectByName( "plane", true );
                plane.material = wireframeMaterial;
            } 
        });

        scene.add( obj );
        render();
    });

When adding plane.material = wireframeMaterial; into the loader, all my objects just disappear… How can I properly map the wireframeMaterial the plane object?

working example with var plane and plane.material commented out: http://goo.gl/czSg7P

Scene: http://goo.gl/BAVgVS

I updated my answer once more and added a fiddle that seems to work. — Wilt

Wilt Wilt · Accepted Answer · 2015-01-15T17:04:59

To map the texture you have to create a material using your texture and apply it to your plane.

If necessary you can set repetition of your texture with:

wireframe.wrapS = THREE.RepeatWrapping;
wireframe.wrapT = THREE.RepeatWrapping;
wireframe.repeat.set( 4, 4 );

And then you need to do something like this:

material = new THREE.MeshLambertMaterial({ map : wireframe, side : THREE.DoubleSide });
plane.material = material;

EDIT

You create a scene inside a scene. Since the loader returns a scene and then you add it again to a scene. This will give issues for sure.

Try to replace scene.add( obj ); with this in your loader:

for( var i = 0; i < obj.children.length; i++ ){
    scene.add( obj.children[i] );
}

Not sure if that causes the problem, but I made a fiddle and it all seems to work fine for me. The problem is that I can't load external sources in my fiddle so instead I had to use your image as base64 string and the code becomes a bit different.

This means you have to change it a bit to make it work again with an image from your local folder. If you exchange the Whole //TEXTURE part of the code with the following it should work:

var texture = new THREE.ImageUtils.loadTexture( 'img/wireframe.jpg' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1, 1 );

var textureMaterial = new THREE.MeshLambertMaterial({ map: texture, side : THREE.DoubleSide });

adding external texture to three.js scene object

1 Answers

EDIT