threejs extrude bezier tube

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

CSS

body {
    overflow: hidden;
}

JavaScript

// https://stackoverflow.com/questions/55126806/three-js-create-a-rectangular-tube-with-rounded-edges

let renderer;
let camera;
let controls;

let scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(2);
renderer.setClearColor(new THREE.Color(0xfefefe));
document.body.appendChild(renderer.domElement);

camera.position.x = -2;
camera.position.y = 0.5;
camera.position.z = 10;
camera.lookAt(0, 0, 0);

controls = new THREE.OrbitControls(camera);

// white spotlight shining from the side, casting a shadow
let spotLight = new THREE.SpotLight(0xffffff, 2.5, 25, Math.PI / 6);
spotLight.position.set(9, 10, 1);
scene.add(spotLight);
var light = new THREE.AmbientLight(0x202020); // soft white light
scene.add(light);

// example starts here
let gridHelper = new THREE.GridHelper(4, 4);
scene.add(gridHelper);

var length = 0.5,
    width = 0.5;

var r = 0.5;
var w = 1;
var l = 2;

var extrudeShape = new THREE.Shape();
extrudeShape.moveTo(-w + r, -l);
extrudeShape.absarc(-w + r, -l + r, r, -Math.PI / 2, Math.PI, true);
extrudeShape.lineTo(-w, l - r);
extrudeShape.absarc(-w + r, l - r, r, Math.PI, Math.PI / 2, true);
extrudeShape.lineTo(w - r, l);
extrudeShape.absarc(w - r, l - r, r, Math.PI / 2, 0, true);
extrudeShape.lineTo(w, -l + r);
extrudeShape.absarc(w - r, -l + r, r, 0, -Math.PI / 2, true);

var wallThickness = 0.2;
var wi = w - wallThickness;
var li = l - wallThickness;
var ri = r - wallThickness / 2;
var hole = new THREE.Path();
hole.moveTo(-wi + ri, -li);
hole.absarc(-wi + ri, -li + ri, ri, Math.PI, -Math.PI / 2, false);
hole.lineTo(wi - ri, -li);
hole.absarc(wi - ri, -li + ri, ri, -Math.PI / 2, 0, false);
hole.lineTo(wi, li - ri);
hole.absarc(wi - ri, li - ri, ri, 0, Math.PI / 2, false);
hole.lineTo(-wi + ri, li);
hole.absarc(-wi + ri, li - ri, ri, Math.PI / 2,...