如何使用 THREE.js 向 collada 文件 (.dae) 添加纹理？

Posted 2023-03-23

【中文标题】如何使用 THREE.js 向 collada 文件 (.dae) 添加纹理？

【英文标题】：How can I add textures to collada file (.dae) using THREE.js?

【发布时间】：2018-02-26 00:40:31

【问题描述】：

我需要使用 three.js 显示 collada 文件 (.dae)，我可以加载模型但它显示时没有纹理，使用此代码

var loader = new THREE.ColladaLoader( loadingManager );
            loader.options.convertUpAxis = true;
            loader.load( './car.dae', function ( collada ) 

                car = collada.scene;

                car.material = 
     THREE.TextureLoader("../model/car_white.jpg");

我尝试了其他代码，只有这个代码适用于模型但没有纹理 需要您的支持来添加我的纹理。

【问题讨论】：

如果您的纹理在 collada 模型中，那么您需要按照github.com/mrdoob/three.js/blob/master/examples/… 的示例进行操作。如果 collada 模型没有直接引用您的纹理，则需要一个 collada 编辑器（添加它们）。从 three.js 向模型添加纹理会非常困难，因为您需要计算 UV 坐标……这对于非简单模型来说并不容易。

【参考方案1】：

一般来说，您可以像这样向模型添加纹理：

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('../model/car_white.jpg');

loader.load( './car.dae', function ( collada ) 

  collada.scene.traverse(function (node) 
    if (node.isMesh) 
      node.material.map = texture;
    
  );

);

有关详细信息，请参阅 THREE.Material 和 THREE.TextureLoader 的文档。

注意：正如@gaitat 在评论中提到的，如果它们不是为彼此设计的，并且模型不是很简单，则您的纹理可能无法正确包裹在模型上。如果是这种情况，您可能需要在 Blender（或其他软件）中添加纹理，您可以在其中创建 UV，并导出结果。