Three.js无法加载纹理 [英] Three.js not possible to load textures

问题描述

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

I have an Three.js project with augmented reality and now I try to load a model with textures. For some reason my model is black and I have no textures. I checked the box in blender to export the images, I also see that in the .js file of the t-rex (model I'm using) that it lists the textures but my application wont load it.

编辑(添加的代码) 我用来加载模型的代码:

EDIT (ADDED CODE) The code I use to load the model:

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.

I add this to the marker object because I'm working with markers, If I show the marker I want a trex to be drawn on the marker (or right above it).

trex模型与此模型相同，但是我已经在Blender中将其打开，并且将最新版本的Blender用于Three.js导出器:

The trex model is the same as this one, but I've opened it in blender and used the latest version of blender to three.js exporter: http://alteredqualia.com/three/examples/webgl_trex.html

我的trex.json文件也看起来像这样:

Also my trex.json file looks like this:

{

    "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格式加载文件然后显示纹理不起作用.

I've tryed drawing a box and then add textures, that works but loading the file from json format and then displaying the textures doesnt work.

非常感谢！

推荐答案

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

This solution only works with the following releases: r58 ~ r69
Please check comments section and THREE.js migrations page for more information

我没有像您尝试的那样很好地导出纹理.我会尝试仅使用JSON导出器导出几何和uv映射并自己处理加载纹理.除非有人有更优雅的解决方案供您使用.我已经能够加载纹理，然后在回调中创建材质并使用加载器从JSON获取几何.然后，在加载程序的回调中，使用几何图形和先前创建的材料创建网格.这是一些示例代码:

I have had not so good luck exporting textures like you are trying. I would try just using the JSON exporter to export your geometry and uv mapping and handle loading textures yourself. Unless someone has a more elegant solution for you to use. I have been able to load up my textures, then in the callback create a material and use the loader to get the geometry from the JSON. Then in the loader's callback you create your mesh using both the geometry and the material you created earlier. Here is some example code:

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

这篇关于Three.js无法加载纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！