Three.js 无法加载纹理答案

【问题标题】：Three.js not possible to load texturesThree.js 无法加载纹理
【发布时间】：2012-10-03 04:49:09
【问题描述】：

我有一个带有增强现实的 Three.js 项目，现在我尝试加载一个带有纹理的模型。出于某种原因，我的模型是黑色的，我没有纹理。我选中了搅拌机中的框以导出图像，我还在 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);
            });

我将它添加到标记对象，因为我正在使用标记，如果我显示标记，我希望在标记上（或正上方）绘制一个 trex。

trex模型和这个一样，但是我已经在blender中打开了，用最新版本的blender to three.js exporter：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 格式加载文件然后显示纹理不起作用。

非常感谢！

【问题讨论】：

问题代码在哪里？我在 main.js 中找不到对 trex.json 的引用。此外，您可以粘贴您的模型加载代码，而不是仅仅提供一个巨大的存档，这样如果那里有异味，很容易快速浏览。下载 zip 文件可能会让许多潜在的帮助者感到沮丧，因此首选小型独立测试用例而不是成熟的项目。
你是在本地还是在网络服务器上尝试这个？
@Tapio 我这样做是因为我怀疑代码中还有其他问题。在第 151 行附近搜索 trex.json。无论如何，我会更新问题，谢谢！
@Neil 是的，它是一个网络服务器（使用 xampp 本地托管）
顺便说一句，js 控制台有什么错误吗？另外，我只记得在某些时候我无法加载带有法线贴图的对象。一种解决方案是向 three.js 加载器添加一行补丁，使其使用 Phong 材质（在开发版本中也具有法线贴图）而不是专用的法线贴图着色器，但它在某个时候又开始工作了。

标签： webgl three.js augmented-reality

【解决方案1】：

我认为您正在寻找的是从您的 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);
 });

【讨论】：

这部分对我有用。它通过纹理属性，但不是地图/图像。问题是地图/图像甚至没有出现在导出的 JS 文件中，所以看起来像是用户/混合器/导出器问题...

【解决方案2】：

此解决方案仅适用于以下版本：r58 ~ r69
请查看 cmets 部分和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);
            });
        });
});

【讨论】：

在 r61 版本中，此处为 null 的 THREE.ImageUtils.loadTexture() 的映射参数不适用于 CanvasRenderer()。网格将不会被渲染。正确的参数应该是 new THREE.UVMapping()。
请注意，从 r70 开始，您不再使用 new THREE.UVMapping()，而是使用 THREE.UVMapping（这已成为常量）

【解决方案3】：

您是否尝试过授予纹理文件权限？...此文件由搅拌机生成，因此您需要授予该文件权限。

【讨论】：