THREE.BufferGeometry - 如何手动设置面部颜色？

Question

我有一个 BufferedGeometry，我想为其设置每个面的颜色。但是，据我了解，几何体上的

color

属性设置每个顶点的颜色，而不是面。

无论如何，我尝试使用它，将材质上的着色方案设置为每个面，

material.vertexColors = THREE.FaceColors;

，并为每个面放置 3 个项目的

Float32Array

颜色属性（RGB，每个范围从 0 到 1）。这没有得到所需的输出。

Answer 1

您想在使用

BufferGeometry

时指定脸部颜色。为此，请执行以下操作：

使用非索引

BufferGeometry

。

添加

color

属性。

geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

在

color

属性中，将每个面的所有三个顶点指定为具有相同的颜色。

如果您使用的是 Three.js 内置材质，请在材质定义中设置

vertexColors: true

如果您使用

ShaderMaterial

，那么您将必须自己编写着色器。

三.js r.146

Answer 2

对尽可能多的面孔使用

MeshFaceMaterial

。例如，此材质适用于具有 6 个面的物体：

var material = new THREE.MeshFaceMaterial([
    new THREE.MeshBasicMaterial({
        color: 0x00ff00
    }),
    new THREE.MeshBasicMaterial({
        color: 0xff0000
    }),
    new THREE.MeshBasicMaterial({
        color: 0x0000ff,
    }),
    new THREE.MeshBasicMaterial({
        color: 0xffff00
    }),
    new THREE.MeshBasicMaterial({
        color: 0x00ffff
    }),
    new THREE.MeshBasicMaterial({
        color: 0xff00ff
    })
]);

Answer 3

代码看起来像这样。

var nCoordsComponents = 3; // x,y,z
var nColorComponents = 3;  // r,g,b
var nFaces = 6;            // e.g. for a pyramid
var nVerticesPerFace = 3;  // Triangle faces

// Non-indexed arrays which have to be populated with your data.
var vertices = new Float32Array(nFaces*nVerticesPerFace*nCoordsComponents);
var colors = new Float32Array(nFaces*nVerticesPerFace*nColorComponents);

var bufferGeometry = new THREE.BufferGeometry();
bufferGeometry.addAttribute('position', new THREE.Float32BufferAttribute(pve, nCoordsComponents));
bufferGeometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, nColorComponents));

var material = new THREE.MeshBasicMaterial ({vertexColors: THREE.VertexColors});
var mesh  = new THREE.Mesh (bufferGeometry, material);

scene = new THREE.Scene();
scene.add(mesh);

查看完整的工作示例此处。

Answer 4

const geom = new THREE.BufferGeometry();

const 顶点 = new Float32Array([ -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0 ]);

常量颜色 = new Float32Array([ 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ]);

geom.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); geom.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const 材质 = new THREE.MeshBasicMaterial({vertexColors: true}); const mesh = new THREE.Mesh(geom,material);

Answer 5

经过很长时间的搜索，我发现

BufferGeometry#group

可以指定哪些索引与哪些材料相关。

相关SO