How do I create a rounded cube with "segments"?

Questions
,
1

I need to create curve book page with rounded corners, like this: from wawasensei

image
image1458×808 64 KB

Now, the code is like this:

const pageGeometry = new BoxGeometry(
  PAGE_WIDTH,
  PAGE_HEIGHT,
  PAGE_DEPTH,
  PAGE_SEGMENTS,
  2
);

But I want pageGeometry become rounded corner.
As far as I know RoundedBoxGeometry cannot set segments like this.

2

Can you use a subdivided plane, and then do the corners in a shader with transparency/discard?

3

It seems like I need to create two planes for one pageObject? Because two sides are different materials. https://discourse.threejs.org/t/different-materials-on-plane-side-a-and-side-b/58310

1 Like
4

Yeah sounds about right. One material for the front,
and the back material with side:THREE.BackSide
and the other texture?

5

mm, seems I need two animation and bones for one pageObject, I will try this method later, thanks!

6

See
How to have different colors/textures on bottom and top side of a Plane?

2021 discourse.threejs.hofk.de =>
RoundEdgedBoxFlat
AnimatingBookPages

RoundedRectangle
DoubleSide(gl_FrontFacing)

from Collection of examples from discourse.threejs.org

2 Likes