Added a shape with a single link to make testing easier

to properly-scaled links is viable

fourDShape.js

@@ -1,9 +1,12 @@
 import * as THREE from 'three';
 
+import { TaperedLink } from './taperedLink.js';
+
 
 const HYPERPLANE = 2.0;
 const W_FORESHORTENING = 0.04;
 
+
 class FourDShape extends THREE.Group {
 
 	constructor(node_ms, link_ms, face_ms, structure) {
@@ -42,45 +45,40 @@ class FourDShape extends THREE.Group {
 		return sphere;
 	}
 
-	makeLink(material, link) {
+	makeLink(basematerial, link) {
 		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.v3, n2.v3, 0.5);
-		const geometry = new THREE.CylinderGeometry(
-			this.link_scale * s2, this.link_scale * s1, 1,
-			16, 1, true
-		);
-		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.v3);
-		cyl.rotation.x = Math.PI / 2.0;
-		this.add(edge);
+		const s1 = this.link_scale * n1.scale;
+		const s2 = this.link_scale * n2.scale;
+		const edge = new TaperedLink(basematerial, n1, n2, s1, s2);
+		this.add( edge );
 		return edge;
+		// const length = n1.v3.distanceTo(n2.v3);
+		// const centre = nfew THREE.Vector3();
+		// centre.lerpVectors(n1.v3, n2.v3, 0.5);
+
+		// const edge = new TaperedLink(basematerial);
+		// edge.update(s1, s2, length);
+		// edge.position.copy(centre);
+		// edge.lookAt(n2.v3);
+		// edge.children[0].rotation.x = Math.PI / 2.0;
+		// this.add(edge);
+		// return edge;
 	}
 
 	updateLink(link, links_show) {
 		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.v3, n2.v3, 0.5);
-		// take the average of the ends as the thickness - as a workaround,
-		// because I haven't worked out how to reshape tapered links without
-		// having to reassign a new geometry to every link
-		const link_mean = this.link_scale * (s1 + s2) * 0.5;		
-		link.object.scale.copy(new THREE.Vector3(link_mean, link_mean, length));
-		link.object.position.copy(centre);
-		link.object.lookAt(n2.v3);
-		link.object.children[0].rotation.x = Math.PI / 2.0;
+		const s1 = this.link_scale * n1.scale;
+		const s2 = this.link_scale * n2.scale;
+		link.object.update(n1, n2, s1, s2);
+		// const length = n1.v3.distanceTo(n2.v3);
+		// const centre = new THREE.Vector3();
+		// centre.lerpVectors(n1.v3, n2.v3, 0.5);
+		// link.object.update(s1, s2, length);
+		// link.object.position.copy(n1.v3);
+		// 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); 
 	}
 

gui.js

@@ -2,12 +2,12 @@ import { GUI } from 'lil-gui';
 
 
 const DEFAULTS = {
-	nodesize: 0.25,
+	nodesize: 4,
 	nodeopacity: 1,
-	linksize: 0.2,
+	linksize: 1.0,
 	linkopacity: 0.75,
 	link2opacity: 0.75,
-	shape: '120-cell',
+	shape: 'linky',
 	option: 'none',
 	visibility: 5,
 	inscribed: false,
@@ -72,9 +72,9 @@ 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, 'nodesize', 0, 1);
+		this.gui.add(this.params, 'nodesize', 0, 5);
 		this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(setNodeOpacity);
-		this.gui.add(this.params, 'linksize', 0, 1);
+		this.gui.add(this.params, 'linksize', 0, 5);
 		this.gui.add(this.params, 'linkopacity', 0, 1).onChange(
 			(v) => setLinkOpacity(v, true)
 		);

main.js

@@ -31,6 +31,10 @@ camera.lookAt(0, 0, 0);
 
 const renderer = new THREE.WebGLRenderer({antialias: true});
 renderer.setSize( window.innerWidth, window.innerHeight );
+
+renderer.localClippingEnabled = true;
+
+
 document.body.appendChild( renderer.domElement );
 
 // set up colours and materials for gui callbacks

polytopes.js

@@ -55,8 +55,28 @@ export function auto_detect_edges(nodes, neighbours, debug=false) {
 	return links;
 }
 
+
+export const linkTest = () => {
+    return {
+        name: 'linky',
+        nodes: [
+            { id:1, label: 1, x: -1, y: -1, z:-1, w: 0 },
+            { id:2, label: 2, x: 1, y: 1, z: 1, w: 0 },
+        ],
+        links: [
+            { id: 1, source: 1, target: 2 }
+        ],
+  		options: [ { name: '--' }],
+		description: `link`,
+	  }
+};
+
+
+
 // too small and simple to calculate
 
+
+
 export const cell5 = () => {
 	const c1 = Math.sqrt(5) / 4;
 	return {
@@ -844,7 +864,8 @@ export const icosahedron = () => {
 
 export const build_all = () => {
 	return [
-		tetrahedron(),
+	        linkTest(),
+/*		tetrahedron(),
 		octahedron(),
 		cube(),
 		icosahedron(),
@@ -858,9 +879,9 @@ export const build_all = () => {
 		cell600_layered(),
 	 	cell120_inscribed(),
 	 	cell120_layered()
-	 	];
+	*/ 	];
 }
 
 export const radii = (shape) => {
 	return shape.nodes.map(n => Math.sqrt(n.x * n.x + n.y * n.y + n.z * n.z + n.w * n.w))
-}
+}

taperedLink.js

@@ -0,0 +1,64 @@
+import * as THREE from 'three';
+
+
+
+class TaperedLink extends THREE.Group {
+
+  constructor(baseMaterial, n1, n2, r1, r2) {
+    super();
+    const geometry = new THREE.ConeGeometry( 0.75, 1, 32, 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( geometry, material );
+    this.add( this.cone );
+    this.update(n1, n2, r1, r2);
+  }  
+
+  update(n1, n2, r1, r2) {
+    const kraw = r1 - r2;
+    let k = ( kraw == 0 ) ? 0.001 : kraw;
+    let nbase = n1.v3;
+    let napex = n2.v3;
+    let rbase = r1;
+    let rapex = r2;
+    if( k < 0 ) {
+      nbase = n2.v3;
+      napex = n1.v3;
+      rbase = r2;
+      rapex = r1;
+      k = -k;
+    }
+
+    // FIXME - the problem is that when the h_offset > 1, the centroid
+    // of the cone is on the other side of napex, so it looks the wrong way
+
+    const l = nbase.distanceTo(napex);
+    const h = l * rbase / k;
+    const h_offset = 0.5 * h / l;
+    const pos = new THREE.Vector3();
+    if( l > 0 ) {
+      pos.lerpVectors(nbase, napex, h_offset);
+    }
+    if( h_offset < 1 ) { 
+      this.cone.scale.copy(new THREE.Vector3(rbase, h, rbase));
+    } else {
+      // you're on the other side of napex so flip the cone
+      this.cone.scale.copy(new THREE.Vector3(rbase, -h, rbase));      
+    }
+    this.lookAt(napex);
+    this.position.copy(pos);
+    this.cone.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
+      );
+  }
+
+}
+
+export { TaperedLink };