From e478abe7c688b0b8fbbdbaedcc2aa1a52be774cf Mon Sep 17 00:00:00 2001
From: Mike Lynch <m.lynch@sydney.edu.au>
Date: Fri, 26 Apr 2024 07:34:27 +1000
Subject: [PATCH] Scaled the ends of the links so that they have w-perspective

---
 fourDShape.js | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/fourDShape.js b/fourDShape.js
index d42ac17..bbf4269 100644
--- a/fourDShape.js
+++ b/fourDShape.js
@@ -44,32 +44,36 @@ class FourDShape extends THREE.Group {
 	}
 
 	makeLink(material, link) {
-		const n1 = this.nodes3[link.source].v3;
-		const n2 = this.nodes3[link.target].v3;
-		const length = n1.distanceTo(n2);
+		const n1 = this.nodes3[link.source];
+		const n2 = this.nodes3[link.target];
+		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);
-		const geometry = new THREE.CylinderGeometry(this.link_size, this.link_size, 1);
+		centre.lerpVectors(n1.v3, n2.v3, 0.5);
+		const geometry = new THREE.CylinderGeometry(this.link_size * s2, this.link_size * 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 n2 = this.nodes3[link.target].v3;
-		const length = n1.distanceTo(n2);
+		const n1 = this.nodes3[link.source];
+		const n2 = this.nodes3[link.target];
+		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);
-		link.object.scale.copy(new THREE.Vector3(this.link_scale, this.link_scale, length));
+		centre.lerpVectors(n1.v3, n2.v3, 0.5);
+		link.object.scale.copy(new THREE.Vector3(this.link_size * s2, this.link_size * s1, 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.visible = (!links_show || link.label in links_show); 
 	}
@@ -133,6 +137,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)
 			};
@@ -157,6 +162,7 @@ class FourDShape extends THREE.Group {
 			const s4 = k * this.node_scale * NODE_FORESHORTENING;
 			const s3 = new THREE.Vector3(s4, s4, s4);
 			this.nodes3[n.id].v3 = v3;
+			this.nodes3[n.id].scale = k;
 			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 );