Question

使用随Three.js打包的blender导出器，我从this tutorial导出了.blend文件。当谈到搅拌机时，我是一个巨大的菜鸟，所以我做的很简单：

打开文件，然后使用导出程序
打开UV /图像编辑器
保存导出的JSON旁边的每个纹理的副本（使用正确的名称）
修改图片，使其尺寸为2

所以我只是想看看我是否可以加载这个对象作为我正在进行的实验中走动的水平。网格加载很好，但没有纹理。我修改了Three.js源，在创建纹理图像（console.log源代码）时执行Loader以确保URL正确并且图像确实加载了它们。 / p>

以下是代码：

var jLoader = new THREE.JSONLoader();
jLoader.createModel(map.data, function(geometry) {
    var material = new THREE.MeshFaceMaterial(),
    mesh = new THREE.Mesh(geometry, material);

    mesh.scale.set(50, 50, 50);

    scene.add(mesh);
}, map.texturePath);

我使用createModel因为我自己使用自己的加载器加载JSON数据。 map.data包含导出的JSON，map.texturePath包含带纹理的目录的路径（没有尾部斜杠）;特别是'js/game/maps/subway'。 JSON是30MB所以我不会在这里发布，但我可以告诉你列出了这些材料，以及uvs。这是元数据：

"metadata" :
{
    "formatVersion" : 3.1,
    "generatedBy"   : "Blender 2.63 Exporter",
    "vertices"      : 474135,
    "faces"         : 236963,
    "normals"       : 168623,
    "colors"        : 0,
    "uvs"           : [3117],
    "materials"     : 1,
    "morphTargets"  : 0,
    "bones"         : 0
},

"scale" : 1.000000,

我注意到当"materials": 1数组的长度实际为74时，它显示materials。我不知道格式是否存在问题。

现在渲染时你可以看到地方应该有纹理只是空白。

Subway - No Textures http://static.pantherdev.com/misc/subway.png

我试着等待确保他们不只是花费很长时间来加载，尝试更改我实例化的材料，尝试不缩放网格，尝试将日志放入three.js以确保图像正在加载（它们是）

仔细观察，我发现至少有1个纹理出现了：

Subway - Texture Loaded http://static.pantherdev.com/misc/subway2.png

我不确定我做错了什么，或接下来要尝试什么。

如果有助于观看现场演示，您可以try it here虽然可能需要一两分钟来加载地铁JSON，因为我的服务器只是我客厅的一个盒子;不完全是网络速度恶魔。

感谢任何帮助，对不起这么长的帖子感到抱歉;只是想提供我所拥有的所有信息。

修改

我尝试使用纹理的绝对路径，甚至修改了JSON中材料的mapDifuse属性以尝试修复问题，但无济于事。

修改2

在使用WebGL-Inspector进行更多调试后，我在Web控制台中发现了以下错误：

[18:36:35.395] Error: WebGL: DrawElements: bound vertex attribute buffers do not have sufficient size for given indices from the bound element array @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:1933
[18:36:35.751] Error: WebGL: No further warnings will be reported for this WebGL context (already reported 32 warnings) @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:1933

当我捕捉到一帧时，我会得到更多信息：

[18:38:12.349] Frame 791 errors: @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9780
[18:38:12.349] ---------------------- @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9781
[18:38:12.349]  INVALID_OPERATION <= drawElements(TRIANGLES, 306, UNSIGNED_SHORT, 0) @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9787
[18:38:12.349]    - @http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:4155 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.349]    - @http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:403 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.350]    - n@http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:346 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.350]    - @http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:408 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.350]    - animate@http://static.pantherdev.com/dev/arena/client/isolate.html:108 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.350]    - @http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:2307 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
  ... A WHOLE LOT OF THIS ...
[18:38:12.358]  INVALID_OPERATION <= drawElements(TRIANGLES, 6, UNSIGNED_SHORT, 0) @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9787
[18:38:12.358]    - @http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:4155 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - @http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:403 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - n@http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:346 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - @http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:408 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - animate@http://static.pantherdev.com/dev/arena/client/isolate.html:108 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - @http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:2307 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.359]   @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9796

[18:38:12.126] Error: WebGL: bindBuffer: target: invalid enum value 0x0 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:4163
[18:38:12.133] Error: WebGL: generateMipmap: Level zero of texture is not defined. @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:3668
[18:38:12.927] Error: WebGL: bindBuffer: target: invalid enum value 0x0 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:4163
[18:38:14.156] Error: WebGL: DrawElements: bound vertex attribute buffers do not have sufficient size for given indices from the bound element array @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:2745

我认为假设我的JSON有一些不正确或缺失值是正确的，但我不知道如何纠正这种情况。就像我在评论中提到的那样（在本文的开头），我使用与Three.js打包的导出器导出.blend文件;我还需要做什么？

编辑3

使用WebGL-Inspector我已经提供了有关失败的实际调用的更多信息。这是working "649" texture和broken "rust" texture的调试信息，虽然纹理没有显示在链接页面上，如果它有助于某人（纹理确实显示在WebGL-Inspector上，那么数据就在那里）隔离页面，而不是我链接的导出页面。

Answer 1

似乎您的某些材料的uv不完整，因为webgl检查器在使用某些材料时会抛出错误。我仍然需要检查究竟发生了什么，但这似乎是你的问题所在。问题可能是JSON文件。

Answer 2

我最终放弃了试图让它工作，我认为模型本身是不正确的创建。 UV似乎没有正确映射到模型，并且在导出时被破坏。我从来没有设法使它工作，但能够加载其他纹理模型，即使刚装入Blender时显然也不同。

Answer 3

您必须显示的不是元数据，而是材质数组，如果材料在材料中遗漏，则blender导出器默认不保存纹理，然后从this tutorial尝试2-2。

Three.js JSONLoader;纹理没有加载

3 个答案: