在Three.js中加载obj，mtl时未显示纹理

Question

我正在尝试使用objloader + mtlloader加载模型，如下所示：

var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath( '/examples/obj/rock/' );
                mtlLoader.load( 'rock.mtl', function( materials ) {
                    materials.preload();
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials( materials );
                    objLoader.setPath( '/examples/obj/rock/' );
                    objLoader.load( 'rock.obj', function ( object ) {
                        console.log(object);
                        object.position.y = 0;
                        scene.add( object );

                    }, onProgress, onError );

                });

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

网格正确加载，我得到以下结果：

模型的所有资产都存储在相同的路径下 - / examples / obj / rock。

资产是： - rock.obj - rock.mtl - rock.png

.mtl文件的内容如下：

# Blender MTL File: 'Rock #1.blend'
# Material Count: 1

newmtl Rock-Texture
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.720000 0.720000 0.720000
Ks 0.100000 0.100000 0.100000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
map_Kd rock.png