2

我有一个带有增强现实的 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 到 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 格式加载文件，然后显示纹理不起作用。

非常感谢！

4

3 回答 3

5

我认为您正在寻找的是从您的 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);
 });
于 2013-02-17T18:17:47.153 回答
2

此解决方案仅适用于以下版本：r58 ~ r69
请查看评论部分和THREE.js 迁移页面以获取更多信息

我没有像您尝试的那样导出纹理的好运。我会尝试只使用 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);
            });
        });
});
于 2012-10-12T21:19:30.807 回答
-1

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

于 2015-07-03T18:39:31.853 回答