bombinans/fourdjs
1
1
Fork 0
Code Issues 9 Pull Requests Packages Projects Releases Wiki Activity

feature-tapered-links-2 #22

Merged
bombinans merged 13 commits from feature-tapered-links-2 into main 2025-11-16 04:34:22 +00:00
Conversation 0 Commits 13 Files Changed 8 +60 -35
3 changed files with 60 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a1fff090fc - Show all commits

34
fourDShape.js
View File

@ -50,16 +50,20 @@ class FourDShape extends THREE.Group {
const n2 = this.nodes3[link.target]; const n2 = this.nodes3[link.target];
const s1 = this.link_scale * n1.scale; const s1 = this.link_scale * n1.scale;
const s2 = this.link_scale * n2.scale; const s2 = this.link_scale * n2.scale;
const length = n1.v3.distanceTo(n2.v3); const edge = new TaperedLink(basematerial, n1, n2, s1, s2);
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 ); this.add( edge );
return 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) { updateLink(link, links_show) {
@ -67,12 +71,14 @@ class FourDShape extends THREE.Group {
const n2 = this.nodes3[link.target]; const n2 = this.nodes3[link.target];
const s1 = this.link_scale * n1.scale; const s1 = this.link_scale * n1.scale;
const s2 = this.link_scale * n2.scale; const s2 = this.link_scale * n2.scale;
const length = n1.v3.distanceTo(n2.v3); link.object.update(n1, n2, s1, s2);
const centre = new THREE.Vector3(); // const length = n1.v3.distanceTo(n2.v3);
centre.lerpVectors(n1.v3, n2.v3, 0.5); // const centre = new THREE.Vector3();
link.object.update(s1, s2, length); // centre.lerpVectors(n1.v3, n2.v3, 0.5);
link.object.position.copy(n1.v3); // link.object.update(s1, s2, length);
link.object.lookAt(n2.v3); // 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); link.object.visible = (!links_show || link.label in links_show);
} }

8
gui.js
View File

@ -2,9 +2,9 @@ import { GUI } from 'lil-gui';
const DEFAULTS = { const DEFAULTS = {
nodesize: 0.25, nodesize: 4,
nodeopacity: 1, nodeopacity: 1,
linksize: 0.2, linksize: 1.0,
linkopacity: 0.75, linkopacity: 0.75,
link2opacity: 0.75, link2opacity: 0.75,
shape: '16-cell', 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, 'hyperplane', 0.5, 1 / 0.8);
this.gui.add(this.params, 'zoom', 0.1, 2.0); 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, '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( this.gui.add(this.params, 'linkopacity', 0, 1).onChange(
(v) => setLinkOpacity(v, true) (v) => setLinkOpacity(v, true)
); );

51
taperedLink.js
View File

@ -1,35 +1,54 @@
import * as THREE from 'three'; import * as THREE from 'three';
class TaperedLink extends THREE.Group { class TaperedLink extends THREE.Group {
constructor(baseMaterial) { constructor(baseMaterial, n1, n2, r1, r2) {
super(); super();
const geometry = new THREE.ConeGeometry( 0.75, 1, 32, true ); const geometry = new THREE.ConeGeometry( 0.75, 1, 32, true );
const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5); const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
const material = baseMaterial.clone(); const material = baseMaterial.clone();
material.clippingPlanes = [ cplane ]; // material.clippingPlanes = [ cplane ];
this.object = new THREE.Mesh( geometry, material ); this.object = new THREE.Mesh( geometry, material );
this.add( this.object ); this.add( this.object );
this.update(n1, n2, r1, r2);
} }
update(r1, r2, l) { update(n1, n2, r1, r2) {
const kraw = ( r1 - r2 ); const kraw = r1 - r2;
const k = ( kraw == 0 ) ? 0.001 : kraw; const k = ( kraw == 0 ) ? 0.001 : kraw;
if( k > 0 ) { let nbase = n1;
const h = l * r1 / k; let napex = n2;
this.object.scale.copy(new THREE.Vector3(r1, h, r1)); let rbase = r1;
this.object.material.clippingPlanes[0].normal.y = -1; let rapex = r2;
this.object.material.clippingPlanes[0].constant = l / 2; if( k < 0 ) {
this.object.position.copy(new THREE.Vector3(0, h/2 - l/2, 0)); nbase = n2;
} else { napex = n1;
const h = l * r2 / k; rbase = r2;
this.object.scale.copy(new THREE.Vector3(r2, h, r2)); rapex = 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));
} }
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));
// }
// }
} }