Question

我有一个BufferedGeometry，我想为每个脸设置颜色。但是，据我所知，几何体上的color属性设置每个顶点的颜色，而不是面。

无论如何，我尝试使用材质上的着色方案material.vertexColors = THREE.FaceColors;，并将Float32Array颜色属性设置为每面3个项目（RGB，每个范围从0到1））。这没有所需的输出。

Answer 1

您想在使用BufferGeometry时指定面部颜色。为此，请执行以下操作：

使用非索引BufferGeometry。

添加color属性。

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

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

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

vertexColors: THREE.VertexColors

如果您使用的是ShaderMaterial，那么您必须自己编写着色器。

three.js r.83

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

查看完整的工作示例here。

Answer 4

const geom = new THREE.BufferGeometry();

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

const 颜色 = 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 material = new THREE.MeshBasicMaterial({vertexColors: true}); const mesh = new THREE.Mesh(geom, material);

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

4 个答案: