Question

我在Three.JS上还很陌生，到目前为止我很高兴，但是只需要一些帮助。

我已将GLTF对象加载到场景中，我希望能够通过用户选择样式（例如自定义功能）将不同的纹理加载到网站上的对象上。

下面是我的代码，此刻什么也不输出，我得到以下错误：

在Chrome中：

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

在Firefox中：

“ 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;

任何帮助将不胜感激。

Answer 1

函数loader.load()异步运行，并且调用后没有立即设置model变量。因此，您正在寻找的解决方案是将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 );
});

这将确保您具有可以使用的有效model对象。

Answer 2

您遇到的问题是分配给model的场景不仅包含网格和材质信息，还包含更多信息。您将需要遍历场景对象model才能找到网格，然后相应地更改材质。虽然您使用的初始数据格式不同，但是您可以在此处的上一篇文章中找到所需的答案：

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

修改：
@HugoTeixeira是正确的，需要将纹理的分配移到loader.load()的回调函数中（很抱歉，我之前完全忽略了这一点），但是实际的分配model.material.map = texture;无法正常工作。如上所述，您仍然需要遍历gltf.scene对象，以查找要为其分配纹理的网格。

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

2 个答案: