Rounded Edges

Shape and ExtrudeGeometry

by Shankar Prakash G

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 4, 4, 30 );
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls( camera, renderer.domElement );

var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( -10, 10, 10 );
scene.add( dirLight );

var loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin( "" );
loader.setPath( 'https://threejs.org/examples/textures/cube/pisa/' );

var cubeTexture = loader.load( [
  'px.png', 'nx.png',
  'py.png', 'ny.png',
  'pz.png', 'nz.png'
] );


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, {
    depth: depth - radius0 * 2,
    bevelEnabled: true,
    bevelSegments: smoothness * 2,
    steps: 1,
    bevelSize: radius,
    bevelThickness: radius0,
    curveSegments: smoothness
  });
  
  geometry.center();
  
  return geometry;
}

for ( let i = 0; i < 1; i++ ){
 
  let cubeMat = [
    new THREE.MeshBasicMaterial({ color: 0x1a0dab }),
    new THREE.MeshBasicMaterial({ color: 0x2196f3 }), //blue
    new THREE.MeshBasicMaterial({ color: 0x5f048c }), //violet
    new THREE.MeshBasicMaterial({ color: 0xffeb3b }), //yellow
    new THREE.MeshBasicMaterial({ color: 0x64b448 }), //green
    new THREE.MeshBasicMaterial({ color: 0xff0000 }) //red
];
  let cube = new THREE.Mesh(...