三Js如何为圆柱的顶面分配不同的颜色？

Question

我想创建一个简单的圆柱体，并以不同的方式为其顶面着色。我可以创建圆柱体并分配材料。我最近的代码：

var zylinder = {};
zylinder._width = 1;
zylinder._height = 1;
zylinder._color = 0xFF666e;

var cyl_material = new THREE.MeshLambertMaterial({ 
    color: zylinder._color, 
    side: THREE.DoubleSide, 
    transparent: true, 
    opacity: 0.9, 
    // map: THREE.ImageUtils.loadTexture( "texture-stone-wall.jpg" ),
});
var cylGeometry = new THREE.CylinderGeometry(zylinder._width, zylinder._width, zylinder._height, 20, 1, false);
var cylinder = new THREE.Mesh(cylGeometry, cyl_material);
cylinder.position.y = zylinder._height/2+0.001;
scene.add(cylinder);

使用console.log( cylGeometry.faces );我看到大约有80个对象。

我尝试通过以下方式更改面部颜色：

cylGeometry.faces[0].color.setHex( 0xffffff );
cylGeometry.faces[1].color.setHex( 0xffffff );
// ...

但它不起作用，可能是由于THREE.MeshLambertMaterial。

最新版本（包括着色）：Zylinder: Volumen berechnen online - Formel interaktiv

如何为顶面指定不同的颜色？我需要使用其他材料吗？

Answer 1

您可以使用其他材料作为封底，但您不必使用。

相反，您可以使用此模式：对于每个端盖面，请设置

geometry.faces[ faceIndex ].color.set( 0x00ff00 );
...

然后设置

material.vertexColors = THREE.FaceColors;

您可以通过face.normal来标识端盖面，它与y轴平行。

如果要为端盖使用单独的材料，则需要为每个端盖设置face.materialIndex = 1（默认值为0），然后使用以下模式创建网格：

var materials = [ new THREE.MeshBasicMaterial( { color: 0xff0000 } ), new THREE.MeshBasicMaterial( { color: 0x00ff00 } ) ];

var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

three.js r.68