使用与Three.js打包的混合器导出器,我从this tutorial导出了.blend
文件。我是一个巨大的小白,当谈到搅拌机所以我所做的很简单:Three.js JSONLoader;纹理未加载
- 打开文件,并与出口
- 打开UV /图像编辑器
- 保存的副本导出它旁边的出口JSON(使用正确的名称)
- 修改图像的每个纹理有维度是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": 1
当materials
数组实际上是一个长度为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" texture和broken "rust" texture的调试信息,虽然纹理不会显示在链接的页面上,如果数据有帮助的话,数据就会全部存在(纹理显示在隔离页面上的WebGL-Inspector上,而不是导出的页面我链接)。
您可以创建一个独立的测试吗?很难深入了解您目前的设置。 – mrdoob
@mrdoob我从这里复制了示例:http://www.aerotwist.com/tutorials/getting-started-with-three-js/并将我的代码添加到页面的最底部(也删除了球体并制作了演示更大)。可以在这里看到独立的测试:http://static.pantherdev.com/dev/arena/client/isolate.html确保给JSON加载好一两分钟(慢速服务器)。 – Chad