Walls builder

by Dragon3DGraff

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>WallCreation</title>
</head>
<body>
	<script src="https://threejs.org/build/three.js"></script>
	<script >

		const WALLTHICKNESS = 1;
		const wallArray = [];
		const wallArrayOuter = [];

		const points = [];
			points.push( new THREE.Vector2( - 10, 0 ) );
			points.push( new THREE.Vector2( -10, 5 ) );
			points.push( new THREE.Vector2( 12, 5 ) );
			points.push( new THREE.Vector2( 5, -9 ) );

			points.push( new THREE.Vector2( -2, 0 ) );
			// points.push( new THREE.Vector2( 2, 0 ) );

			points.push( new THREE.Vector2( 0, -6 ) );
			points.push( new THREE.Vector2( - 10, 0 ) );

		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
		camera.position.z = 18;

		const renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		const materialSphere = new THREE.MeshBasicMaterial( { color: '#FF0000' } );
		const materialLineMain = new THREE.LineBasicMaterial( { color: 0x00ff00 } );
		const materialWall = new THREE.MeshBasicMaterial( { color: '#FFA500' } );

		const lineMain = createLine(points, materialLineMain);
		scene.add( lineMain );

		for (let i=0; i < points.length; i++){
			if (points[i+1] && points[i+2]){
				const coner = {};
				coner.pointA = points[i];
				coner.vertex = points[i+1];
				coner.pointC = points[i+2];

				const inside = buildEquidistantPoint(coner, WALLTHICKNESS, 'inner');
				const outer = buildEquidistantPoint(coner, WALLTHICKNESS, 'outer');

				wallArray.push(inside);
				wallArrayOuter.push(outer);
			}
		}
		if(points[0].equals(points[points.length-1])) {
			const coner = {};
			coner.pointA = points[points.length - 2];
			coner.vertex = points[0];
			coner.pointC = points[1];

			const inside =...