javascript - Three.js 使用按钮更改 .obj 文件的 Material

Question

我在使用 Three.js 创建按钮以将 .obj 的 .mtl 文件更改为另一个 .mtl 时遇到问题。任何关于如何做到这一点的想法都会很棒!

这里是原始代码，改编自 Threejs.org 上的 objmtl 加载器示例。到目前为止，我只能使用按钮使 obj 可见/不可见，但我很乐意添加更多按钮来更改 .mtl 文件以反射(reflect)具有其他颜色和属性的 .mtls。

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"/>';

Answer 1

如果您可以在没有 .mtl 文件的情况下工作，则可以使用类似的内容:

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 );

这样，您就可以将纹理加载到lambert Material 中，因此如果您想更改它，可以使用lambert.map=texture或lambert.map=sectexture。

[编辑]我已经修复了 child.material 上的错误