Setting texture on mesh in three.js

Question

I have a mesh that I load as a .dae (collada). However, my texture file is separate (as a PNG)

Currently, my loading code is

loader.load("./assets/map_tutorial.dae", function(collada) {
    var terrain = collada.scene.children[0];
    var texture = new THREE.ImageUtils.loadTexture("./assets/map_tutorial_tex.png");
    terrain.rotation.x = Math.PI / 2;
    terrain.rotation.y = Math.PI;
    scene.add(terrain);
    console.log("There are " + collada.scene.children.length + " meshes!");
});

However, I'm uncertain as to how to apply the texture to my mesh (terrain)

Thanks in advance!

lot · Accepted Answer · 2014-01-22 14:23:38Z

2

You will definitely have to create new material object from your texture. Assuming you want lambert, it would be like this:

var material = new THREE.MeshLambertMaterial( { map:texture } );

I am not familiar with collada loader, but it seems that it already created a mesh for you. In this case I am not sure whether you can change material of this mesh. What should definitely work is to create new mesh from geometry that you loaded from .dae file and material that you created from png image.

var mesh = new THREE.Mesh( terrain.geometry, material );
scene.add( mesh );

I hope this helps, normally I use three.js native JSON model files where this approach is working. Difference is that THREE.JSONLoader gives you two objects for your usage: geometry and materials. Collada loader seems to provide you with already created mesh so try to change it's geometry if possible or "steal" the geometry from this mesh and create a new one like I did in the example.

answered Jan 22, 2014 at 14:23

lot

1,55118 silver badges25 bronze badges

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

1 Comment

dreadiscool Over a year ago

This solution works (creating a new mesh based on the old gemoetry). However, I realized that you could just set the .material property of the object rather than recreating the mesh

Collectives™ on Stack Overflow

Setting texture on mesh in three.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related