Webgl Three.js无法加载纹理

我有一个带有增强现实的Three.js项目，现在我尝试加载带有纹理的模型。出于某种原因，我的模型是黑色的，我没有纹理。我选中了blender中的复选框来导出图像，我还在t-rex（我使用的模型）的.js文件中看到它列出了纹理，但我的应用程序不会加载它

编辑（添加代码） 我用于加载模型的代码：

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);
            });

我将其添加到marker对象，因为我正在使用markers，如果我显示marker，我希望在marker（或其正上方）上绘制trex

trex模型与此相同，但我已在blender中打开了它，并将最新版本的blender用于three.js exporter：

此外，我的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格式加载文件，然后显示纹理不起作用

非常感谢

此解决方案仅适用于以下版本：r58~r69
请查看评论部分和了解更多信息

我没有像你尝试的那样幸运地导出纹理。我会尝试使用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);
            });
        });
});

---

我认为您需要的是从json加载纹理/材质。JSONLoader实际上会为您处理这个问题。相应的物料作为加载器回调的第二个参数返回。当然，这只有在json保存材料数据的情况下才起作用（在您的例子中是这样的）

---

您是否尝试为纹理授予文件权限？。。。此文件由blender生成，因此您需要授予该文件的权限。

问题代码在哪里？我在main.js中找不到对trex.json的引用。此外，您可以粘贴模型加载代码，而不仅仅是提供一个巨大的归档文件，因此，如果有什么气味，可以很容易地快速浏览。下载ZIP可能会让许多潜在的帮助者感到沮丧，最好使用小型独立测试用例，而不是完全成熟的项目。您是在本地还是在Web服务器上尝试此操作？@Tapio我这样做是因为我怀疑代码中有其他错误。在第151行搜索trex.json。无论如何，我会更新问题，谢谢@Neil是的，这是一个Web服务器（在本地由xampp托管），顺便问一下，js控制台中是否有任何错误？此外，我还记得，在某个时刻，我无法加载具有法线贴图的对象。一个解决方案是在three.js Loader中添加一个单行补丁，使其使用Phong材质（在开发版本中也有法线贴图），而不是专用的法线贴图着色器，但它在某个时候又开始工作了。这对我来说部分有效。它是通过纹理属性，但不是贴图/图像。问题是map/image甚至没有出现在导出的JS文件中，因此看起来像是用户/混合器/导出器问题……在r61版本中，THREE.ImageUtils.loadTexture（）的映射参数（此处为null）不适用于CanvasRenderer（）。将不会渲染网格。正确的参数应该是new THREE.UVMapping（）。请注意，自r70以来，您不再使用

new THREE.UVMapping（）

，而是

THREE.UVMapping

（这成为一个常量）

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);
 });