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

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