json - 将颜色从 JSON 文件加载器传递到面部

Question

我正在以编程方式生成一个 json 文件来加载网格，顶点和面渲染得很好，但我也不知道如何将颜色传递到面。

这是我正在试验的 json 文件:

{
    "metadata" : {
        "formatVersion" : 3
    },
    "materials" : [],
    "vertices" : [-10,10,0, -10,-10,0, 10,-10,0, 10,10,0, -10,10,10,  -10,-10,10,  10,-10,10,  10,10,10],
    "faces" : [4, 0, 1, 3, 0], //or with 0 as the first number for a plain triangle
    "normals": [],
    "colors": [0.5, 0.4, 0.3],
    "uvs": []
}

然后像这样加载:

loader.load( "js/models/square.js", function(geometry) {
    var material = new THREE.MeshLambertMaterial( {
        faceColors : THREE.FaceColors,
    });
    material.side = THREE.DoubleSide;

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

我的核心问题是我对位掩码的工作方式感到困惑，但此处的 FACE_COLOR 位 https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3.1建议它应该工作，任何帮助将不胜感激......谢谢!

Answer 1

首先，您必须正确构建 JSON 文件。这个最简单的例子是这样的，它定义了一个具有面颜色的立方体:

{
    "metadata" : {
        "formatVersion" : 3
    },
    "materials" : [],
    "vertices" : [ -5,5,-5,  -5,-5,-5,  5,-5,-5,  5,5,-5,  -5,5,5,  -5,-5,5,  5,-5,5,  5,5,5 ],
    "faces" : [ 65,3,2,1,0,0,  65,4,5,6,7,1,  65,7,6,2,3,2,  65,0,1,5,4,3,  65,0,4,7,3,0,  65,6,5,1,2,1 ],
    "colors": [ 16711680, 65280, 255, 16776960 ],
    "normals": [],
    "uvs": []
}

在这个例子中，每张脸都被分配了四种脸色中的一种。颜色以十进制格式指定，例如 0xff0000 = 16711680。

每个面孔的位掩码代码为 64(对于面孔颜色)+ 1(对于四边形)= 65。

然后，由于您没有指定顶点法线，我假设您想要的是 MeshBasicMateral。此外，没有“faceColors”属性——它是 vertexColors。而且，您必须记住将网格添加到场景中。

var loader = new THREE.JSONLoader();

loader.load( "cube.js", function( geometry ) {
    var material = new THREE.MeshBasicMaterial( {
        vertexColors : THREE.FaceColors,
    });

    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
}

three.js r.53