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 +29 -64
5 changed files with 29 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6019237e31 - Show all commits

21
gui.js
View File

@ -2,12 +2,11 @@ import { GUI } from 'lil-gui';
const DEFAULTS = { const DEFAULTS = {
nodesize: 1, nodesize: 0.6,
nodeopacity: 1, nodeopacity: 1,
linksize: 1.0, linksize: 1.0,
linkopacity: 1, linkopacity: 0.75,
link2opacity: 0.75, shape: '120-cell',
shape: '5-cell',
option: 'none', option: 'none',
visibility: 5, visibility: 5,
inscribed: false, inscribed: false,
@ -41,7 +40,6 @@ class FourDGUI {
inscribe_all: this.link['inscribe_all'], inscribe_all: this.link['inscribe_all'],
linksize: this.link['linksize'], linksize: this.link['linksize'],
linkopacity: this.link['linkopacity'], linkopacity: this.link['linkopacity'],
link2opacity: this.link['linkopacity'],
nodesize: this.link['nodesize'], nodesize: this.link['nodesize'],
nodeopacity: this.link['nodeopacity'], nodeopacity: this.link['nodeopacity'],
depth: this.link['depth'], 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, '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, 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, 'nodeopacity', 0, 1).onChange(setNodeOpacity);
this.gui.add(this.params, 'linksize', 0, 5); this.gui.add(this.params, 'linksize', 0, 2);
this.gui.add(this.params, 'linkopacity', 0, 1).onChange( this.gui.add(this.params, 'linkopacity', 0, 1).onChange(setLinkOpacity);
(v) => setLinkOpacity(v, true)
);
this.gui.add(this.params, 'link2opacity', 0, 1).onChange(
(v) => setLinkOpacity(v, false)
);
this.gui.addColor(this.params, 'color').onChange(setColor); this.gui.addColor(this.params, 'color').onChange(setColor);
this.gui.addColor(this.params, 'background').onChange(setBackground); this.gui.addColor(this.params, 'background').onChange(setBackground);
this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]); this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
@ -143,7 +136,6 @@ class FourDGUI {
this.link['zoom'] = this.numParam('zoom', parseFloat); this.link['zoom'] = this.numParam('zoom', parseFloat);
this.link['linksize'] = this.numParam('linksize', parseFloat); this.link['linksize'] = this.numParam('linksize', parseFloat);
this.link['linkopacity'] = this.numParam('linkopacity', parseFloat); this.link['linkopacity'] = this.numParam('linkopacity', parseFloat);
this.link['link2opacity'] = this.numParam('link2opacity', parseFloat);
this.link['nodesize'] = this.numParam('nodesize', parseFloat); this.link['nodesize'] = this.numParam('nodesize', parseFloat);
this.link['nodeopacity'] = this.numParam('nodeopacity', parseFloat); this.link['nodeopacity'] = this.numParam('nodeopacity', parseFloat);
this.link['color'] = this.numParam('color', (s) => guiObj.stringToHex(s)); 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("nodesize", this.params.nodesize.toString());
url.searchParams.append("nodeopacity", this.params.nodesize.toString()); url.searchParams.append("nodeopacity", this.params.nodesize.toString());
url.searchParams.append("linkopacity", this.params.nodeopacity.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("color", this.hexToString(this.params.color));
url.searchParams.append("background", this.hexToString(this.params.background)); url.searchParams.append("background", this.hexToString(this.params.background));
url.searchParams.append("hyperplane", this.params.hyperplane.toString()); url.searchParams.append("hyperplane", this.params.hyperplane.toString());

2
index.html
View File

@ -24,7 +24,7 @@
</style> </style>
</head> </head>
<body> <body>
<script type="module" src="/linktest.js"></script> <script type="module" src="/main.js"></script>
<div id="description"></div> <div id="description"></div>
<div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> - <div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> -
<a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div> <a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>

6
linktest.js
View File

@ -37,7 +37,7 @@ renderer.localClippingEnabled = true;
const controls = new OrbitControls( camera, renderer.domElement ); const controls = new OrbitControls( camera, renderer.domElement );
controls.autoRotate = false; controls.autoRotate = true;
document.body.appendChild( renderer.domElement ); document.body.appendChild( renderer.domElement );
@ -49,12 +49,12 @@ scene.background = new THREE.Color(BACKGROUNDC);
const material = new THREE.MeshStandardMaterial({ color: LINKC }); const material = new THREE.MeshStandardMaterial({ color: LINKC });
material.transparent = true; material.transparent = true;
material.opacity = 0.5; material.opacity = 0.7;
const node_mat = new THREE.MeshStandardMaterial({ color: NODEC }); const node_mat = new THREE.MeshStandardMaterial({ color: NODEC });
node_mat.transparent = true; node_mat.transparent = true;
node_mat.opacity = 0.8; node_mat.opacity = 0.5;
const params = { const params = {
r1: 0.5, r1: 0.5,

23
main.js
View File

@ -40,14 +40,8 @@ document.body.appendChild( renderer.domElement );
// set up colours and materials for gui callbacks // set up colours and materials for gui callbacks
scene.background = new THREE.Color(DEFAULTS.background); scene.background = new THREE.Color(DEFAULTS.background);
const material = new THREE.MeshStandardMaterial({ color: DEFAULTS.color });
const node_colours = get_colours(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 node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
const link_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 = [ const face_ms = [
new THREE.MeshLambertMaterial( { color: 0x44ff44 } ) new THREE.MeshStandardMaterial( { color: 0x44ff44 } )
]; ];
for( const face_m of face_ms ) { for( const face_m of face_ms ) {
@ -128,22 +122,21 @@ function setColors(c) {
node_ms[i].color = new THREE.Color(nc[i]); node_ms[i].color = new THREE.Color(nc[i]);
link_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) { function setBackground(c) {
scene.background = new THREE.Color(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) { function setLinkOpacity(o, primary) {
if( structure.nolink2opacity ) {
link_ms.map((lm) => lm.opacity = o); link_ms.map((lm) => lm.opacity = o);
} else { if( shape ) {
if( primary ) { shape.links.map((l) => l.object.material.opacity = o);
link_ms[0].opacity = o;
} else {
link_ms.slice(1).map((lm) => lm.opacity = o);
}
} }
} }

37
taperedLink.js
View File

@ -1,40 +1,23 @@
import * as THREE from 'three'; import * as THREE from 'three';
const EPSILON = 0.001;
class TaperedLink extends THREE.Group { class TaperedLink extends THREE.Group {
constructor(baseMaterial, n1, n2, r1, r2) { constructor(baseMaterial, n1, n2, r1, r2) {
super(); super();
const geometry = new THREE.ConeGeometry( 1, 1, 16, true ); 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 cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
const material = baseMaterial.clone(); this.material = baseMaterial.clone();
material.clippingPlanes = [ cplane ]; this.material.clippingPlanes = [ cplane ];
this.object = new THREE.Mesh( geometry, material ); this.object = new THREE.Mesh( geometry, this.material );
this.add( this.object ); 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) { update(n1, n2, r1, r2) {
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) {
const kraw = 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 nbase = n1.v3;
let napex = n2.v3; let napex = n2.v3;
let rbase = r1; let rbase = r1;
@ -58,16 +41,14 @@ class TaperedLink extends THREE.Group {
this.position.copy(pos); // the group, not the cone!! this.position.copy(pos); // the group, not the cone!!
this.lookAt(nbase); this.lookAt(nbase);
this.children[0].rotation.x = rotx * Math.PI / 2.0; this.children[0].rotation.x = 3 * 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; this.visible = true;
const clipnorm = new THREE.Vector3(); const clipnorm = new THREE.Vector3();
clipnorm.copy(napex); clipnorm.copy(napex);
clipnorm.sub(nbase); clipnorm.sub(nbase);
clipnorm.negate(); clipnorm.negate();
clipnorm.normalize(); clipnorm.normalize();
this.object.material.clippingPlanes[0].setFromNormalAndCoplanarPoint( this.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
clipnorm, napex clipnorm, napex
); );