在 Three.js r69 中加载 json 模型时，材质无法正确显示答案

【问题标题】：Material does not display properly when loading json model in Three.js r69在 Three.js r69 中加载 json 模型时，材质无法正确显示
【发布时间】：2014-12-28 23:43:54
【问题描述】：

使用 Three.js 插件从 Blender 中以 json 格式导出模型。使用 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);

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

这是 JSON 文件的内容，省略了 uvs、顶点、面和法线：

{

    "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
            }
        ]


}

任何想法将不胜感激。

【问题讨论】：

标签： json three.js model blender

【解决方案1】：

原来问题出在设置上

material.skinning = true;

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

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

其次，这是我使用的 sn-p：

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

【讨论】：