Does anybody know how to create a shelf with rounded corner in three.js? I was only able to create rounded shelf as a quarter circle as you can see on image below (top picture) by using CylinderGeometry https://threejs.org/docs/#api/en/geometries/CylinderGeometry but I can't figure out how to create a shelf with rounded corner like on image below (bottom picture).

How to create shelf with rounded corner in Three.js?

You can create a shape and extrude it:

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js"
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/three@0.125.2/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(-10, 5, 10).setLength(6);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let sizeX = 5;
let sizeY = 3;
let radius = 0.5;

let halfX = sizeX * 0.5 - radius;
let halfY = sizeY * 0.5 - radius;
let baseAngle = Math.PI * 0.5;

let shape = new THREE.Shape();
shape.absarc(halfX, halfY, radius, baseAngle * 0, baseAngle * 0 + baseAngle);
shape.absarc(-halfX, halfY, radius, baseAngle * 1, baseAngle * 1 + baseAngle);
shape.absarc(-halfX, -halfY, radius, baseAngle * 2, baseAngle * 2 + baseAngle);
shape.absarc(halfX, -halfY, radius, baseAngle * 3, baseAngle * 3 + baseAngle);

let shelfGeom = new THREE.ExtrudeGeometry(shape, {bevelEnabled: false, depth: 1});
let shelfMat = new THREE.MeshLambertMaterial({color: 0xFACE8D});
let shelf = new THREE.Mesh(shelfGeom, shelfMat);
scene.add(shelf);

renderer.setAnimationLoop( _ => {
  renderer.render(scene, camera);
});

</script>

How to create shelf with rounded corner in Three.js?

1 Answers