Three.js – 将纹理应用于 Collada 网格会产生意想不到的结果

Posted 2023-03-23

【中文标题】Three.js – 将纹理应用于 Collada 网格会产生意想不到的结果

【英文标题】：Three.js – Applying texture to Collada mesh yields unexpected result

【发布时间】：2019-03-12 12:16:10

【问题描述】：

在Three.js ColladaLoader example 之后，我导出了一个 Cinema4D 汽水 可以将 (consisting of 4 meshes) 建模为 .dae 文件。其中一个网格，罐身，我想添加纹理。

在 Cinema4D 中，我已经根据网格（球形）的 UV 贴图制作了 a texture。但是，当我尝试将纹理应用到网格时，它只会显示纯白色填充。我在this Codepen 中添加了整个代码。相关代码如下，为简洁而编辑：

loader = new THREE.ColladaLoader();
loader.load('can.dae', function (collada) 
    can = collada.scene;

    can.traverse(function (node) 
        var textureLoader

        if (node.name == 'wrapper') 
            textureLoader = new THREE.TextureLoader();

            textureLoader.load('wrapper.png', function (texture) 
                node.material = new THREE.MeshBasicMaterial(
                    map: texture
                );

                node.material.needsUpdate = true;
            );
        
    );

    scene.add(can); 
);

结果说明。如您所见，罐头的包装不是提供的红色wrapper.png，而是纯白色填充。我尝试过映射和包装模式，但无济于事。非常感谢任何帮助！

仅供参考：我已经排除了 CORS 问题。

【问题讨论】：

您是否完成了 console.logs 以确保您的代码被调用？没有例子很难调试这样的东西..

在加载对象之前尝试加载纹理然后映射它

你能发布资产+纹理，我们可以看看吗？

NVM 看到了你的 codepen。发现我认为的问题，并在下面回答..

【参考方案1】：

我在您的加载器中添加了一个立方体并为其提供了该材料并且它起作用了..所以这意味着您的 can 网格没有分配适当的 UV 坐标..也许它在您的创作中使用了自动圆柱映射没有导出它的UV的软件？你在用什么软件创作？

            scene.add(new THREE.Mesh(new THREE.BoxGeometry(1,1,1),node.material));

https://codepen.io/manthrax/pen/ePBZbZ?editors=1001

【讨论】：

谢谢！该模型是在 Cinema4D 中创建的。网格有一个 UVW 标签 (see screenshot)，但我不确定这是否足够？不幸的是，我对 C4D 非常缺乏经验。我遵循了创建 UV 贴图的教程，这就是我创建初始纹理的方式，但我不能说我完全理解这个过程。