# Shape requirements best fit material and geometry

**URL:** <https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962>\
**Category:** Questions\
**Tags:** materials, geometry\
**Created:** [June 7, 2020, 2:10pm UTC](https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962 "2020-06-07T14:10:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![systemsincode](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@systemsincode](https://discourse.threejs.org/u/systemsincode)\
**Post date:** [June 7, 2020, 2:10pm UTC](https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962/1 "2020-06-07T14:10:57Z")

</div>

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](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?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [June 7, 2020, 6:36pm UTC](https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962/2 "2020-06-07T18:36:39Z")

</div>

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](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315) might help you.

* * *

[https://hofk.de/main/discourse.threejs/2017/PictureBall/PictureBall.html](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/ChangeTextureByTime/ChangeTextureByTime.html)  
[https://hofk.de/main/discourse.threejs/2018/LabelsOnSphere/LabelsOnSphere.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/Planes%20on%20Sphere/Planes%20on%20Sphere.html)  
[https://hofk.de/main/discourse.threejs/2018/SelectSegments/SelectSegments.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/2018/selectingFaceindex/selectingFaceindex.html)

[https://hofk.de/main/discourse.threejs/2019/ColorStripeChanging/ColorStripeChanging.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/SelectFacesWithinRadius/SelectFacesWithinRadius.html)  
[https://hofk.de/main/discourse.threejs/2019/PointInPolygon/PointInPolygon.html](https://hofk.de/main/discourse.threejs/2019/PointInPolygon/PointInPolygon.html)

[https://hofk.de/main/discourse.threejs/2020/PeriodicTablePyramid/PeriodicTablePyramid.html](https://hofk.de/main/discourse.threejs/2020/PeriodicTablePyramid/PeriodicTablePyramid.html)

* * *

---

<div class="post-metadata">

**Author:** ![systemsincode](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@systemsincode](https://discourse.threejs.org/u/systemsincode)\
**Post date:** [June 7, 2020, 9:29pm UTC](https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962/3 "2020-06-07T21:29:18Z")

</div>

Thanks for the links. I guess I am trying to make something like [this](https://conceptdraw.com/a2226c3/p27/preview/640/pict--5-level-pyramid-diagram-pyramid-diagrams-vector-stencils-library), with ability to separate layers enough to add something in between layers like [these annotations](https://conceptdraw.com/a2226c3/p19/preview/640/pict--arrowed-block-pyramid-pyramid-diagrams-vector-stencils-library)

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.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [June 8, 2020, 6:59am UTC](https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962/4 "2020-06-08T06:59:10Z")

</div>

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.

> [@𝔽 How many ways to load a font in Three.js?](https://discourse.threejs.org/t/how-many-ways-to-load-a-font-in-three-js/2054):
>
> This is for those that wished they had a document for the many font ways with Three.js. Maybe you know of another way please participate to this listing if you can think of another way. My journey on fonts in Three.js to create 3D text at runtime without having to load a typeface.json. CSS3DRenderer looked promising though NOT allowed in generating a mesh ONLY the WebGLRenderer allows this to happen. Do you know of another way to load a font into Three.js?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 8, 2020, 7:25am UTC](https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962/5 "2020-06-08T07:25:44Z")

</div>

> [@systemsincode](#):
>
> to make something like [this](https://conceptdraw.com/a2226c3/p27/preview/640/pict--5-level-pyramid-diagram-pyramid-diagrams-vector-stencils-library)

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

---

<div class="post-metadata">

**Author:** ![systemsincode](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@systemsincode](https://discourse.threejs.org/u/systemsincode)\
**Post date:** [June 8, 2020, 7:53am UTC](https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962/6 "2020-06-08T07:53:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 8, 2020, 8:00am UTC](https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962/7 "2020-06-08T08:00:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![systemsincode](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@systemsincode](https://discourse.threejs.org/u/systemsincode)\
**Post date:** [June 8, 2020, 8:25am UTC](https://discourse.threejs.org/t/shape-requirements-best-fit-material-and-geometry/15962/8 "2020-06-08T08:25:24Z")

</div>

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!