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

Questions
,
1

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
    ax_1,ay_1,az_1,bx_1,by_1,bz_1,......dx_1,dy_1,dz_1,
    //side2
    ax_2,ay_2,az_2,......
    ....
]);
cube.setAttribute('position',new T.BufferAttribute(vertices,3));
cube.computeVertexNormals();
const uvs = new Float32Array([
     //side1 (uv for 6 points)
     ua_1,va_1,ub_1,vb_1,uc_1,vc_1,ua_1,va_1,uc_1,vc_1...
    //side2
    ...
]);
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!

2

Some implementations here:

1 Like
3

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)

3 Likes
4

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 discourse.threejs.org you will find
CheckerboardRoundedBox and RoundEdgedBoxFlat

Older from 2017 at top: discourse.threejs.hofk.de

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

2 Likes