我想更改网格的材质,这可以在three.js的网格加载器中轻松完成。但是,一旦加载程序完成,我将无法再从外部函数访问它。这一定是我无法弄清楚的范围界定问题。

这可行(但是我不能这样使用):

var loader = new THREE.GLTFLoader();
    loader.load('model.glb', function (gltf) {
    scene.add(gltf.scene);

    // Material changed below
    var newMat = new THREE.TextureLoader().load(something.jpg);
    gltf.scene.traverse(function (node) {
            node.material = newMat;
    });

});


这不是。我该如何解决?

var loader = new THREE.GLTFLoader();
loader.load('model.glb', function (gltf) {
    scene.add(gltf.scene);
});

function textureSwap(){
    var newMat = new THREE.TextureLoader().load(something.jpg);
    gltf.scene.traverse(function (node) {
            node.material = newMat;
    });
}

textureSwap();  // Material should change when calling this


错误是“未定义gltf”。

最佳答案

错误是“未定义gltf”。


发生这种情况是因为gltf仅在onLoad()回调中有效。通过将gltf.scene分配给在更高范围内声明的变量,例如model,可以轻松避免运行时错误。

var model;

var loader = new THREE.GLTFLoader();
loader.load('model.glb', function (gltf) {
    scene.add(gltf.scene);
    model = gltf.scene;
});

function textureSwap(){
    var newMat = new THREE.TextureLoader().load(something.jpg);
    model.traverse(function (node) {
        node.material = newMat;
    });
}


您必须确保仅在加载过程完成后才调用textureSwap()。为了使功能更强大,可以执行以下操作:

function textureSwap(){
    if ( model ) {
        var newMat = new THREE.TextureLoader().load(something.jpg);
        model.traverse(function (node) {
            node.material = newMat;
        });
    }
}

10-05 21:12
查看更多