三个J从js文件加载模型的纹理/材质

时间:2012-10-25 12:25:56

标签: three.js blender

  

可能重复:
  Three.js not possible to load textures

就ThreeJs和搅拌机而言,我是一个笨蛋,所以这似乎是一个愚蠢的问题。我正在尝试使用JSONLoader加载模型。我使用了threejs blender导出并将collada模型导出到js。但是我无法直接从文件中获取材料。

检查后,我发现js文件中缺少图像文件的属性,即“mapDiffuse”属性不存在。这是一个错误。如有任何建议?或者是否有其他方式加载材料?

P.S这是我下载的collada模型,所以提供了纹理图像,虽然blendor导出没有注意到它。

我的模型js文件的一部分

{

"metadata" :
{
    "formatVersion" : 3.1,
    "generatedBy"   : "Blender 2.64 Exporter",
    "vertices"      : 1172,
    "faces"         : 2209,
    "normals"       : 736,
    "colors"        : 0,
    "uvs"           : [1722],
    "materials"     : 1,
    "morphTargets"  : 0,
    "bones"         : 0
},

"scale" : 1.000000,

"materials" : [ {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "material_2_81_0",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
    "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
    "colorSpecular" : [0.5, 0.5, 0.5],
    "depthTest" : true,
    "depthWrite" : true,
    "shading" : "Lambert",
    "specularCoef" : 50,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
},
.
.
.
.
.

"vertices" : [1159.45,531.608,-1808.68,......]
"morphTargets" : [],
"normals" : [-0.101077,0,-0.994873,......]
"colors" : [],
"uvs" : [[0,0,1,0,0,1,....]
"faces" : [42,0,1,2,0,0,1,2,0,1,2,42,0...]

"bones" : [],

"skinIndices" : [],

"skinWeights" : [],

"animation" : {}
}

谢谢

1 个答案:

答案 0 :(得分:1)

我会指出你不久前回答的 this question ,这几乎完全相同。我不确定是否可以仅使用文件来加载您的材料。我唯一幸运的方法是从我的代码中手动加载纹理然后应用它们。只需使用导出器导出几何体和UV贴图,而不必担心导出纹理。只需将它们收集起来,如果您在本地运行,请确保使用的是服务器,否则无法从磁盘加载图像。此时,加载模型并应用纹理是非常简单的代码。为了将来参考,您还应该发布用于加载模型的代码。您需要利用给定函数的参数来传递回调,以便在完全加载之前不要尝试渲染任何内容。

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', null, 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);
            });
        });
});