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

Question

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

我想得到什么：

我使用Blender标记颜色但不能获得Three.js中的顶点颜色。

我的步骤：

1. 在Blender中制作一个立方体。在＆＃34; Vertex Paint＆＃34;中涂上8种不同颜色的每种颜色。 Blender中的模式
2. 通过Bender插件Three.js Blender Export
将多维数据集导出到json文件

3. 将json文件加载到Three.js中，如下所示：

   (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中将其渲染出来？

Answer 1

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

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

// 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：