0

使用与 Three.js 打包的搅拌机导出器，我从本教程.blend中导出了文件。在搅拌机方面，我是个大菜鸟，所以我所做的很简单：

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

所以我只是想看看我是否可以加载这个对象作为我正在做的实验中四处走动的关卡。网格加载正常，但没有纹理。我修改了 Three.js 源代码，console.log在它创建纹理图像（在Loader源代码中）时执行一个操作，以确保 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": 1当materials数组实际长度为 74 时。我对格式知之甚少，无法知道这是否是一个问题。

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

地铁 - 无纹理
（来源：pantherdev.com）

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

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

地铁 - 纹理加载
（来源：pantherdev.com）

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

如果观看现场演示会有所帮助，您可以在此处尝试，尽管加载地铁 JSON 可能需要一两分钟，因为我的服务器只是客厅中的一个盒子；不完全是网络速度恶魔。

任何帮助表示赞赏，抱歉这么长的帖子；只是想提供我所拥有的所有信息。

编辑

我尝试使用纹理的绝对路径，甚至修改mapDifuseJSON 中材质的属性来尝试解决问题，但无济于事。

编辑 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 有一些不正确或缺失的值是正确的，但是我不确定如何纠正这种情况。就像我在评论中提到的（以及在这篇文章的开头），我.blend使用与 Three.js 打包的导出器导出了文件；我还需要做什么？

编辑 3

使用 WebGL-Inspector，我提取了更多关于失败的实际调用的信息。这是工作“649”纹理和损坏的“锈”纹理的调试信息，尽管纹理没有显示在链接页面上，如果它对某人有帮助，数据就在那里（纹理确实显示在 WebGL-Inspector 上隔离页面，只是不在我链接的导出页面上）。

4

3 回答 3

1

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

于 2012-09-27T17:06:40.157 回答
0

您必须显示的不是元数据而是材质数组，默认情况下，如果材质中缺少纹理，则搅拌机导出器不会保存纹理，然后尝试本教程中的 2-2 。

于 2014-02-04T22:47:10.550 回答
0

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

于 2012-11-05T17:50:38.787 回答