Very cursed but entertaining bug as I try to get links scaling well

is making large objects like the 120-cell noticeably stuttery

fourDShape.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 
 
 const HYPERPLANE = 2.0;
-const NODE_FORESHORTENING = 0.4;
+const W_FORESHORTENING = 0.4;
 
 class FourDShape extends THREE.Group {
 
@@ -15,11 +15,10 @@ class FourDShape extends THREE.Group {
 		this.nodes3 = {};
 		this.links = structure.links;
 		this.faces = ( "faces" in structure ) ? structure.faces : [];
-		this.node_size = structure.geometry.node_size;
-		this.link_size = structure.geometry.link_size;
 		this.node_scale = 1;
 		this.link_scale = 1;
 		this.hyperplane = HYPERPLANE;
+		this.foreshortening = W_FORESHORTENING;
 		this.initShapes();
 	}
 
@@ -44,36 +43,63 @@ class FourDShape extends THREE.Group {
 	}
 
 	makeLink(material, link) {
-		const n1 = this.nodes3[link.source].v3;
+		const n1 = this.nodes3[link.source];
-		const n2 = this.nodes3[link.target].v3;
+		const n2 = this.nodes3[link.target];
-		const length = n1.distanceTo(n2);
+		const s1 = n1.scale;
+		const s2 = n2.scale;
+		const length = n1.v3.distanceTo(n2.v3);
 		const centre = new THREE.Vector3();
-		centre.lerpVectors(n1, n2, 0.5);
+		centre.lerpVectors(n1.v3, n2.v3, 0.5);
-		const geometry = new THREE.CylinderGeometry(this.link_size, this.link_size, 1);
+		const geometry = new THREE.CylinderGeometry(this.link_scale * s2, this.link_scale * s1, 1);
 		const cyl = new THREE.Mesh(geometry, material);
 		const edge = new THREE.Group();
 		edge.add(cyl);
 		edge.position.copy(centre);
 		edge.scale.copy(new THREE.Vector3(1, 1, length));
-		edge.lookAt(n2);
+		edge.lookAt(n2.v3);
 		cyl.rotation.x = Math.PI / 2.0;
 		this.add(edge);
 		return edge;
 	}
 
 	updateLink(link, links_show) {
-		const n1 = this.nodes3[link.source].v3;
+		const n1 = this.nodes3[link.source];
-		const n2 = this.nodes3[link.target].v3;
+		const n2 = this.nodes3[link.target];
-		const length = n1.distanceTo(n2);
+		const s1 = n1.scale;
+		const s2 = n2.scale;
+		const length = n1.v3.distanceTo(n2.v3);
 		const centre = new THREE.Vector3();
-		centre.lerpVectors(n1, n2, 0.5);
+		centre.lerpVectors(n1.v3, n2.v3, 0.5);
-		link.object.scale.copy(new THREE.Vector3(this.link_scale, this.link_scale, length));
+		// is this really the only way to do this?
+		//const geometry = new THREE.CylinderGeometry(this.link_scale * s2, this.link_scale * s1, 1);
+		//link.object.children[0].geometry.dispose();
+		this.forshortenLink(link.object.children[0].geometry, this.link_scale * s2, this.link_scale * s1);
+		//const link_hack = this.link_scale * (s1 + s2) * 0.5;		
+		link.object.scale.copy(new THREE.Vector3(1, 1, length));
 		link.object.position.copy(centre);
-		link.object.lookAt(n2);
+		link.object.lookAt(n2.v3);
 		link.object.children[0].rotation.x = Math.PI / 2.0;
+		// link.object.children[0].geometry.needsUpdate = true;
+		// link.object.children[0].geometry.computeVertexNormals();
 		link.object.visible = (!links_show || link.label in links_show); 
 	}
 
+	forshortenLink(geometry, top, bottom) {
+		const count = geometry.attributes.position.count;
+		for( let i = 0; i < count; i++ ) {
+			const x = geometry.attributes.position.getX(i);
+			const y = geometry.attributes.position.getY(i);
+			const z = geometry.attributes.position.getZ(i);
+			if( z == 0 ) {
+				geometry.attributes.position.setX(i, x * top);
+				geometry.attributes.position.setY(i, y * top);
+			} else {
+				geometry.attributes.position.setX(i, x * bottom);
+				geometry.attributes.position.setY(i, y * bottom);
+			}
+		}
+	}
+
 
 	setFaceGeometry(face, geometry) {
 		const values = [];
@@ -133,6 +159,7 @@ class FourDShape extends THREE.Group {
 			const material = this.getMaterial(n, this.node_ms);
 			this.nodes3[n.id] = {
 				v3: v3,
+				scale: k,
 				label: n.label,
 				object: this.makeNode(material, v3, k)
 			};
@@ -154,9 +181,10 @@ class FourDShape extends THREE.Group {
 			const v4 = this.fourDrotate(n.x, n.y, n.z, n.w,  rotations);
 			const k = this.fourDscale(v4.w);
 			const v3 = new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
-			const s4 = k * this.node_scale * NODE_FORESHORTENING;
+			const s4 = k * this.node_scale * this.foreshortening;
 			const s3 = new THREE.Vector3(s4, s4, s4);
 			this.nodes3[n.id].v3 = v3;
+			this.nodes3[n.id].scale = k * this.foreshortening;
 			this.nodes3[n.id].object.position.copy(v3);
 			this.nodes3[n.id].object.scale.copy(s3);
 			this.nodes3[n.id].object.visible = ( !nodes_show || n.label in nodes_show );

gui.js

@@ -2,8 +2,8 @@ import { GUI } from 'lil-gui';
 
 
 const DEFAULTS = {
-	thickness: 0.5,
+	thickness: 0.02,
-	nodesize: 1.5,
+	nodesize: 0.02,
 	linkopacity: 0.5,
 	link2opacity: 0.5,
 	shape: '120-cell',
@@ -67,14 +67,14 @@ class FourDGUI {
 		});
 		this.gui.add(this.params, 'hyperplane', 0.5, 1 / 0.8);
 		this.gui.add(this.params, 'zoom', 0.1, 2.0);
-		this.gui.add(this.params, 'thickness', 0, 1);
+		this.gui.add(this.params, 'thickness', 0, 0.1);
 		this.gui.add(this.params, 'linkopacity', 0, 1).onChange(
 			(v) => setLinkOpacity(v, true)
 		);
 		this.gui.add(this.params, 'link2opacity', 0, 1).onChange(
 			(v) => setLinkOpacity(v, false)
 		);
-		this.gui.add(this.params, 'nodesize', 0.1, 4);
+		this.gui.add(this.params, 'nodesize', 0, 0.1);
 		this.gui.addColor(this.params, 'color').onChange(setColor);
 		this.gui.addColor(this.params, 'background').onChange(setBackground);
 		this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);

polytopes.js

@@ -80,10 +80,6 @@ export const cell5 = () => {
 			{ id:9, source:3, target: 5},
 			{ id:10, source:4, target: 5},
 		],
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [ { name: '--' }],
 		description: `Five tetrahedra joined at ten faces with three
 		tetrahedra around each edge. The 5-cell is the simplest regular
@@ -115,10 +111,6 @@ export const cell16 = () => {
 		name: '16-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [ { name: '--' }],
 		description: `Sixteen tetrahedra joined at 32 faces with four
 		tetrahedra around each edge. The 16-cell is the four-dimensional
@@ -157,10 +149,6 @@ export const tesseract = () => {
 		name: 'Tesseract',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [
 			{ name: 'none', links: [ 0 ] },
 			{ name: 'one 16-cell', links: [ 0, 1 ] },
@@ -221,10 +209,6 @@ export const cell24 = () => {
 		name: '24-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		base: {},
 		options: [
 			{ name: 'none', links: [ 0 ] },
@@ -412,10 +396,6 @@ export const cell120_layered = (max) => {
 		name: '120-cell layered',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		nolink2opacity: true,
 		options: options,
 		description: `This version of the 120-cell lets you explore its
@@ -447,10 +427,6 @@ export const cell120_inscribed = () => {
 		name: '120-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [
 			{ name: "none", links: [ 0 ]},
 			{ name: "one inscribed 600-cell", links: [ 0, 1 ] },
@@ -582,10 +558,6 @@ export const cell600 = () => {
 		name: '600-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [
 			{ name: "none", links: [ 0 ]},
 			{ name: "one 24-cell", links: [ 0, 1 ] },
@@ -635,10 +607,6 @@ export const cell600_layered = () => {
 		name: '600-cell layered',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		nolink2opacity: true,
 		options: options,
 		description: `This version of the 600-cell lets you explore its
@@ -666,10 +634,6 @@ export const snub24cell = () => {
 		name: 'Snub 24-cell',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [ { name: "--" } ],
 		description: `The snub 24-cell is a semiregular polytope which
 		connects the 24-cell with the 600-cell. It consists of 24 icosahedra
@@ -736,10 +700,6 @@ export const dodecahedron = () => {
 		name: 'Dodecahedron',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [
 			{ name: "none", links: [ 0 ]},
 			{ name: "one tetrahedron", links: [ 0, 1 ] },
@@ -774,10 +734,6 @@ export const tetrahedron = () => {
 			{ id:5, source:2, target: 4},
 			{ id:6, source:3, target: 4},
 		],
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [ { name: '--' }],
 		description: `The simplest three-dimensional polytope, consisting of four triangles joined at six edges. The 5-cell is its four-dimensional analogue.`,
 	};
@@ -811,10 +767,6 @@ export const octahedron = () => {
 		name: 'Octahedron',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [ { name: '--' }],
 		description: `The three-dimensional cross-polytope, the 16-cell is its four-dimensional analogue.`,
 	};
@@ -839,10 +791,6 @@ export const cube = () => {
 		name: 'Cube',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [ { name: '--' }],
 		description: `The three-dimensional measure polytope, the tesseract is its four-dimensional analogue.`,
 	};
@@ -885,10 +833,6 @@ export const icosahedron = () => {
 		name: 'Icosahedron',
 		nodes: nodes,
 		links: links,
-		geometry: {
-			node_size: 0.02,
-			link_size: 0.02
-		},
 		options: [
 			{ name: "--"},
 		],