Tube Shader Issue

Tube Shader Not Updating color when new faces are created.

by shakena13

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>JSFiddle - Tube: SHADING ERROR</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
        }
    </style>

</head>
<body>

<canvas class="webgl"></canvas>

<script type="module" src="main.js"></script>

</body>
</html>

JavaScript

// console.log("JavaScript File Connected.");
import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.164.1/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";
import Stats from 'https://cdnjs.cloudflare.com/ajax/libs/stats.js/17/Stats.js'
import datGui from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'

///////////////////////////////////////////////////////////////////////////////////
// :. SCENE - INIT
const canvas = document.querySelector('canvas.webgl')
let scene, sceneSize, camera, renderer, controls, stats
function sceneInit(){
	scene = new THREE.Scene()
	sceneSize = {
		width: window.innerWidth,
		height: window.innerHeight
	}
	// :. Camera
	camera = new THREE.PerspectiveCamera(45, sceneSize.width / sceneSize.height, 0.1, 1000);
	camera.position.set( -4, 3, 9 )
	camera.lookAt( 0, 0, 0 );
	scene.add(camera)

	// :. Renderer
	renderer = new THREE.WebGLRenderer({
		canvas: canvas,
		antialias: true,
		setFaceCulling: false
	})
	renderer.setSize(sceneSize.width, sceneSize.height);
	renderer.sortObjects = true
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.gammaFactor = 2.2;
	renderer.outputColorSpace = THREE.SRGBColorSpace;
	renderer.shadowMap.enabled = true;
	renderer.render(scene, camera)

	// :. Camera Control
	controls = new OrbitControls( camera, renderer.domElement );
	controls.enableDamping = true;
	controls.dampingFactor = 0.2;
	controls.enabled = true;
	controls.update();
	controls.mouseButtons = {
		LEFT: THREE.MOUSE.ROTATE,
		MIDDLE: THREE.MOUSE.DOLLY,
		RIGHT: THREE.MOUSE.PAN
	}

	// :. Lights
	const lightIntensity1 = 0.5
	const lightIntensity2 = 0.8
	function addLightsToScene(){
		let ambientLight = new THREE.AmbientLight(0xffffff, lightIntensity1);
		ambientLight.name = 'myAmbientLight';
		scene.add(ambientLight);

		let dirLight1 = new THREE.DirectionalLight(0xffffff, lightIntensity2);
		dirLight1.name =...