Three.js不可能加载纹理

我有一个Three.js项目与增强现实，现在我尝试加载具有纹理的模型。出于某种原因，我的模型是黑色的，没有纹理。我在搅拌机中检查了输出图像的框，我还看到在t-rex（模型中使用的）的.js文件中列出了纹理，但我的应用程序不会加载它。Three.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模型是一样的，因为这一个，但我已经在搅拌机打开它，并使用了最新版本的搅拌器来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":

我tryed画一个框，然后添加纹理，即工作，但加载从JSON格式的文件，然后显示纹理不工作。

非常感谢！

来源

2012-10-12 DanFritz

问题代码在哪里？我无法在main.js中找到对trex.json的引用。另外，不要只是给一个巨大的存档，你可以粘贴你的模型加载代码，所以很容易快速浏览是否有东西在那里闻起来。下载zip文件可能会让很多潜在的帮手感到沮丧，并且一个小型的独立测试用例可能是首选，而不是一个完整的项目。 – Tapio

您是在本地或在网络服务器上尝试此操作吗？ – Neil

@Tapio我这样做是因为我怀疑代码中有其他错误。在第151行附近搜索trex.json。无论如何，我会更新这个问题，谢谢！ – DanFritz

此解决方案仅与以下版本的工作原理：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); 
      }); 
     }); 
});

来源

2012-10-12 21:19:30

在版本r61中，此处为null的THREE.ImageUtils.loadTexture（）的映射参数对CanvasRenderer（）不起作用。网格将不会呈现。正确的参数应该是新的THREE.UVMapping（）。 –

请注意，自r70以来，您不再使用'new THREE.UVMapping（）'，而是'THREE.UVMapping'（这成为一个常量） – zessx

我认为你要找的是从你的json加载纹理/材质。 JSONLoader实际上为你处理。相应的材料作为加载程序回调的第二个参数返回。当然，只有当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-17 18:17:47 Kilghaz

这对我来说是部分工作的。它通过纹理属性，但不包括地图/图像。问题是地图/图像甚至没有出现在导出的JS文件中，所以它看起来像一个用户/搅拌器/导出器的问题... – Spider

-1

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

来源

2015-07-03 18:39:31 user2769514

Three.js不可能加载纹理

回答

相关问题