This is throwing errors in vite and I don't know why

linktest.js

@@ -1,10 +1,10 @@
 import * as THREE from 'three';
 
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { GUI } from 'lil-gui';
 
 import { TaperedLink } from './taperedLink.js';
 
-
 const FACE_OPACITY = 0.3;
 const CAMERA_K = 5;
 
@@ -27,13 +27,17 @@ scene.add(amblight);
 camera.position.set(0, 0, CAMERA_K / 2);
 
 camera.lookAt(0, 0, 0);
-//camera.position.z = 4;
+camera.position.z = 8;
 
 const renderer = new THREE.WebGLRenderer({antialias: true});
 renderer.setSize( window.innerWidth, window.innerHeight );
 
 renderer.localClippingEnabled = true;
 
+const controls = new OrbitControls( camera, renderer.domElement );
+
+
+controls.autoRotate = true;
 
 document.body.appendChild( renderer.domElement );
 
@@ -50,13 +54,13 @@ material.opacity = 0.5;
 const node_mat = new THREE.MeshStandardMaterial({ color: NODEC });
 
 node_mat.transparent = true;
-node_mat.opacity = 0.1;
+node_mat.opacity = 0.8;
 
 const params = {
     r1: 0.5,
     r2: 0.6,
     sync: false,
-    l: 3,
+    l: 9,
 };
 
 const gui = new GUI();
@@ -64,7 +68,7 @@ const gui = new GUI();
 gui.add(params, "r1", 0.01, 1.5);
 gui.add(params, "r2", 0.01, 1.5);
 gui.add(params, "sync");
-gui.add(params, "l", 0, 4);
+gui.add(params, "l", 0, 10);
 
 function makeNode(material, pos, r) {
     const geometry = new THREE.SphereGeometry(1);
@@ -84,8 +88,8 @@ function updateNode(node, pos, r) {
 }
     
 
-const n1 = makeNode(node_mat, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]);
+const n1 = makeNode(node_mat, new THREE.Vector3(-params["l"], -1, -1), params["r1"]);
-const n2 = makeNode(node_mat, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"]);
+const n2 = makeNode(node_mat, new THREE.Vector3(params["l"], 1, 1), params["r2"]);
 
 const tl = new TaperedLink(material, n1, n2, params["r1"], params["r2"]);
 
@@ -100,9 +104,10 @@ function animate() {
     const r1 = params["r1"];
     const r2 = params["sync"] ? r1 : params["r2"]
 
-    updateNode(n1, new THREE.Vector3(-0.5 * params["l"], 0, 0), r1);
+    updateNode(n1, new THREE.Vector3(- params["l"], -1, -1), r1);
-    updateNode(n2, new THREE.Vector3(0.5 * params["l"], 0, 0), r2);
+    updateNode(n2, new THREE.Vector3(params["l"], 1, 1), r2);
     tl.update(n1, n2, r1, r2);
+    controls.update();
     renderer.render(scene, camera);
 }
 animate();

taperedLink.js

@@ -1,33 +1,22 @@
 import * as THREE from 'three';
 
-// really stupid idea: add a cylinder as well!
+// wtf dude
-
-const EPSILON = 0.01;
 
 class TaperedLink extends THREE.Group {
 
   constructor(baseMaterial, n1, n2, r1, r2) {
     super();
-    const cone = new THREE.ConeGeometry( 1, 1, 32, true );
+    //const geometry = new THREE.ConeGeometry( 1, 1, 32, true );
+    const geometry = new THREE.CylinderGeometry( 1, 1, 1, 16, 1, true);
     const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
     const material = baseMaterial.clone();
 //    material.clippingPlanes = [ cplane ];
-    this.cone = new THREE.Mesh( cone, material );
+    this.object = new THREE.Mesh( geometry, material );
-    this.add( this.cone );
+    this.add( this.object );
-//    const cylinder = new THREE.CylinderGeometry(1, 1, 1, 16, 1, true);
+    this.update(n1, n2, r1, r2);
-//    const cyl_material = baseMaterial.clone();
-//    cyl_material.color = new THREE.Color(0xff0000); 
-//    this.cylinder = new THREE.Mesh(cylinder, cyl_material);
-//    this.add( this.cylinder );
- //   this.update(n1, n2, r1, r2);
    }
 
-   update(n1, n2, r1, r2) {
+  update_cone_busted(n1, n2, r1, r2) {
-       this.update_cone(n1, n2, r1, r2);
-   }
-
-
-  update_cone(n1, n2, r1, r2) {
     const kraw = r1 - r2;
     let k = ( kraw == 0 ) ? 0.001 : kraw;
     let nbase = n1.v3;
@@ -45,43 +34,40 @@ class TaperedLink extends THREE.Group {
     const l = nbase.distanceTo(napex);
     const lapex = l * rapex / k;
     const h = l + lapex;
-    this.cone.scale.copy(new THREE.Vector3(rbase, h, rbase));
+    this.object.scale.copy(new THREE.Vector3(rbase, h, rbase));
     const h_offset = 0.5 * h / l;
     const pos = new THREE.Vector3();
     pos.lerpVectors(nbase, napex, h_offset);
     
    
-    //if( h_offset > 1 ) { 
+    //this.scale.copy(new THREE.Vector3(rbase, h, rbase));
-    //    this.cone.scale.copy(new THREE.Vector3(rbase, -h, rbase));
-    //} {
-    //    this.cone.scale.copy(new THREE.Vector3(rbase, h, rbase));
-    //}
-    this.lookAt(napex);      // the group, not the cone!!
     this.position.copy(pos); // the group, not the cone!! 
-    this.cone.rotation.x = Math.PI / 2.0;
-//    this.cylinder.rotation.x = Math.PI / 2.0;
-//    const clipnorm = new THREE.Vector3();
-//    clipnorm.copy(napex);
- //   clipnorm.sub(nbase);
- //   clipnorm.negate();
- //   clipnorm.normalize();
- //   this.cone.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
- //     clipnorm, napex
- //   );
 
+    this.lookAt(napex);
+    this.rotation.y = Math.PI / 2.0;
+ /*    const clipnorm = new THREE.Vector3();
+   clipnorm.copy(napex);
+    clipnorm.sub(nbase);
+    clipnorm.negate();
+    clipnorm.normalize();
+    this.cone.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
+      clipnorm, napex
+    );
 
+*/    
   }
 
-    update_cylinder_busted(n1, n2, r1, r2) {
+  update(n1, n2, r1, r2) {
     const length = n1.v3.distanceTo(n2.v3);
     const centre = new THREE.Vector3();
     centre.lerpVectors(n1.v3, n2.v3, 0.5);
     const link_mean = (r1 + r2) * 0.5;		
-        this.cylinder.scale.copy(new THREE.Vector3(link_mean, link_mean, length));
+    this.scale.copy(new THREE.Vector3(link_mean, link_mean, length));
-        this.cylinder.position.copy(centre);
+    this.position.copy(centre);
-        //this.cylinder.lookAt(n2.v3);
+    this.lookAt(n2.v3);
-        this.cylinder.rotation.x = Math.PI / 2.0;
+    this.children[0].rotation.x = Math.PI / 2.0;
+    this.visible = true;
+}	
+
 
-    }
-}
 export { TaperedLink };