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

问题描述

我有一个带有增强现实的 Three.js 项目，现在我尝试加载一个带有纹理的模型.出于某种原因，我的模型是黑色的，我没有纹理.我检查了搅拌机中的框以导出图像，我还在 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 exporter:http://alteredqualia.com/three/examples/webgl_trex.html

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 迁移页面以获取更多信息

我没有像您尝试的那样导出纹理那么好运.我会尝试只使用 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屋！