How to make a rounded-edge and rounded-corner cube by BufferGeometry with split vertices

Hello! I’m pretty new to THREE.JS. I have built a cube by drawing 6 sides. Each side is formed by two triangles, so I defined 6 vertices for each side (the shared vertices are split). Then I uv map the texture to each vertex of the cube. Here is my code:

let cube  = new T.BufferGeometry();
const vertices = new Float32Array([
     //side1, 6vertices, two triangles
cube.setAttribute('position',new T.BufferAttribute(vertices,3));
const uvs = new Float32Array([
     //side1 (uv for 6 points)
cube.setAttribute('uv',new T.BufferAttribute(uvs,2));
const texture = new T.TextureLoader().load(...);
let material = new T.MeshStandardMaterial({map:texture});
let _cube = new T.Mesh(cube,material);

I’m wondering how can I make the edges and corners of the cube rounded. I’m thinking update the corresponding normal vectors but I’m not sure how to do that:(.

Thank you so much!

Some implementations here:

1 Like

Actually, there are more approaches for rounded-edge boxes:

And moreover, there is a class of geometry, included in the distributive: jsm/geometries/RoundedBoxGeometry.js. Used here three.js examples and here White Gold (Reflector, custom geometry)

1 Like

In the collection of spheres Collection of sphere definitions are also cubes with rounded corners as a transition. See section H and I.

In the Collection of examples from you will find
CheckerboardRoundedBox and RoundEdgedBoxFlat

Older from 2017 at top:

See also Addon to create special / extended geometries
Try out: Magic Box
2022-04-05 08.46.03