From 6019237e3194407754aa62fd7f0c424bd61d0967 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 16 Nov 2025 14:13:02 +1100 Subject: [PATCH] Fixing a few things before releasing the taperedLink version --- gui.js | 21 ++++++--------------- index.html | 2 +- linktest.js | 6 +++--- main.js | 27 ++++++++++----------------- taperedLink.js | 37 +++++++++---------------------------- 5 files changed, 29 insertions(+), 64 deletions(-) diff --git a/gui.js b/gui.js index c7fc05b..8e4755a 100644 --- a/gui.js +++ b/gui.js @@ -2,12 +2,11 @@ import { GUI } from 'lil-gui'; const DEFAULTS = { - nodesize: 1, + nodesize: 0.6, nodeopacity: 1, linksize: 1.0, - linkopacity: 1, - link2opacity: 0.75, - shape: '5-cell', + linkopacity: 0.75, + shape: '120-cell', option: 'none', visibility: 5, inscribed: false, @@ -41,7 +40,6 @@ class FourDGUI { inscribe_all: this.link['inscribe_all'], linksize: this.link['linksize'], linkopacity: this.link['linkopacity'], - link2opacity: this.link['linkopacity'], nodesize: this.link['nodesize'], nodeopacity: this.link['nodeopacity'], depth: this.link['depth'], @@ -72,15 +70,10 @@ 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.5); this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(setNodeOpacity); - this.gui.add(this.params, 'linksize', 0, 5); - 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, 'linksize', 0, 2); + this.gui.add(this.params, 'linkopacity', 0, 1).onChange(setLinkOpacity); 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' ]); @@ -143,7 +136,6 @@ class FourDGUI { this.link['zoom'] = this.numParam('zoom', parseFloat); this.link['linksize'] = this.numParam('linksize', parseFloat); this.link['linkopacity'] = this.numParam('linkopacity', parseFloat); - this.link['link2opacity'] = this.numParam('link2opacity', parseFloat); this.link['nodesize'] = this.numParam('nodesize', parseFloat); this.link['nodeopacity'] = this.numParam('nodeopacity', parseFloat); this.link['color'] = this.numParam('color', (s) => guiObj.stringToHex(s)); @@ -163,7 +155,6 @@ class FourDGUI { url.searchParams.append("nodesize", this.params.nodesize.toString()); url.searchParams.append("nodeopacity", this.params.nodesize.toString()); url.searchParams.append("linkopacity", this.params.nodeopacity.toString()); - url.searchParams.append("link2opacity", this.params.link2opacity.toString()); url.searchParams.append("color", this.hexToString(this.params.color)); url.searchParams.append("background", this.hexToString(this.params.background)); url.searchParams.append("hyperplane", this.params.hyperplane.toString()); diff --git a/index.html b/index.html index ccbdcd9..9dcf112 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ - +
by Mike Lynch - source
diff --git a/linktest.js b/linktest.js index be36173..dc2157e 100644 --- a/linktest.js +++ b/linktest.js @@ -37,7 +37,7 @@ renderer.localClippingEnabled = true; const controls = new OrbitControls( camera, renderer.domElement ); -controls.autoRotate = false; +controls.autoRotate = true; document.body.appendChild( renderer.domElement ); @@ -49,12 +49,12 @@ scene.background = new THREE.Color(BACKGROUNDC); const material = new THREE.MeshStandardMaterial({ color: LINKC }); material.transparent = true; -material.opacity = 0.5; +material.opacity = 0.7; const node_mat = new THREE.MeshStandardMaterial({ color: NODEC }); node_mat.transparent = true; -node_mat.opacity = 0.8; +node_mat.opacity = 0.5; const params = { r1: 0.5, diff --git a/main.js b/main.js index b285ae2..b728f94 100644 --- a/main.js +++ b/main.js @@ -40,14 +40,8 @@ document.body.appendChild( renderer.domElement ); // set up colours and materials for gui callbacks scene.background = new THREE.Color(DEFAULTS.background); -const material = new THREE.MeshStandardMaterial({ color: DEFAULTS.color }); const node_colours = get_colours(DEFAULTS.color); - -material.transparent = true; -material.opacity = 0.5; - - const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c})); const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c})); @@ -66,7 +60,7 @@ link_ms.map((m) => { const face_ms = [ - new THREE.MeshLambertMaterial( { color: 0x44ff44 } ) + new THREE.MeshStandardMaterial( { color: 0x44ff44 } ) ]; for( const face_m of face_ms ) { @@ -128,23 +122,22 @@ function setColors(c) { node_ms[i].color = new THREE.Color(nc[i]); link_ms[i].color = new THREE.Color(nc[i]); } - material.color = new THREE.Color(c); + //material.color = new THREE.Color(c); } function setBackground(c) { scene.background = new THREE.Color(c) } +// taperedLinks have their own materials so we have to set opacity +// on them individually. And also set the base materials as they +// will get updated from it when the shape changes + function setLinkOpacity(o, primary) { - if( structure.nolink2opacity ) { - link_ms.map((lm) => lm.opacity = o); - } else { - if( primary ) { - link_ms[0].opacity = o; - } else { - link_ms.slice(1).map((lm) => lm.opacity = o); - } - } + link_ms.map((lm) => lm.opacity = o); + if( shape ) { + shape.links.map((l) => l.object.material.opacity = o); + } } function setNodeOpacity(o) { diff --git a/taperedLink.js b/taperedLink.js index fb93339..d81a5fd 100644 --- a/taperedLink.js +++ b/taperedLink.js @@ -1,40 +1,23 @@ - - import * as THREE from 'three'; +const EPSILON = 0.001; class TaperedLink extends THREE.Group { constructor(baseMaterial, n1, n2, r1, r2) { super(); const geometry = new THREE.ConeGeometry( 1, 1, 16, true ); - //const geometry = new THREE.CylinderGeometry( 1, 1, 1, 16, 1, true); const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5); - const material = baseMaterial.clone(); - material.clippingPlanes = [ cplane ]; - this.object = new THREE.Mesh( geometry, material ); + this.material = baseMaterial.clone(); + this.material.clippingPlanes = [ cplane ]; + this.object = new THREE.Mesh( geometry, this.material ); this.add( this.object ); - this.update(n1, n2, r1, r2, 1, 0, 0); + this.update(n1, n2, r1, r2); } - update_cyl(n1, n2, r1, r2, rotx, roty, rotz) { - const length = n1.v3.distanceTo(n2.v3); - const centre = new THREE.Vector3(); - centre.lerpVectors(n1.v3, n2.v3, 0.5); - const link_mean = (r1 + r2) * 0.5; - this.scale.copy(new THREE.Vector3(link_mean, link_mean, length)); - this.position.copy(centre); - this.lookAt(n2.v3); - this.children[0].rotation.x = rotx * Math.PI / 2.0; - this.children[0].rotation.y = roty * Math.PI / 2.0; - this.children[0].rotation.z = rotz * Math.PI / 2.0; - this.visible = true; - } - - - update(n1, n2, r1, r2, rotx, roty, rotz) { + update(n1, n2, r1, r2) { const kraw = r1 - r2; - let k = ( kraw == 0 ) ? 0.001 : kraw; + let k = ( Math.abs(kraw) < EPSILON ) ? EPSILON : kraw; let nbase = n1.v3; let napex = n2.v3; let rbase = r1; @@ -58,16 +41,14 @@ class TaperedLink extends THREE.Group { this.position.copy(pos); // the group, not the cone!! this.lookAt(nbase); - this.children[0].rotation.x = rotx * Math.PI / 2.0; - this.children[0].rotation.y = roty * Math.PI / 2.0; - this.children[0].rotation.z = rotz * Math.PI / 2.0; + this.children[0].rotation.x = 3 * Math.PI / 2.0; this.visible = true; const clipnorm = new THREE.Vector3(); clipnorm.copy(napex); clipnorm.sub(nbase); clipnorm.negate(); clipnorm.normalize(); - this.object.material.clippingPlanes[0].setFromNormalAndCoplanarPoint( + this.material.clippingPlanes[0].setFromNormalAndCoplanarPoint( clipnorm, napex );