How to use multiple clipping masks for groups of objects in Three.js?

[prisoner849]

@manthrax

nest the renderer canvas inside another element with a border (i think)

You can set something like this: renderer.domElement.style.borderRadius = "10vh"; (or do the same with CSS).

Clipping also works: Tamalék [Catmull-Rom in vertex shader]

.hex{
  /*border-radius: 200px;*/
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}