Dynamically change .mtl.obj OBJMTLLoader

Question

How can I dynamically change material on my .obj model? Each of my models contains .obj, .mtl, and .jpg files with textures. Do I have to modify the .mtl file in any way?

In the code below, I focus the geometry of each child mesh of my .obj, then I try to give it a texture, but neither the commented code nor loader.load give the texture.

var loader = new THREE.OBJMTLLoader(); loader.addEventListener( 'load', function ( event ) { object = event.content; for (var i = 0; i < object.children.length; i++) { THREE.GeometryUtils.merge(geometry, object.children[i].geometry); } THREE.GeometryUtils.center( geometry ); //var materials = new THREE.ImageUtils.loadTexture("/obj/stol.mtl"); //mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( material ) ); var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); mesh = new THREE.Mesh( geometry, material ); mesh.scale.x = 0.25; mesh.scale.y = 0.25; mesh.scale.z = 0.25; mesh.castShadow = true; scene.add( mesh ); animate(); }); loader.load( '/obj/stol.obj', '/obj/stol.mtl' ); 

I would like to have some buttons on my page that cause onclick texture changes, for example

 $(function(){ $('#txt_01').click(function(){ mesh.textureLoad("/obj/txt_01.mtl"); } }); 

Working demo: http://www.edar.com.pl/test-3d-2/

Answer 1

Just check the texture loading examples.

And how to update the material in the three.js file, see the section "Updating the material". https://github.com/mrdoob/three.js/wiki/Updates