Three.js JSONLoader; 텍스처가로드되지 않음

Question

Three.js와 함께 제공되는 블렌더 익스포터를 사용하여 this tutorial에서 .blend 파일을 내 보냈습니다.

1. 를 열고 파일 및 수출
2. 열고 UV/이미지 편집기
3. 저장의 사본을 내보낼 : 그것은 간단했다 그래서 내가 한 믹서기에 관해서 나는 큰 멍청한 놈이야 수정 이미지를
4. (정확한 이름을 사용) 내 보낸 JSON 옆에 각각 질감이

의 전력이다 치수를 가지고하는 것은 그래서 난 그냥하는 수준으로이 객체를로드 할 수 있는지보고 싶어 실험을하다가 걸어 다닌다. 나는 일하고있다. 에. 메쉬가 잘로드되지만 텍스처가 없습니다. 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); 

나 자신이 내 자신의 로더를 사용하여 JSON 데이터를로드하기 때문에 내가 createModel를 사용 : 여기

는 코드입니다. 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을 말한다 고지해야 다음은 메타 데이터이다.

이제 렌더링 할 때 텍스처가 비어 있어야하는 곳을 볼 수 있습니다.

Subway - No Textures http://static.pantherdev.com/misc/subway.png

나는 그들이 단지로드하는 데 시간이 오래 걸릴하지 않았다 보장하기 위해 기다리고 시도

, 이미지를 보장하기 three.js를에 로그를 넣어, 메쉬를 확장하지, 내가 인스턴스화 자료를 시도 시도 변경 시도 로딩 중입니다.

찾고 가까이 나는 적어도 한 질감이 나타나지 않는 것을 볼 수 있습니다

Subway - Texture Loaded http://static.pantherdev.com/misc/subway2.png

내가 잘못하고 있어요, 또는 다음에 무슨 시도 모르겠어요.

라이브 데모를 보는 데 도움이된다면 try it here 수 있습니다. 지하실 JSON을로드하는 데 1-2 분이 걸릴 수 있지만 내 서버는 거실에있는 상자이므로, 정확하게 네트워크 속도 악마는 아닙니다.

도움이 되시길 바랍니다. 내가 가지고있는 모든 정보를주고 싶었습니다.

---

편집

나는 텍스처에 절대 경로를 사용하려고, 심지어는 no로 문제를 시도하고 해결하기 위해 지금까지 JSON에서 재료의 mapDifuse 속성을 수정하기로했다 없다 이익. 나는 프레임을 캡처 할 때

[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 

, 심지어 얻을 :

---

편집 2

는 WebGL이 경위와 함께 좀 더 디버깅을 수행 한 후 내 웹 콘솔에서 다음과 같은 오류를 발견 추가 정보 :

[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이 속성을 사용하여. working "649" texture과 broken "rust" texture에 대한 디버그 정보는 다음과 같습니다. 링크 된 페이지에 텍스처가 표시되지 않습니다. 누군가가 도움이된다면 데이터가 모두 있습니다 (텍스처가 격리 페이지의 WebGL- 검사기에 표시됩니다. 내가 링크 된 내 보낸 페이지).

Answer 1

나는 이것을 포기하려고 노력했지만, 모델 자체가 부적절하게 생성되었다고 생각합니다. UV는 모델에 올바르게 매핑되지 않은 것 같으며 내보내기시 손상되었습니다. 나는 그걸 작동시키지 못했지만 블렌더에로드되었을 때와는 분명히 다른 다른 텍스처 모델을로드 할 수있었습니다.

Answer 2

일부 자료를 사용할 때 webgl 검사기가 오류를 발생시키기 때문에 uvs가 일부 자료에 대해 완료되지 않은 것처럼 보입니다. 나는 정확히 무슨 일이 일어 났는지 조사 할 필요가 있지만 그것은 당신의 문제가있는 것처럼 보입니다. 문제는 아마도 JSON 파일 일 것입니다.

Answer 3

메타 데이터가 아니라 재료 배열을 표시해야합니다. 블렌더는 자료가 누락 된 경우 기본적으로 텍스처를 저장하지 않고 this tutorial에서 2-2를 시도합니다.