Coloring a face in buffer geometry is not visible at certain angles

Questions
,
1

So I have created multiple objects like rectangular prism & Pyramid, Triangular Prism & Pyramid, Cone & Cylinder

So i am trying to show the surface area of 3D figures,
I have buttons, that i click on a particular side is highlighted.

image
image430×539 19.5 KB

1st coming to the 1st issue that I am facing -
So when i click the next lh it highlights the back side but it cuts the overlapping part.

image
image410×542 17.9 KB

When i click on the last wh , it does not highlight at all unless i rotate the object and bring that side in front.

image
image431×544 19.7 KB

after I rotate
image
image435×544 20.8 KB

How do I make them highlight? I have used the property

I am using THREE.BoxGeometry, THREE.MeshPhongMaterial
following are the material property -
flatShading: true,
transparent: true,
opacity: 0.5,
vertexColors: true,
side: THREE.DoubleSide,

You can view it here - https://jsfiddle.net/zg6heyoc/

  1. The second issue i ma facing is the texture difference on curved surface -
    image

I am using THREE.CylinderGeometry, THREE.MeshPhongMaterial
following are the material property -
flatShading: true,
transparent: true,
opacity: 0.5,
vertexColors: true,
side: THREE.DoubleSide,

What can be done for this?

2

I interested your problem and it seems I solved it
You can change let side = 5; from 0 to 5 to change sides

Try this fiddle https://jsfiddle.net/Dragon3DGraff/q1dj24np/

I used advices from this article https://threejsfundamentals.org/threejs/lessons/threejs-transparency.html

 var geometry = new THREE.BoxGeometry(5,5,5);
//geometry.faces[10].color.setHex(0xff0000);
//  geometry.faces[11].color.setHex(0xff0000);
// material
let materialsFrontSide = [];
 let materialsBackSide = [];    
for( let i = 0; i < 6; i++ ){
materialsFrontSide.push(
   new THREE.MeshBasicMaterial( {
    color: 0xaaaaaa, 
    transparent: true,
    opacity: 0.5,
   side: THREE.FrontSide,
   alphaTest: 1      
} )   
);
materialsBackSide.push(
new THREE.MeshBasicMaterial( {
    color: 0xaaaaaa, 
    transparent: true,
    opacity: 0.5,
    side: THREE.BackSide,
    alphaTest: 0.1            
} )  
);
}
let side = 5;
materialsFrontSide[side].color.setHex(0xff0000);
 materialsBackSide[side].color.setHex(0xff0000);     
materialsFrontSide[side].alphaTest = 0.1;
 materialsBackSide[side].alphaTest = 0.1; 
let mesh1 = new THREE.Mesh( geometry, materialsFrontSide);
let mesh2 = new THREE.Mesh( geometry, materialsBackSide);
scene.add( mesh1 );
scene.add( mesh2 );
3

Thanks this is very helpful.
This side property can be used only in box geometry?
can I use this in cylinder?

4

Look up materialIndex.
That should solve your problems in both cases.

6

could you create fiddle with this pyramid? I can try to solve your problem

7

actually i got the fix with rearranging the code, so earlier i was updating the front and back side after every push in the scene.
I changed it by only changing the front and back color before pushing all the faces in the scene.

Thanks

8

This does not work for cone or cylinder geometry
how many frot and back side do we have to push for cone and cylinder 2 and 3 respectively?