2012-09-24 125 views
0

使用与Three.js打包的混合器导出器,我从this tutorial导出了.blend文件。我是一个巨大的小白,当谈到搅拌机所以我所做的很简单:Three.js JSONLoader;纹理未加载

  1. 打开文件,并与出口
  2. 打开UV /图像编辑器
  3. 保存的副本导出它旁边的出口JSON(使用正确的名称)
  4. 修改图像的每个纹理有维度是2

功率所以我只是想看看我是否能加载这个对象的水平在一个实验中走来走去我工作恩。网格加载正常,但没有纹理。我修改Three.js源代码以创建纹理图像(在Loader源代码中)以确保URL是正确的,并且图像确实加载了它们的内容,从而执行console.log

下面是代码:

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": 1materials数组实际上是一个长度为74。我不知道有足够的了解格式知道这是一个问题或没有。

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

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的督察后,我发现在我的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] - [email protected]://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] - [email protected]://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] - [email protected]://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] - [email protected]://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的督察我已经退出有关已失败的实际调用多一点信息。这里是working "649" texturebroken "rust" texture的调试信息,虽然纹理不会显示在链接的页面上,如果数据有帮助的话,数据就会全部存在(纹理显示在隔离页面上的WebGL-Inspector上,而不是导出的页面我链接)。

+0

您可以创建一个独立的测试吗?很难深入了解您目前的设置。 – mrdoob

+0

@mrdoob我从这里复制了示例:http://www.aerotwist.com/tutorials/getting-started-with-three-js/并将我的代码添加到页面的最底部(也删除了球体并制作了演示更大)。可以在这里看到独立的测试:http://static.pantherdev.com/dev/arena/client/isolate.html确保给JSON加载好一两分钟(慢速服务器)。 – Chad

回答

0

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

1

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

+0

奇怪的是,我使用three.js(v3.1)提供的导出器插件直接从搅拌器导出文件。除了简单地打开'.blend'文件并将其导出外,还有更多需要做的事吗? – Chad

+0

实际上,您可以尝试使用最新版本的出口商,因为最新的出口商似乎有所改进:https://github.com/mrdoob/three.js/tree/dev/utils/exporters/blender/2.63/scripts/addons/io_mesh_threejs – Gero3

+0

刚刚尝试过最新的出口商,没有变化。 – Chad

0

您必须显示不是元数据而是材质数组,如果材料错过了,blender exporter默认不会保存纹理,然后尝试从this tutorial开始2-2。