Curved surface coloring issue

I have made a cone using cone geometry. using cone geometry and created two mesh using Front Side with alpha 1 and other as Back side with alpha 0.1.

The problem i am facing is that i am not able to see the bottom surface.
image

Also I want to color the curved surface different than the base.

What approach should I go.

ConeGeometry is derived from CylinderGeometry. That means the geometry supports two materials meaning the torso can have a different material than the caps.

So I suggest you apply an array of two materials to your meshes which allows you to use two different colors. Something like:

const coneMesh = new THREE.Mesh( geometry, [ material1, material2 ] );
1 Like

I have used two materials one with front side with alpha 1 and other with back side as alpha 0.1

But my bottom surface is invisible.
Also I can not highlight the material using

considering 2 faces
1 as the base
and 0 as the curved face.

materialsFrontSide[1].color.setHex(localObj.highlightColor);
materialsBackSide[1].color.setHex(localObj.highlightColor);
materialsFrontSide[1].alphaTest = 0.1;
materialsBackSide[1].alphaTest = 0.1;

materialsFrontSide[0].color.setHex(localObj.highlightColor);
materialsBackSide[0].color.setHex(localObj.highlightColor);
materialsFrontSide[0].alphaTest = 0.1;
materialsBackSide[0].alphaTest = 0.1;