all 3 methods for Profile Shape On Contour

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 50);
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 light = new THREE.DirectionalLight(0xffffff, 0.75);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));

var grid = new THREE.GridHelper(50, 50, 0xffffff, 0x101010);
grid.rotateX(Math.PI / 2);
scene.add(grid);

// returns you an offset point but not as good as the offsetPRofileContourDemo
//offsetContourClosedShapeDemo();

// returns you a geometry tube like
//profileAlongContourDemo();

// the better of the two but only returns you the offset point
offsetProfileOnContourDemo();

// extrude 3d profile along a contour line
function profileAlongContourDemo(){

	// thickness vector2s, every 2 numbers = vec2
	const profileShape = [0,0, 0, 1, 1, 1];
  
  // vector2s, every 2 nmbers = vec2
  const contour = [
  	0, 0,
  	10, 0,
  	10, 10,
  	20, 10,
  ];
  
  const geo = offsetProfileShapeOnContour(profileShape, contour, false, true);
  const mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial(
  	{color:0xff00ff, side: THREE.DoubleSide, wireframe: true}
  ));
	scene.add(mesh);
}

// good for a closed shape, but not for open shape like a L
function offsetContourClosedShapeDemo(){
  var contour1 = [
    new THREE.Vector2(),
    new THREE.Vector2(5, 0),
    new THREE.Vector2(5, 5),
  ];
  const offsets = [0, 1]
  const color=['green','red']
  for (let i = 0; i < 2; i++){

    let points = OffsetContour(offsets[i], contour1);
    //console.log(points);
    let geom = new THREE.BufferGeometry().setFromPoints(points);
    //geom.rotateX(-Math.PI * 0.5);
    let line = new THREE.LineLoop(geom, new THREE.LineBasicMaterial({color:...