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ā¦
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?
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.
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
You can try that method with clipping and stencil: three.js examples 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!
