三个Js从js文件中加载模型的纹理/材质[重复]

Question

可能重复：
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" : {}
}

谢谢

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