yashs
May 25, 2020, 11:35am
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.
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.
When i click on the last wh , it does not highlight at all unless i rotate the object and bring that side in front.
after I rotate
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/
The second issue i ma facing is the texture difference on curved surface -
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?
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 );
2 Likes
yashs
May 26, 2020, 5:02am
3
Thanks this is very helpful.
This side property can be used only in box geometry?
can I use this in cylinder?
Look up materialIndex .
That should solve your problems in both cases.
could you create fiddle with this pyramid? I can try to solve your problem
1 Like
yashs
May 26, 2020, 11:09am
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
1 Like
yashs
June 9, 2020, 6:59am
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?