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

三.js r.53