在运行时在 THREE.JS 和 GLTF 中导入另一个纹理 [英] Import another Texture at runtime within THREE.JS and GLTF

问题描述

我还是 Three.JS 的新手，我很高兴到目前为止我已经取得了进展，但只是需要一些帮助.

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

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

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).

下面是我的代码，目前它什么都不输出，我收到以下错误:

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

在 Chrome 中:

类型错误:无法设置未定义的属性‘地图’"

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

在 Firefox 中:

类型错误:model.material 未定义"

"TypeError: model.material is undefined"

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;

任何帮助将不胜感激.

推荐答案

函数 loader.load() 异步运行，您没有立即获得 model 变量调用后设置.因此，您正在寻找的解决方案是将 model.material.map = texture; 移动到回调函数中，如下所示:

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( '../gtf/Box.gltf', function (gltf) {
    model = gltf.scene;
    texture.flipY = false; // for glTF models only
    model.material.map = texture; // <-- move here
    scene.add( model );
});

这将保证您拥有可以使用的有效 model 对象.

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

这篇关于在运行时在 THREE.JS 和 GLTF 中导入另一个纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！