将 CanvasTexture 作为地图应用到导入的 .obj 模型答案

【问题标题】：Applying CanvasTexture as a map to an imported .obj model将 CanvasTexture 作为地图应用到导入的 .obj 模型
【发布时间】：2020-03-19 07:38:07
【问题描述】：

我有一个像这样导入的 .obj 文件：

OBJLoader.load('/models/model.obj', m => {
                    let model = m.children[0];
                    model.material = new THREE.MeshBasicMaterial();
                    scene.add(model);
                });

我使用 THREE.MeshBasicMaterial 覆盖默认材质，因此我可以单独编辑贴图。

稍后，我得到一个 CanvasTexture 并将其用作地图：

let texture = new CanvasTexture(canvas);
model.material.map = texture;
model.material.needsUpdate = true;

这似乎可行，但我无法正确看到场景中对象的纹理 - 看起来它非常“放大” - 只显示纹理的整体颜色，而不是任何细节。我玩过texture.repeat，但似乎无法得到我想要的，即：

纹理应该出现在对象上并缩放以填充对象。我在 Blender 中制作了这个对象，它有很多面，但我希望纹理能够在所有面上填充整个对象，而不是重复。

我怎样才能做到这一点？

编辑：这是我正在使用的模型https://drive.google.com/drive/folders/1y6NmxNpamCtWsiBPlDhndnvQbxYPVgB7?usp=sharing

【问题讨论】：

有机会在这个帖子中分享模型吗？
@Mugen87 已编辑链接

标签： javascript canvas three.js

【解决方案1】：

您的OBJ 文件不包含任何纹理坐标。因此，不可能以您正在寻找的方式应用纹理。

由于您使用的是 Blender，因此创建合适的纹理坐标应该很简单。此外，我强烈建议您将模型导出为更现代的glTF 格式，而不是OBJ。 glTF 是 three.js 的推荐 3D 格式。

【讨论】：

谢谢@Mugen87。我添加了纹理坐标，但这似乎没有帮助。我是 Blender 的新手，所以我可能做错了。我已经用 .blend 文件更新了上面的驱动器链接 - 我想你不能确认这是否可以？
我在你的 blend 文件中看不到任何 uv 数据。我建议你点击你的模型，进入UV Editing，进入Edit Mode（按Tab），选择整个顶点数据然后使用UV（按U）然后使用Unwrap。
完成之后，我现在得到了一个纯黑色的对象。我在混合着色中添加了一张图片，以演示我在三个场景中添加的内容 - 该图片将是动态的，这就是我将其添加为画布纹理的原因
修复了上述问题 - 改变材料的粗糙度/金属度就可以了。