在运行时在THREE.JS和GLTF中导入另一个纹理

I'm still pretty new at Three.JS, I'm pretty happy where I have gotten so far, but just need some help.

我在Three.JS还是很新,我很高兴到目前为止,我只是需要一些帮助。

I have an GLTF object loaded into the scene, I want to be able to load different textures onto the object on the website by the user selecting a style, (like a customization feature).

我有一个GLTF对象加载到场景中,我希望能够通过用户选择样式(如自定义功能)将不同的纹理加载到网站上的对象上。

Below is my code, at the moment it outputs nothing and I get the following error:

下面是我的代码,目前它没有输出任何内容,我得到以下错误:

In Chrome:

"TypeError: Cannot set property 'map' of undefined"

“TypeError:无法设置未定义的属性'map'”

In Firefox:

"TypeError: model.material is undefined"

“TypeError:model.material未定义”

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('../gtf/green/green.png');
texture.flipY = false;

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

model.material.map = texture;

Any help would be greatly appreciated.

任何帮助将不胜感激。

2 个解决方案

#1

The function loader.load() runs asynchronously and you don't have the model variable immediately set after you call it. So the solution you are looking for is to move the model.material.map = texture; inside the callback function, like this:

函数loader.load()以异步方式运行,并且在调用后没有立即设置模型变量。所以你要找的解决方案是移动model.material.map = texture;在回调函数中,如下所示:

loader.load( '../gtf/Box.gltf', function (gltf) {
    model = gltf.scene;
    texture.flipY = false; // for glTF models only
    model.material.map = texture; // <-- move here
    scene.add( model );
});

This will guarantee that you have a valid model object that you can use.

这将保证您拥有可以使用的有效模型对象。

#2

The problem that you are running into is that the scene that you have assigned as model contains a lot more information than just the mesh and material information. You will need to iterate over the scene object model in order to find the mesh, and then change the material accordingly. While the initial data format that you are using is different, the answers you are looking for can be found in a previous post here:

您遇到的问题是,您已指定为模型的场景包含的信息远不仅仅是网格和材质信息。您需要迭代场景对象模型才能找到网格,然后相应地更改材质。虽然您使用的初始数据格式不同,但您在寻找的答案可以在上一篇文章中找到:

Change texture of loaded .obj in three.js at runtime

在运行时更改three.js中加载的.obj的纹理

Edit:
@HugoTeixeira is right that assignment of the texture needs to be moved into the callback function of loader.load() (sorry, I totally overlooked this previously), but the actual assignment model.material.map = texture; isn't going to work. You will still need to iterate over the gltf.scene object as mentioned above in order to find the mesh that you want to assign the texture to.

编辑:@HugoTeixeira是正确的,纹理的赋值需要移动到loader.load()的回调函数(对不起,我以前完全忽略了这一点),但实际的赋值是model.material.map = texture;不会起作用。您仍然需要迭代上面提到的gltf.scene对象,以便找到要为其指定纹理的网格。

#1