我想更改网格的材质,这可以在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;
});
}
}