Question

我有一个增强现实的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);
            });

我将此添加到标记对象，因为我正在使用标记，如果我显示标记我想在标记上（或在其上方）绘制trex。

trex模型与此相同，但我在混合器中打开它并使用最新版本的blender到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格式加载文件然后显示纹理不起作用。

非常感谢！

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

Answer 2

此解决方案仅适用于以下版本：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 3

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

Three.js无法加载纹理

3 个答案: