CODEWITHSUNDEEP
three.js
Avatar
Avatar

Reputation: 15186

Threejs How to assign different color for top face of a cylinder?

I would like to create a simple cylinder and color its top face differently. I can create the cylinder and assign a material. My recent code: 

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

Using console.log( cylGeometry.faces ); I see that there are about 80 objects.

I tried changing the face colors by: 

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

but it does not work, maybe due to THREE.MeshLambertMaterial.

Recent version (includes shading): Zylinder: Volumen berechnen online - Formel interaktiv

enter image description here

How can I assign a different color for the top face? Do I need to use another material?

Upvotes: 3

Views: 2682

Answers (1)

WestLangley
WestLangley

Reputation: 104793

You can use another material for the end caps, but you don't have to.

Instead, you can use this pattern: For each end cap face, set

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

And then set

material.vertexColors = THREE.FaceColors;

You can indentify the end cap faces by their face.normal, which is parallel to the y-axis.

If you want to use a separate material for the end caps, you need to set for each end cap face, face.materialIndex = 1 ( the default is 0 ), and then create your mesh using this pattern:

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

Upvotes: 2

Related Questions