diff --git a/fourDShape.js b/fourDShape.js index bc3bda0..609e1cc 100644 --- a/fourDShape.js +++ b/fourDShape.js @@ -50,16 +50,20 @@ class FourDShape extends THREE.Group { const n2 = this.nodes3[link.target]; const s1 = this.link_scale * n1.scale; const s2 = this.link_scale * n2.scale; - const length = n1.v3.distanceTo(n2.v3); - const centre = new 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); - this.add(edge); + 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) { @@ -67,12 +71,14 @@ class FourDShape extends THREE.Group { const n2 = this.nodes3[link.target]; const s1 = this.link_scale * n1.scale; const s2 = this.link_scale * n2.scale; - 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.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); } diff --git a/gui.js b/gui.js index 57df9d4..06d83c9 100644 --- a/gui.js +++ b/gui.js @@ -2,9 +2,9 @@ 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: '16-cell', @@ -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) ); diff --git a/taperedLink.js b/taperedLink.js index 0ccfcf7..2473430 100644 --- a/taperedLink.js +++ b/taperedLink.js @@ -1,35 +1,54 @@ import * as THREE from 'three'; + class TaperedLink extends THREE.Group { - constructor(baseMaterial) { + 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 ]; +// material.clippingPlanes = [ cplane ]; this.object = new THREE.Mesh( geometry, material ); this.add( this.object ); + this.update(n1, n2, r1, r2); } - update(r1, r2, l) { - const kraw = ( r1 - r2 ); + update(n1, n2, r1, r2) { + const kraw = r1 - r2; const k = ( kraw == 0 ) ? 0.001 : kraw; - if( k > 0 ) { - const h = l * r1 / k; - this.object.scale.copy(new THREE.Vector3(r1, h, r1)); - this.object.material.clippingPlanes[0].normal.y = -1; - this.object.material.clippingPlanes[0].constant = l / 2; - this.object.position.copy(new THREE.Vector3(0, h/2 - l/2, 0)); - } else { - const h = l * r2 / k; - this.object.scale.copy(new THREE.Vector3(r2, h, r2)); - this.object.material.clippingPlanes[0].normal.y = 1; - this.object.material.clippingPlanes[0].constant = l / 2; - this.object.position.copy(new THREE.Vector3(0, h / 2 + l / 2, 0)); + let nbase = n1; + let napex = n2; + let rbase = r1; + let rapex = r2; + if( k < 0 ) { + nbase = n2; + napex = n1; + rbase = r2; + rapex = r1; } + const l = nbase.v3.distanceTo(napex.v3); + + const h = l * rbase / k; + //const pos = new THREE.Vector3(0, h/2 - l/2, 0); + //pos.add(nbase.v3); + this.object.scale.copy(new THREE.Vector3(rbase, h, rbase)); + this.object.position.copy(nbase.v3); + this.object.lookAt(napex.v3); + this.object.rotation.x = Math.PI / 2.0; } + // this.object.material.clippingPlanes[0].normal.y = -1; + // this.object.material.clippingPlanes[0].constant = l / 2; + //this.object.position.copy(new THREE.Vector3(0, h/2 - l/2, 0)); + // } else { + // const h = l * r2 / k; + // this.object.scale.copy(new THREE.Vector3(r2, h, r2)); + // // this.object.material.clippingPlanes[0].normal.y = 1; + // // this.object.material.clippingPlanes[0].constant = l / 2; + // //this.object.position.copy(new THREE.Vector3(0, h / 2 + l / 2, 0)); + // } + // } }