三个JS | Collada 加载程序纹理

【问题标题】：Three JS | Collada loader textures三个JS | Collada 加载程序纹理
【发布时间】：2018-04-04 00:54:00
【问题描述】：

我对 threeJS collada loader 有疑问。我从后端收到带有所有纹理的 dae 模型。之后，我解析图像（纹理）并创建材质数组。

let materials = [];
textures.forEach((texture) => {
  let loadedTexture = THREE.ImageUtils.loadTexture(texture.url);
  let material = new THREE.MeshPhongMaterial({ map: loadedTexture });
});

然后我加载 dae 模型并尝试在我的数组中附加材质：

colladaLoader.load(daeModelFile, (collada) => {
  let model = collada.scene;

  dae.traverse( ( child ) => {
    if ( child instanceof THREE.Mesh ) {
      child.material = materials;
    }
  });

  mainScene.add(model);
});

但不是这样：

我收到了这个：

【问题讨论】：

标签： javascript three.js

【解决方案1】：

如果您使用THREE.ColladaLoader2 加载dae 文件，则无需手动应用纹理。这是由装载机完成的。请查看此示例的源代码：

https://threejs.org/examples/webgl_loader_collada.html

顺便说一句：不要再使用THREE.ColladaLoader。这是一个旧实现，将在下一版本中替换为 THREE.ColladaLoader2。

R87

【讨论】：

我用过typescript，在ts中没有找到ColladaLoader2
我还从后端加载 zip 存档，然后解压缩 dae 文件，加载他。解压纹理图像并通过 TextureLoader 加载后。
这不是预期的工作流程，因为您不尊重 collada 文件中的纹理相关数据。作为一种解决方法，当您为此特定模型texture.wrapS = texture.wrapT= THREE.RepeatWrapping 创建纹理时，尝试应用此代码。但是您仍然不应该手动加载这些纹理。