Question

我想更改网格的材质，我可以在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”。

Answer 1

错误是“未定义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;
        });
    }
}

three.js —如何在加载程序之外选择网格？

1 个答案: