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

Question

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

我想得到的：

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

我的步数：

在 Blender 中制作立方体。在 Blender
通过 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 中渲染出来？

Answer 1

将模型的顶点渲染为 three.js 中的点是使用 THREE.PointsMaterial 最简单的方法。 material 支持每个顶点的颜色，从几何体的 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:

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

In Three.js how to get geometry's vertex colors from a json file exported from Blender?

three.js

blender

vertex