在 Three.js 中，如何从 Blender 导出的 json 文件中获取几何的顶点颜色？答案

【问题标题】：In Three.js how to get geometry's vertex colors from a json file exported from Blender?在 Three.js 中，如何从 Blender 导出的 json 文件中获取几何的顶点颜色？
【发布时间】：2017-07-26 02:40:37
【问题描述】：

我想要实现的是以可视方式为几何体的顶点着色，并仅在 Three.js 中渲染其顶点。

我想得到什么：

我使用 Blender 标记颜色，但在 Three.js 中无法获取顶点颜色。

我的步骤：

在 Blender 中制作一个立方体。在 Blender 的“顶点绘制”模式中为 8 个顶点分别绘制不同的颜色
通过 Bender 插件将立方体导出到 json 文件Three.js Blender Export

在 Three.js 中加载 json 文件如下：

(new THREE.JSONLoader()).load('cube.json', function(geometry) {
    console.log(geometry.colors); //an empty array ? why?
})

cube.json 的内容：

{
    "materials":[],
    "colors":[16725291,16748308,16770898,16720850,5562367,6553492,11599643,2046719,16777215],
    "faces":[131,0,1,2,3,0,0,1,2,3,131,4,7,6,5,0,4,5,6,7,131,0,4,5,1,0,0,4,7,1,131,1,5,6,2,0,1,7,6,2,131,2,6,7,3,0,2,6,8,3,131,4,0,3,7,0,4,0,3,5],
    "vertices":[1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],
    "metadata":{
        "generator":"io_three",
        "materials":0,
        "colors":9,
        "type":"Geometry",
        "vertices":8,
        "faces":6,
        "version":3
    }
}

Three.js 中有没有办法获取我绘制的顶点颜色？还是有另一种可视化方法来为顶点着色并在 Three.js 中渲染出来？

【问题讨论】：

标签： three.js blender vertex

【解决方案1】：

使用THREE.PointsMaterial 在three.js 中将模型的顶点渲染为点是最简单的。此材质支持从几何体的 colors 属性读取的逐顶点颜色。

然而，棘手的部分是，虽然您的 cube.json 包含这组颜色，但三个 JSONLoader 将它们解释为每个面顶点颜色（用于面渲染）。我们必须将它们转换回每个顶点的颜色，以便将它们渲染为顶点点云的一部分。

// Convert face-vertexcolors to .colors array
geometry.colors = [];
for (var faceIndex = 0; faceIndex < geometry.faces.length; faceIndex++) {
    var face = geometry.faces[faceIndex];
    geometry.colors[face.a] = face.vertexColors[0];
    geometry.colors[face.b] = face.vertexColors[1];
    geometry.colors[face.c] = face.vertexColors[2];
}

// Render mesh as THREE.POINTS
var pointsMaterial = new THREE.PointsMaterial({
    size: 40,
    sizeAttenuation: true,
    vertexColors: THREE.VertexColors // This triggers  actual usage of the colors
});
var mesh = new THREE.Points(geometry, pointsMaterial);
mesh.scale.x = mesh.scale.y = mesh.scale.z = 250;
scene.add(mesh);

Working example:

【讨论】：