Three.js에서 텍스처를로드 할 수 없습니다.

Question

증강 현실을 사용하는 Three.js 프로젝트가 있으며 이제 텍스처가있는 모델을로드하려고합니다. 웬일인지 나의 모델은 검은 색이다. 나는 질감이 없다. 나는 이미지를 내보내는 블렌더 박스를 체크했다. t-rex (모델이 사용하고있는 모델)의 .js 파일에서 텍스쳐를 나열했지만 내 애플리케이션은 그것을로드하지 않는다.

EDIT (ADDED CODE) I 모델을로드하는 데 사용하는 코드는 : 나는 마커 함께 일하고 있어요 때문에

new THREE.JSONLoader().load("models/trex.json", function(geometry) { 
       var material = new THREE.MeshFaceMaterial(); 

       var dino = new THREE.Mesh(geometry, material); 

       dino.position.z = -50; 
       dino.scale.x = dino.scale.y = dino.scale.z = 2; 
       dino.updateMatrix(); 
       dino.overdraw = true; 
       marker.object3d.add(dino); 
      }); 

나는 마커를 보여 주면 내가 원하는 마커 객체에 이것을 추가 마커에 그려지는 trex (또는 바로 위에).

TREX 모델이 하나와 동일하지만 믹서기를 열고 수출 three.js를 위해 블렌더의 최신 버전을 사용했습니다 : http://alteredqualia.com/three/examples/webgl_trex.html

이 또한 내 trex.json 파일은 다음과 같다 :

{ 

    "metadata" : 
    { 
     "formatVersion" : 3.1, 
     "generatedBy" : "Blender 2.63 Exporter", 
     "vertices"  : 23273, 
     "faces"   : 23268, 
     "normals"  : 20842, 
     "colors"  : 0, 
     "uvs"   : [11497], 
     "materials"  : 1, 
     "morphTargets" : 0, 
     "bones"   : 0 
    }, 

    "scale" : 0.0500, 

    "materials": [ { 
    "DbgColor" : 15658734, 
    "DbgIndex" : 0, 
    "DbgName" : "Material.001", 
    "blending" : "NormalBlending", 
    "colorAmbient" : [0.2933282256126404, 0.2933282256126404, 0.2933282256126404], 
    "colorDiffuse" : [0.2933282256126404, 0.2933282256126404, 0.2933282256126404], 
    "colorSpecular" : [0.13438941538333893, 0.13438941538333893, 0.13438941538333893], 
    "depthTest" : true, 
    "depthWrite" : true, 
    "mapDiffuse" : "trex_image_copy.png", 
    "mapNormal" : "trex_image_bump.png", 
    "mapNormalFactor" : 12.0, 
    "mapSpecular" : "trex_image_spec.png", 
    "shading" : "Phong", 
    "specularCoef" : 511, 
    "transparency" : 1.0, 
    "transparent" : false, 
    "vertexColors" : false 
    }, 

    { 
    "DbgColor" : 15597568, 
    "DbgIndex" : 1, 
    "DbgName" : "Material", 
    "blending" : "NormalBlending", 
    "colorAmbient" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188], 
    "colorDiffuse" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188], 
    "colorSpecular" : [0.0, 0.0, 0.0], 
    "depthTest" : true, 
    "depthWrite" : true, 
    "mapDiffuse" : "trex_image_copy.png", 
    "mapLight" : "trex_image_eye.png", 
    "mapLightWrap" : ["repeat", "repeat"], 
    "shading" : "Lambert", 
    "specularCoef" : 1, 
    "transparency" : 1.0, 
    "transparent" : false, 
    "vertexColors" : false 
    }, 

    { 
    "DbgColor" : 60928, 
    "DbgIndex" : 2, 
    "DbgName" : "Material", 
    "blending" : "NormalBlending", 
    "colorAmbient" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188], 
    "colorDiffuse" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188], 
    "colorSpecular" : [0.0, 0.0, 0.0], 
    "depthTest" : true, 
    "depthWrite" : true, 
    "mapDiffuse" : "trex_image_copy.png", 
    "mapLight" : "trex_image_eye.png", 
    "mapLightWrap" : ["repeat", "repeat"], 
    "shading" : "Lambert", 
    "specularCoef" : 1, 
    "transparency" : 1.0, 
    "transparent" : false, 
    "vertexColors" : false 
    }], 

    "vertices": 

나는 상자를 그리기하고 있지만, JSON 형식의 파일을로드 한 후 나던 작업 텍스처를 표시 작동하는지, 텍스처를 추가 tryed했습니다.

고맙습니다.

이 솔루션은 다음 릴리스와 함께 작동

Answer 1

: R58 ~ R69
당신이하려고하는 것처럼 내가 그리 행운 수출 텍스처 있었다

자세한 내용은 코멘트 섹션 및 THREE.js migrations page을 확인하시기 바랍니다 . JSON 익스포터를 사용하여 지오메트리와 uv 매핑을 내보내고 텍스처를 직접로드하려고합니다. 누군가가 당신을 위해 더 우아한 해결책을 가지고 있지 않다면. 내 텍스처를 불러올 수 있었고 콜백에서 머티리얼을 만들고 JSON에서 도형을 가져 오기 위해 로더를 사용할 수있었습니다. 그런 다음 로더의 콜백에서 앞서 만든 지오메트리와 머티리얼 모두를 사용하여 메쉬를 만듭니다. 다음은 몇 가지 예제 코드입니다 :

var tex, mat, mesh; 

$(window).load(function() { 
    /** Load mesh from JSON, position, scale, add texture and add to scene */ 
    tex = THREE.ImageUtils.loadTexture('../img/texture.jpg', new THREE.UVMapping(), function() { 
      mat = new THREE.MeshPhongMaterial({ map: tex }); 
      loader.load('model.js', function (geo) { 
       mesh = new THREE.Mesh(geo, mat); 
       mesh.position.set(0, 0, 0); 
       mesh.scale.set(20, 20, 20); 
       // etc, etc 
       scene.add(mesh); 
      }); 
     }); 
}); 

Answer 2

당신이 찾고있는 것은 json에서 텍스처/재료를로드하는 것입니다. JSONLoader가 실제로이를 처리합니다. 해당 자료는 loader-callback의 두 번째 매개 변수로 반환됩니다. 이것은 json이 중요한 데이터를 보유하고있는 경우에만 작동합니다 (귀하의 경우).

new THREE.JSONLoader().load("models/trex.json", function(geometry, materials) { 
    var material = new THREE.MeshFaceMaterial(materials); 
    var dino = new THREE.Mesh(geometry, material); 

    dino.position.z = -50; 
    dino.scale.x = dino.scale.y = dino.scale.z = 2; 
    dino.updateMatrix(); 
    dino.overdraw = true; 
    marker.object3d.add(dino); 
}); 

Answer 3

텍스처에 파일 권한을 부여하려고 했습니까? ...이 파일은 블렌더에서 생성되었으므로 해당 파일에 대한 권한을 부여해야합니다.