three.js - Threejs 如何为圆柱体的顶面指定不同的颜色？

Question

我想创建一个简单的圆柱体并为其顶面着色不同。我可以创建圆柱体并分配 Material 。我最近的代码:

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

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

Answer 1

您可以使用其他 Material 作为端盖，但并非必须如此。

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

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

然后设置

material.vertexColors = THREE.FaceColors;

您可以通过与 y 轴平行的 face.normal 来识别端盖面。

如果您想对端盖使用单独的 Material ，则需要为每个端盖面设置 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 ) );

三.js r.68