fourDShape.js

@@ -1,12 +1,9 @@
 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) {
@@ -45,40 +42,45 @@ class FourDShape extends THREE.Group {
 		return sphere;
 	}
 
-	makeLink(basematerial, link) {
+	makeLink(material, link) {
 		const n1 = this.nodes3[link.source];
 		const n2 = this.nodes3[link.target];
-		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 );
+		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);
 		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 = 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;
+		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;
 		link.object.visible = (!links_show || link.label in links_show); 
 	}
 

gui.js

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

main.js

@@ -31,10 +31,6 @@ 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,28 +55,8 @@ 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 {
@@ -864,8 +844,7 @@ export const icosahedron = () => {
 
 export const build_all = () => {
 	return [
-	        linkTest(),
-/*		tetrahedron(),
+		tetrahedron(),
 		octahedron(),
 		cube(),
 		icosahedron(),
@@ -879,9 +858,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

@@ -1,64 +0,0 @@
-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 };