三.js JSONLoader；纹理未加载答案

【问题标题】：Three.js JSONLoader; Textures not loading三.js JSONLoader；纹理未加载
【发布时间】：2012-09-15 23:38:59
【问题描述】：

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

打开文件，用导出器导出
打开 UV/图像编辑器
在导出的 JSON 旁边保存每个纹理的副本（使用正确的名称）
将图像修改为具有 2 次幂的尺寸

所以我只是想看看是否可以将此对象加载为在我正在进行的实验中四处走动的关卡。网格加载正常，但没有纹理。我将 Three.js 源代码修改为在创建纹理图像（在 Loader 源代码中）时执行 console.log，以确保 URL 正确并且图像确实加载，它们确实如此。

代码如下：

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 数组的实际长度为 74 时，它会显示 "materials": 1。我对格式的了解不够多，无法知道这是否是一个问题。

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

_{（来源：pantherdev.com）}

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

仔细观察，我可以看到至少有 1 个纹理出现了：

_{（来源：pantherdev.com）}

我不确定我做错了什么，或者下一步该尝试什么。

如果对观看现场演示有帮助，您可以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 上，只是不在我链接的导出页面上）。

【问题讨论】：

你能创建一个独立的测试吗？很难深入了解您当前的设置。
@mrdoob 我从这里复制了示例：aerotwist.com/tutorials/getting-started-with-three-js 并将我的代码添加到页面的最底部（也删除了球体并使演示更大）。可以在此处查看隔离测试：static.pantherdev.com/dev/arena/client/isolate.html 确保给 JSON 一两分钟的时间来加载（慢速服务器）。

标签： javascript 3d textures three.js

【解决方案1】：

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

【讨论】：

奇怪，我使用three.js（v3.1）提供的导出器插件直接从blender导出了文件。除了简单地打开 .blend 文件并导出它之外，我还需要做些什么吗？
其实你可以试试最新版本的exporter，因为最新的exporter似乎有改进：github.com/mrdoob/three.js/tree/dev/utils/exporters/blender/…

【解决方案2】：

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

【讨论】：

【解决方案3】：

您必须显示的不是元数据而是材质数组，默认情况下搅拌器导出器不会保存纹理，如果它错过了材质然后尝试 this tutorial 的 2-2。

【讨论】：