Blender 到 Three.js (.JSON) 和 OBJ 到 .JS 纹理映射问题答案

【问题标题】：Blender to Three.js (.JSON) and OBJ to .JS texture mapping issuesBlender 到 Three.js (.JSON) 和 OBJ 到 .JS 纹理映射问题
【发布时间】：2016-06-01 14:34:06
【问题描述】：

我被难住了。我查看了所有我能找到的相关主题，没有一个能完全描述我的问题。

我正在尝试获取模型的 .JSON 或 .JS 版本，以便在通过 WebGL 渲染时导出与 .OBJ 版本相同的纹理贴图。下面是一张图片说明正在发生的事情：

设置： Win7、Blender 2.77、Three.js（2016 年 5 月 22 日下载）、Three.js (.json) Blender Exporter、Python OBJ > .JS 转换器脚本 (convert_obj_three.py)

python convert_obj_three.py -i xxx.obj -o xxx.js

步骤：

从 WoW ModelViewer 导出为 .OBJ 的 WoW 模型
WoW 模型导入 Blender
Blender 编辑模式为“删除双打”
Blender 导出到 .OBJ
Three.js THREE.OBJLoader() 脚本在 Web 上进行测试

“GOOD”示例中的结果（图片中的左侧大小写）

Blender 导出到 .JSON（尝试所有可以想象的配置，然后尝试一些）
Three.js THREE.JSONLoader() 脚本在 Web 上进行测试

“BAD”示例中的结果（图像中的中间大小写）

Blender 导出到 .OBJ
CMD 行 Python 脚本进行 OBJ 到 .JS 的转换
Three.js THREE.JSONLoader() 脚本在 Web 上进行测试

结果为“WORSE”示例（图像中的中间大小写）。出于某种原因，在最后一个例子中，不仅头发纹理，而且模型脸部的部分皮肤也变得不稳定。

您可能会注意到每种情况下的灯光渲染也略有不同。

我查看了 .JSON 和 .JS 文件，但不知道如何手动编辑如果最终需要的话。

也许某些模型根本无法正确纹理？

【问题讨论】：

到底是什么问题？我觉得左边的照片好看吗？
如果您认为这是一个 three.js 错误，请在 three.js 网站上提交错误报告，并提供一个指向您所有项目文件的 zip 文件的链接，包括一个简单的演示。跨度>
嗨，问题是我需要让它在 .JSON 或 .JS 中正常工作，以便能够使用 Three.js 框架制作动画。我解决了照明问题，以及最右侧图像上奇怪的颤音。它是由一个已经从 Blender 保存过的 .OBJ 开始的。剩下的唯一问题是我无法弄清楚头发使用的坐标映射。

标签： javascript three.js textures blender

【解决方案1】：

模型头部的 UV 超出范围 [0, 1]。

当你加载你的 JSON 模型时，设置

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

three.js r.77

【讨论】：

谢谢！不过还是感觉迟钝。实际上，在 .js 文件中存在 [0,1] 范围之外的 UV 参考，如果将其删除，则会导致带纹理的头发区域变黑。但我尝试的简单包装变化都没有任何效果：var loader = new THREE.JSONLoader(); loader.load( "xx/model.js", function(geometry, materials){ var hairTexture = new THREE.TextureLoader().load("xx/hair.png"); hairTexture.wrapS = hairTexture.wrapT = THREE.RepeatWrapping; mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); scene.add(mesh); });
问题已解决。我在 Blender 中学习了 UV 编辑的乐趣，收集了所有漂浮在纹理图像范围之外的迷你网格，正确放置它们，重新导出 OBJ，使用 Python 脚本进行转换......等等。一旦我掌握了它的窍门，就会产生无意识的乐趣。再次感谢您尝试帮助这个老菜鸟...