简体   繁体   中英

three.js change material for .obj file using a button

I'm having trouble creating a button to change the .mtl file of my .obj to another .mtl using three.js. Any thoughts on how to do that would be awesome!

Here is the original code, adapted from the objmtl loader example on threejs.org. So far, I've only been able to make the obj visible / invisible using a button, but I'd love to add more buttons to change the .mtl files to reflect .mtls with other colors and properties.

var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setBaseUrl( 'examples/obj/male02/' );
                mtlLoader.setPath( 'examples/obj/male02/' );
                mtlLoader.load( 'male02_dds.mtl', function( materials ) {

                    materials.preload();

                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials( materials );
                    objLoader.setPath( 'examples/obj/male02/' );
                    objLoader.load( 'male02.obj', function ( object ) {


                        object.position.y = - 95;
                        dude = object;
                        scene.add( dude );

    info.innerHTML += '<br/><br/><input id=pants2 type="button" onclick="dude.visible = false" value="Dude: OFF"/>';
    info.innerHTML += '<input id=pants2 type="button" onclick="dude.visible = true" value="Dude: ON"/>';

If you can work without the .mtl file, you can use something like that:

texture = new THREE.TextureLoader().load('dir/to/texture.jpg');
sectexture =  new THREE.TextureLoader().load('dir/to/second_texture.jpg');
lambert = new THREE.MeshLambertMaterial({color: 0xffffff, map: texture});
objLoader = new THREE.OBJLoader();
objLoader.setPath( 'examples/obj/male02/' );
objLoader.load( 'male02.obj', function ( object ) {
    object.traverse(function(child) {
        if (child instanceof THREE.Mesh){
            child.material = lambert;
        }
    });
    scene.add( object );
}, onProgress, onError );

With that, you can load your texture into the lambert material, so if you want to change it you can use lambert.map=texture or lambert.map=sectexture.

[EDIT] I have fixed the mistake on child.material

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM