Shape requirements best fit material and geometry

Hi All,

I am new to javascript and threee.js and am trying to create an interative pyramid for purposes of an online tutorial.
I need the Pyramid to have several independent levels with:-

  • Each face to be able to support different number of layers (I think this is the difficult bit).
  • Select each faces levels independently.
  • Have a text displayed each level to identify the layer.
  • Can show a wireframe or at least be able to highlight edges of that faces level to visualy separate it from the rest of the pyramid.
  • Pyramid level to be able to ‘pop’ out in order to show animations between each level (have optional padding between layers)

I’ve got the basic Pyramid via THREE.ConeGeometry…

To dynamically show different aspects I was looking at using ‘createMultiMaterialObject’ which I understand is to enable different materials to be used on the same face/surface. Is this the best class to use to do this?
(Its used in https://github.com/stemkoski/stemkoski.github.com/blob/f5c7120af8488d04255b3e4492f4fb214d80b6ff/Three.js/Shapes.html I found this sample is outdated and now duplicate classes createMultiMaterialObject exist )

Is this what I need to use or is there a better option? I believe I should be using Groups to enable the faces to use different materials for different faces/surfaces, but does that help me with dynamically changing surfaces also?

A sketch would be helpful to better understand what you want to achieve.

If I have gathered some requirements correctly these examples from the Collection of examples from discourse.threejs.org might help you.


https://hofk.de/main/discourse.threejs/2017/PictureBall/PictureBall.html

https://hofk.de/main/discourse.threejs/2018/ChangeTextureByTime/ChangeTextureByTime.html
https://hofk.de/main/discourse.threejs/2018/LabelsOnSphere/LabelsOnSphere.html
https://hofk.de/main/discourse.threejs/2018/Planes%20on%20Sphere/Planes%20on%20Sphere.html
https://hofk.de/main/discourse.threejs/2018/SelectSegments/SelectSegments.html
https://hofk.de/main/discourse.threejs/2018/selectingFaceindex/selectingFaceindex.html

https://hofk.de/main/discourse.threejs/2019/ColorStripeChanging/ColorStripeChanging.html
https://hofk.de/main/discourse.threejs/2019/SelectFacesWithinRadius/SelectFacesWithinRadius.html
https://hofk.de/main/discourse.threejs/2019/PointInPolygon/PointInPolygon.html

https://hofk.de/main/discourse.threejs/2020/PeriodicTablePyramid/PeriodicTablePyramid.html


1 Like

Thanks for the links. I guess I am trying to make something like this, with ability to separate layers enough to add something in between layers like these annotations

I was always impressed with that periodic table example - I didn’t look a the source before and didn’t realize that so much can be done with the CSS3DRenderer without a canvas! I’ll look at the group option next.

1 Like

If you divide the pyramid like this, it is not difficult to place text.

For the text itself you have a very large selection available.

5 cylinder geometries with decreasing (or increasing, depends on where you start from) radii.

1 Like

Is this because it makes assigning materials easier or because you think doing transforms on geometry sections is too tricky and better to have separate geometries coordinated to appear as one?

It’s just an option :slight_smile:
You can try that method with clipping and stencil: https://threejs.org/examples/?q=clipping#webgl_clipping_stencil to divide a single mesh into layers.
Creativity is up to you.

Cheers
I’m still not sure how I can have differ number of layers on different sides. It would only have to be interactive viewing that one face maybe I can use stacked sloped triangles for each face so they are not tied to each other. I’m not sure my maths is up to this!