导入的搅拌机模型在 three.js 场景中没有颜色

Imported blender model has no color in three.js scene

我在搅拌机中创建了一棵树并将其导出用于 three.js,模型显示但它只是黑白的。以原始颜色加载模型的正确方法是什么?

.json 文件:

{

"metadata": {
    "formatVersion" : 3.1,
    "generatedBy"   : "Blender 2.7 Exporter",
    "vertices"      : 112,
    "faces"         : 120,
    "normals"       : 112,
    "colors"        : 0,
    "uvs"           : [],
    "materials"     : 1,
    "morphTargets"  : 0,
    "bones"         : 0
},

    "scale" : 1.000000,

    "vertices" : [-0.00992976,0.0189682,-0.457544,-0.00992976,2.24961,-0.457544,0.243628,0.0189682,-0.335046,0.243628,2.24961,-0.335046,0.348655,0.0189682,-0.039309,0.348655,2.24961,-0.0393091,0.243628,0.0189682,0.256427,0.243628,2.24961,0.256427,-0.00992979,0.0189682,0.378926,-0.00992979,2.24961,0.378925,-0.263488,0.0189682,0.256427,-0.263488,2.24961,0.256427,-0.368515,0.0189682,-0.0393091,-0.368515,2.24961,-0.0393091,-0.263488,0.0189682,-0.335046,-0.263488,2.24961,-0.335046,-0.00992977,1.13429,-0.294023,0.144492,1.13429,-0.219419,0.208456,1.13429,-0.0393091,0.144492,1.13429,0.140801,-0.00992979,1.13429,0.215405,-0.164352,1.13429,0.140801,-0.228316,1.13429,-0.0393091,-0.164352,1.13429,-0.219419,0.014269,1.34001,-1.26876,0.0140304,8.49268,-0.039979,0.884602,1.41729,-0.870572,0.0423002,8.49268,-0.0282692,1.28303,1.34001,-7.56201e-08,0.05401,8.49268,5.83486e-07,0.884602,1.41729,0.870572,0.0423002,8.49268,0.0282704,0.0142689,1.34001,1.26876,0.0140304,8.49268,0.0399801,-0.856541,1.41729,0.870571,-0.0142394,8.49268,0.0282704,-1.25449,1.34001,-1.46209e-07,-0.0259491,8.49268,5.81262e-07,-0.856541,1.41729,-0.870572,-0.0142394,8.49268,-0.0282692,0.014269,2.62183,-1.07933,0.754626,2.66114,-0.740596,1.0936,2.62183,4.11613e-08,0.754626,2.66114,0.740595,0.0142689,2.62183,1.07933,-0.726565,2.66114,0.740595,-1.06507,2.62183,-1.88888e-08,-0.726565,2.66114,-0.740596,0.014269,3.86691,-0.895339,0.628376,3.86933,-0.614345,0.909608,3.86691,1.54595e-07,0.628376,3.86933,0.614345,0.0142689,3.86691,0.895339,-0.600315,3.86933,0.614345,-0.88107,3.86691,1.04782e-07,-0.600315,3.86933,-0.614345,0.014269,5.28293,-0.686081,0.484792,5.2434,-0.470761,0.70035,5.28293,2.83603e-07,0.484792,5.2434,0.470761,0.0142689,5.28293,0.686082,-0.456731,5.2434,0.470761,-0.671812,5.28293,2.45432e-07,-0.456731,5.2434,-0.470761,0.014269,6.8902,-0.448561,0.321815,6.80306,-0.307784,0.462831,6.8902,4.30035e-07,0.321815,6.80306,0.307785,0.014269,6.8902,0.448562,-0.293754,6.80306,0.307785,-0.434293,6.8902,4.05078e-07,-0.293754,6.80306,-0.307784,-0.00183953,6.78649,-0.640033,0.437564,6.70242,-0.439164,0.638194,6.78649,4.20225e-07,0.437564,6.70242,0.439165,-0.00183959,6.78649,0.640034,-0.440766,6.70242,0.439165,-0.641873,6.78649,3.84616e-07,-0.440766,6.70242,-0.439164,0.648509,5.14277,-0.65011,0.945623,5.17923,2.76221e-07,0.648509,5.14277,0.65011,-0.00183961,5.17923,0.947463,-0.651711,5.14277,0.65011,-0.949302,5.17923,2.23508e-07,-0.651711,5.14277,-0.65011,-0.00183953,5.17923,-0.947462,0.938143,3.76869,-0.939744,1.36773,3.7632,1.64209e-07,0.938143,3.76869,0.939744,-0.00183962,3.76321,1.36957,-0.941345,3.76869,0.939744,-1.37141,3.7632,8.80112e-08,-0.941345,3.76869,-0.939744,-0.0018395,3.7632,-1.36957,1.12806,2.5605,-1.12966,1.64452,2.51813,6.17132e-08,1.12806,2.5605,1.12966,-0.00183965,2.51813,1.64636,-1.13127,2.5605,1.12966,-1.6482,2.51813,-2.98841e-08,-1.13127,2.5605,-1.12966,-0.0018395,2.51813,-1.64636,1.32896,1.31665,-1.33056,1.93731,1.23631,-5.12727e-08,1.32896,1.31665,1.33056,-0.0018397,1.23631,1.93915,-1.33217,1.31665,1.33056,-1.94099,1.23631,-1.5916e-07,-1.33217,1.31665,-1.33056,-0.00183953,1.23631,-1.93915],
    "faces"    : [35,16,1,3,17,0,0,1,2,3,35,17,3,5,18,0,3,2,4,5,35,18,5,7,19,0,5,4,6,7,35,19,7,9,20,0,7,6,8,9,35,20,9,11,21,0,9,8,10,11,35,21,11,13,22,0,11,10,12,13,34,3,7,5,0,2,6,4,34,11,9,7,0,10,8,6,34,15,13,11,0,14,12,10,34,3,1,15,0,2,1,14,34,3,11,7,0,2,10,6,34,3,15,11,0,2,14,10,35,23,15,1,16,0,15,14,1,0,35,22,13,15,23,0,13,12,14,15,34,0,12,14,0,16,17,18,34,8,10,12,0,19,20,17,34,4,6,8,0,21,22,19,34,0,2,4,0,16,23,21,34,0,8,12,0,16,19,17,34,0,4,8,0,16,21,19,35,0,16,17,2,0,16,0,3,23,35,2,17,18,4,0,23,3,5,21,35,4,18,19,6,0,21,5,7,22,35,6,19,20,8,0,22,7,9,19,35,8,20,21,10,0,19,9,11,20,35,10,21,22,12,0,20,11,13,17,35,16,0,14,23,0,0,16,18,15,35,12,22,23,14,0,17,13,15,18,35,72,25,27,73,2,24,25,26,27,35,73,27,29,74,2,27,26,28,29,35,74,29,31,75,2,29,28,30,31,35,75,31,33,76,2,31,30,32,33,35,76,33,35,77,2,33,32,34,35,35,77,35,37,78,2,35,34,36,37,34,27,31,29,2,26,30,28,34,35,33,31,2,34,32,30,34,39,37,35,2,38,36,34,34,27,25,39,2,26,25,38,34,27,35,31,2,26,34,30,34,27,39,35,2,26,38,34,35,79,39,25,72,2,39,38,25,24,35,78,37,39,79,2,37,36,38,39,34,24,36,38,2,40,41,42,34,32,34,36,2,43,44,41,34,28,30,32,2,45,46,43,34,24,26,28,2,40,47,45,34,24,32,36,2,40,43,41,34,24,28,32,2,40,45,43,35,111,40,41,104,2,48,49,50,51,35,104,41,42,105,2,51,50,52,53,35,105,42,43,106,2,53,52,54,55,35,106,43,44,107,2,55,54,56,57,35,107,44,45,108,2,57,56,58,59,35,108,45,46,109,2,59,58,60,61,35,110,47,40,111,2,62,63,49,48,35,109,46,47,110,2,61,60,63,62,35,103,48,49,96,2,64,65,66,67,35,96,49,50,97,2,67,66,68,69,35,97,50,51,98,2,69,68,70,71,35,98,51,52,99,2,71,70,72,73,35,99,52,53,100,2,73,72,74,75,35,100,53,54,101,2,75,74,76,77,35,102,55,48,103,2,78,79,65,64,35,101,54,55,102,2,77,76,79,78,35,95,56,57,88,2,80,81,82,83,35,88,57,58,89,2,83,82,84,85,35,89,58,59,90,2,85,84,86,87,35,90,59,60,91,2,87,86,88,89,35,91,60,61,92,2,89,88,90,91,35,92,61,62,93,2,91,90,92,93,35,94,63,56,95,2,94,95,81,80,35,93,62,63,94,2,93,92,95,94,35,87,64,65,80,2,96,97,98,99,35,80,65,66,81,2,99,98,100,101,35,81,66,67,82,2,101,100,102,103,35,82,67,68,83,2,103,102,104,105,35,83,68,69,84,2,105,104,106,107,35,84,69,70,85,2,107,106,108,109,35,86,71,64,87,2,110,111,97,96,35,85,70,71,86,2,109,108,111,110,35,64,72,73,65,2,97,24,27,98,35,65,73,74,66,2,98,27,29,100,35,66,74,75,67,2,100,29,31,102,35,67,75,76,68,2,102,31,33,104,35,68,76,77,69,2,104,33,35,106,35,69,77,78,70,2,106,35,37,108,35,71,79,72,64,2,111,39,24,97,35,70,78,79,71,2,108,37,39,111,35,56,87,80,57,2,81,96,99,82,35,57,80,81,58,2,82,99,101,84,35,58,81,82,59,2,84,101,103,86,35,59,82,83,60,2,86,103,105,88,35,60,83,84,61,2,88,105,107,90,35,61,84,85,62,2,90,107,109,92,35,63,86,87,56,2,95,110,96,81,35,62,85,86,63,2,92,109,110,95,35,48,95,88,49,2,65,80,83,66,35,49,88,89,50,2,66,83,85,68,35,50,89,90,51,2,68,85,87,70,35,51,90,91,52,2,70,87,89,72,35,52,91,92,53,2,72,89,91,74,35,53,92,93,54,2,74,91,93,76,35,55,94,95,48,2,79,94,80,65,35,54,93,94,55,2,76,93,94,79,35,40,103,96,41,2,49,64,67,50,35,41,96,97,42,2,50,67,69,52,35,42,97,98,43,2,52,69,71,54,35,43,98,99,44,2,54,71,73,56,35,44,99,100,45,2,56,73,75,58,35,45,100,101,46,2,58,75,77,60,35,47,102,103,40,2,63,78,64,49,35,46,101,102,47,2,60,77,78,63,35,24,111,104,26,2,40,48,51,47,35,26,104,105,28,2,47,51,53,45,35,28,105,106,30,2,45,53,55,46,35,30,106,107,32,2,46,55,57,43,35,32,107,108,34,2,43,57,59,44,35,34,108,109,36,2,44,59,61,41,35,111,24,38,110,2,48,40,42,62,35,36,109,110,38,2,41,61,62,42],
    "uvs"      : [],
    "normals"  : [0,0,-1,0,0.565752,-0.824549,0.60448,0.579577,-0.546495,0.74749,0,-0.664235,0.806299,0.591479,0,0.999969,0,0,0.60448,0.579577,0.546495,0.74749,0,0.664235,0,0.565752,0.824549,0,0,1,-0.60448,0.579577,0.546495,-0.74749,0,0.664235,-0.806299,0.591479,0,-0.999969,0,0,-0.60448,0.579577,-0.546495,-0.74749,0,-0.664235,0,-0.565752,-0.824549,-0.806299,-0.591479,0,-0.60448,-0.579577,-0.546495,0,-0.565752,0.824549,-0.60448,-0.579577,0.546495,0.806299,-0.591479,0,0.60448,-0.579577,0.546495,0.60448,-0.579577,-0.546495,0.010956,-0.582476,-0.812738,0.001434,0.759636,-0.650319,0.47969,0.735679,-0.478133,0.46794,-0.749321,-0.46852,0.653676,0.756767,0,0.801355,-0.598132,0,0.47969,0.735679,0.478164,0.46794,-0.749321,0.46852,0.001434,0.759606,0.650319,0.010956,-0.582476,0.812738,-0.475173,0.739525,0.47673,-0.482559,-0.731956,0.480941,-0.646992,0.762474,0,-0.82223,-0.569109,0,-0.475173,0.739525,-0.476699,-0.482559,-0.731956,-0.480941,-0.000122,-0.993713,0.111698,0.109165,-0.994018,0,0.054903,-0.996887,0.056368,-0.000122,-0.993713,-0.111698,0.054903,-0.996887,-0.056368,-0.114353,-0.993439,0,-0.05829,-0.996673,-0.056764,-0.05829,-0.996673,0.056764,-0.001953,-0.490036,-0.87167,0.001526,-0.696158,-0.717856,0.505692,-0.698325,-0.506516,0.630787,-0.450728,-0.631581,0.711844,-0.702292,0,0.869106,-0.494613,0,0.505692,-0.698325,0.506516,0.630787,-0.450728,0.631581,0.001526,-0.696158,0.717856,-0.001953,-0.490036,0.87167,-0.511521,-0.690878,0.510849,-0.6339,-0.444227,0.633076,-0.723746,-0.690054,0,-0.874172,-0.48558,0,-0.6339,-0.444227,-0.633076,-0.511521,-0.690878,-0.510849,-0.001801,-0.505966,-0.862545,-0.000488,-0.738853,-0.673849,0.486526,-0.725181,-0.487197,0.615253,-0.491836,-0.616016,0.666585,-0.745384,0,0.859432,-0.511216,0,0.486526,-0.725181,0.487197,0.615253,-0.491836,0.616016,-0.000488,-0.738853,0.673849,-0.001801,-0.505966,0.862545,-0.49382,-0.715964,0.493423,-0.619037,-0.484329,0.618213,-0.680929,-0.732322,0,-0.865505,-0.500839,0,-0.619037,-0.484329,-0.618213,-0.49382,-0.715964,-0.493423,-0.001129,-0.535752,-0.844356,-0.012452,-0.835536,-0.549242,0.407819,-0.814783,-0.412,0.589465,-0.551744,-0.589984,0.535539,-0.844478,0,0.840693,-0.541459,0,0.407819,-0.814783,0.412,0.589465,-0.551744,0.589984,-0.012452,-0.835536,0.549242,-0.001129,-0.535752,0.844356,-0.426954,-0.798608,0.424146,-0.593799,-0.543565,0.593188,-0.562548,-0.826746,0,-0.847835,-0.530198,0,-0.593799,-0.543565,-0.593188,-0.426954,-0.798608,-0.424146,0.002503,-0.617145,-0.786828,-0.027619,-0.901791,-0.431227,0.336009,-0.879971,-0.335704,0.519608,-0.678976,-0.518601,0.414136,-0.910184,0,0.778863,-0.627155,0,0.336009,-0.879971,0.335704,0.519608,-0.678976,0.518601,-0.027619,-0.901791,0.431227,0.002503,-0.617145,0.786828,-0.362651,-0.857326,0.365307,-0.527451,-0.665578,0.52794,-0.448286,-0.893857,0,-0.793878,-0.60802,0,-0.527451,-0.665578,-0.52794,-0.362651,-0.857326,-0.365307],

    "skinIndices"  : [],
    "skinWeights"  : [],
    "morphTargets" : [],

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

    "colors"    : [],
    "materials" : [
        {
            "DbgColor": 15658734,
            "DbgIndex": 0,
            "DbgName": "Material.003",
            "blending": "NormalBlending",
            "colorAmbient": [0.07535794736445611, 0.0212742938439211, 0.0012633113397486975],
            "colorDiffuse": [0.07535794736445611, 0.0212742938439211, 0.0012633113397486975],
            "colorEmissive": [0.0, 0.0, 0.0],
            "colorSpecular": [0.3612307117656144, 0.3597913161316253, 0.3854166567325592],
            "depthTest": true,
            "depthWrite": true,
            "shading": "Lambert",
            "specularCoef": 50,
            "transparency": 1.0,
            "transparent": false,
            "vertexColors": false
        },
        {
            "DbgColor": 15597568,
            "DbgIndex": 1,
            "DbgName": "Material.004",
            "blending": "NormalBlending",
            "colorAmbient": [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
            "colorDiffuse": [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
            "colorEmissive": [0.0, 0.0, 0.0],
            "colorSpecular": [0.5, 0.5, 0.5],
            "depthTest": true,
            "depthWrite": true,
            "shading": "Lambert",
            "specularCoef": 50,
            "transparency": 1.0,
            "transparent": false,
            "vertexColors": false
        },
        {
            "DbgColor": 60928,
            "DbgIndex": 2,
            "DbgName": "Material.005",
            "blending": "NormalBlending",
            "colorAmbient": [0.0044415605133128755, 0.0406652089697912, 0.002429789625518902],
            "colorDiffuse": [0.0044415605133128755, 0.0406652089697912, 0.002429789625518902],
            "colorEmissive": [0.0, 0.0, 0.0],
            "colorSpecular": [0.1161513477563858, 0.4715087115764618, 0.5],
            "depthTest": true,
            "depthWrite": true,
            "shading": "Lambert",
            "specularCoef": 50,
            "transparency": 1.0,
            "transparent": false,
            "vertexColors": false
        }
    ]

}

我试过以下方法,结果都差不多。

        var loader = new THREE.JSONLoader();

        loader.load("models/pine.json", function ( geometry, material ) {

            var mat = new THREE.MeshFaceMaterial( material );
            mesh = new THREE.Mesh( geometry, mat );

            scene.add(mesh);

        });


        var loader = new THREE.JSONLoader();
        loader.load("models/pine.json", function ( geometry, material ) {

            var mat = new THREE.MeshFaceMaterial( material );
            mesh = new THREE.Mesh( geometry, mat );

            scene.add(mesh);

        });


        var loader = new THREE.JSONLoader();
        loader.load("models/pine.json", function ( geometry, material ) {
            var mats = [];
            for (var m in material)
                mats.push(new THREE.MeshLambertMaterial( m ))
            var mat = new THREE.MeshFaceMaterial( mats );
            mesh = new THREE.Mesh( geometry, mat );

            scene.add(mesh);

        });

你可以在这里看到我的 nodejs 服务器上运行的问题:

http://173.66.170.88:2626/
http://173.66.170.88:2626/js/map-editor.js
http://173.66.170.88:2626/models/pine.json

模型截图:

http://173.66.170.88:2626/models/pine.png

您调用 material 时正在使用 using 'mat'。它应该是这样的:

var loader = new THREE.JSONLoader();

loader.load("models/pine.json", function ( geometry, materials ) {
    var material = new THREE.MeshFaceMaterial( materials );
    mesh = new THREE.Mesh( geometry, material );

    scene.add(mesh);

});

PS:你的模型真黑。与所有真正明亮和白色的东西相比,试着把它变成更亮的绿色和棕色以适应风景。

如果你的gltf/glb没有material的面部颜色,但是三个js不显示任何颜色,你可以手动添加定向光到场景中以查看颜色。