在Three.js r69中加载json模型时,材料无法正确显示

时间:2014-11-02 01:57:39

标签: json model three.js blender material

使用Three.js插件以json格式从Blender导出模型。使用JSONLoader加载它,标准的东西:

  var loader = new THREE.JSONLoader();
  loader.load(path, function (geometry, materials) {
  materials.forEach(function (material) {
       material.skinning = true;
  });
  var material = new THREE.MeshFaceMaterial(materials);
  var mesh = new THREE.SkinnedMesh(geometry, material);

现在问题在模型中没有显示出来。如果我更改材料:

  var loader = new THREE.JSONLoader();
  loader.load(path, function (geometry, materials) {
  materials.forEach(function (material) {
       material.skinning = true;
  });
  var material = new THREE.MeshLambertMaterial();
  var mesh = new THREE.SkinnedMesh(geometry, material);

一切正常,网格按预期显示。

这里是省略了uvs,顶点,面和法线的JSON文件的内容:

{

    "metadata": {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.7 Exporter",
        "vertices"      : 774,
        "faces"         : 691,
        "normals"       : 751,
        "colors"        : 0,
        "uvs"           : [404],
        "materials"     : 2,
        "morphTargets"  : 0,
        "bones"         : 0
    },

        "scale" : 1.000000,

        "vertices" : ...,
        "faces"    : ...,
        "uvs"      : ...,
        "normals"  : ...,
        "skinIndices"  : [],
        "skinWeights"  : [],
        "morphTargets" : [],

        "bones"      : [],
        "animations" : [],

        "colors"    : [],
        "materials" : [
            {
                "DbgColor": 15658734,
                "DbgIndex": 0,
                "DbgName": "Crystal",
                "blending": "NormalBlending",
                "colorAmbient": [0.800000011920929, 0.800000011920929, 0.800000011920929],
                "colorDiffuse": [0.800000011920929, 0.800000011920929, 0.800000011920929],
                "colorEmissive": [0.0, 0.0, 0.0],
                "colorSpecular": [0.25, 0.25, 0.25],
                "depthTest": true,
                "depthWrite": true,
                "mapDiffuse": "Cristal_C_CM.png",
                "mapDiffuseWrap": ["repeat", "repeat"],
                "shading": "Lambert",
                "specularCoef": 33,
                "transparency": 1.0,
                "transparent": false,
                "vertexColors": false
            },
            {
                "DbgColor": 15597568,
                "DbgIndex": 1,
                "DbgName": "tower",
                "blending": "NormalBlending",
                "colorAmbient": [0.800000011920929, 0.800000011920929, 0.800000011920929],
                "colorDiffuse": [0.800000011920929, 0.800000011920929, 0.800000011920929],
                "colorEmissive": [0.0, 0.0, 0.0],
                "colorSpecular": [0.4180000126361847, 0.31944116950035095, 0.1504800170660019],
                "depthTest": true,
                "depthWrite": true,
                "mapDiffuse": "rock_CM_01.png",
                "mapDiffuseWrap": ["repeat", "repeat"],
                "mapNormal": "rock_NM_02.png",
                "mapNormalFactor": 0.3500420153141022,
                "mapNormalWrap": ["repeat", "repeat"],
                "shading": "Phong",
                "specularCoef": 511,
                "transparency": 1.0,
                "transparent": false,
                "vertexColors": false
            }
        ]


}

任何想法都会非常感激。

1 个答案:

答案 0 :(得分:0)

原来问题在于设置

material.skinning = true;

正确显示删除此线型。这看起来像个错误。

对于遇到同样问题的人来说,有两种简单的方法可以解决它:   - 使用不同的代码加载蒙皮/静态资产   - 使用一段代码,根据加载的内容生成不同的材质和网格类型。

第二,这是我使用的片段:

        assetManager.registerLoader("three.js", function (path, callback) {
            var loader = new THREE.JSONLoader();
            loader.load(path, function (geometry, materials) {
                //is it skinned?
                var isSkinned = geometry.skinIndices !== void 0 && geometry.skinIndices.length > 0;
                if (isSkinned) {
                    materials.forEach(function (material) {
                        material.skinning = true;
                    });
                }
                var faceMaterial = new THREE.MeshFaceMaterial(materials);
                var asset = {
                    material: faceMaterial,
                    geometry: geometry,
                    create: function () {
                        var mesh;
                        if (isSkinned) {
                            mesh = new THREE.SkinnedMesh(geometry, faceMaterial);
                        } else {
                            mesh = new THREE.Mesh(geometry, faceMaterial);
                        }
                        mesh.castShadow = true;
                        mesh.receiveShadow = false;
                        //
                        return mesh;
                    }
                };
                callback(asset);
            });
        });