As I couldn’t find the solution for round-edged boxes, I took the way of least resistance - “re-invent and build the bicycle, if you don’t have one”
THREE.Shape()
and THREE.ExtrudeBufferGeometry()
helped me.
https://jsfiddle.net/prisoner849/303kdmnd/
Criticism is very welcomed.
function createBoxWithRoundedEdges( width, height, depth, radius0, smoothness ) {
let shape = new THREE.Shape();
let eps = 0.00001;
let radius = radius0 - eps;
shape.absarc( eps, eps, eps, -Math.PI / 2, -Math.PI, true );
shape.absarc( eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true );
shape.absarc( width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true );
shape.absarc( width - radius * 2, eps, eps, 0, -Math.PI / 2, true );
let geometry = new THREE.ExtrudeBufferGeometry( shape, {
amount: depth - radius0 * 2,
bevelEnabled: true,
bevelSegments: smoothness * 2,
steps: 1,
bevelSize: radius,
bevelThickness: radius0,
curveSegments: smoothness
});
geometry.center();
return geometry;
}
And a funny scene with this kind of geometries, animates with Tween.js (I hope I cycled it correctly):