Three.jsにパッケージ化されたブレンダーエクスポーターを使用して、このチュートリアル.blend
からファイルをエクスポートしました。私はブレンダーに関しては巨大な初心者なので、私がしたことは単純でした:
- ファイルを開き、エクスポーターでエクスポートします
- UV/画像エディタを開きます
- エクスポートされたJSONの横に各テクスチャのコピーを保存します(正しい名前を使用)
- 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
配列の長さが実際に74であると表示されていることに気付きましたmaterials
。これが問題であるかどうかを知るには、形式について十分にわかりません。
これで、レンダリングすると、テクスチャが空白になっているはずの場所を確認できます。
(ソース:pantherdev.com)
読み込みに時間がかからないことを確認するのを待って、インスタンス化するマテリアルを変更し、メッシュをスケーリングしないようにし、three.jsにログを入れて画像が読み込まれるようにしました(実際に読み込まれています)。
よく見ると、少なくとも1つのテクスチャが表示されていることがわかります。
(ソース:pantherdev.com)
何が間違っているのか、次に何を試すのかわかりません。
ライブデモを見るのに役立つ場合は、ここで試してみることができますが、私のサーバーはリビングルームの単なるボックスであるため、地下鉄のJSONを読み込むのに1〜2分かかる場合があります。正確にはネットワーク速度の悪魔ではありません。
このような長い投稿をお詫び申し上げます。私が持っていたすべての情報を提供したかっただけです。
編集
テクスチャへの絶対パスを使用しようとしmapDifuse
ましたが、JSONのマテリアルのプロパティを変更して問題を修正しようとしたが、役に立たなかった。
編集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 onリンクしたエクスポートされたページではなく、分離ページ)。