ThreeJS - Rounded rectangle with alignment

by PhilQ

HTML

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
  }
}
</script>

CSS

body {
  margin: 0;
}

canvas {
  cursor: grab;
  display: block;
}

canvas:active {
  cursor: grabbing;
}

JavaScript

import {
  WebGLRenderer,
  SRGBColorSpace,
  LinearSRGBColorSpace,
  ACESFilmicToneMapping,
  PCFSoftShadowMap,
  // PCFShadowMap,
  PerspectiveCamera,
  Scene,
  AmbientLight,
  DirectionalLight,
  DirectionalLightHelper,
  SpotLight,
  SpotLightHelper,
  RectAreaLight,
  AxesHelper,
  ShapeGeometry,
  ExtrudeGeometry,
  BoxGeometry,
  Mesh,
  MeshBasicMaterial,
  MeshLambertMaterial,
  MeshPhongMaterial,
  MeshStandardMaterial,
  DoubleSide,
  FrontSide,
  BackSide,
  Shape,
  Path,
  Group,
  Vector2,
  Vector3,
  Box3,
  LoadingManager,
  TextureLoader,
  Raycaster,
  MathUtils,
} from 'three';
import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
// import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
// import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js';
import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
import TWEEN from 'three/addons/libs/tween.module.js';
// import { Tween, Easing } from 'https://unpkg.com/@tweenjs/[email protected]/dist/tween.esm.js'


const roundedRectangle = (
  shape_or_path,
  cx,
  cy,
  align = 'cm',
  width,
  height,
  rtl,
  rtr = -1,
  rbr = -1,
  rbl = -1
) => {
  var left = cx;
  var right = cx + width;
  var top = cy + height;
  var bottom = cy;

  // Adjust boundaries based on alignment
  align = align.toLowerCase().split('');
  for (let a of align) {
    switch (a) {
      case 'l':
      case 'b':
        break;
      case 'c':
        left -= 0.5 * width;
        right -= 0.5 * width;
        break;
      case 'r':
        left -= width;
        right -= width;
        break;
      case 't':
        top -= height;
        bottom -= height;
        break;
      case 'm':
        top -= 0.5 * height;
        bottom -= 0.5 * height;
        break;
    }
  }
  
  // Fill-in radii
  if (0 > rtr) {
   ...