Scaled the ends of the links so that they have w-perspective

broken-cursed-links
Mike Lynch 2024-04-26 07:34:27 +10:00
parent f79a90e0d9
commit e478abe7c6
1 changed files with 18 additions and 12 deletions

View File

@ -44,32 +44,36 @@ class FourDShape extends THREE.Group {
} }
makeLink(material, link) { makeLink(material, link) {
const n1 = this.nodes3[link.source].v3; const n1 = this.nodes3[link.source];
const n2 = this.nodes3[link.target].v3; const n2 = this.nodes3[link.target];
const length = n1.distanceTo(n2); const s1 = n1.scale;
const s2 = n2.scale;
const length = n1.v3.distanceTo(n2.v3);
const centre = new THREE.Vector3(); const centre = new THREE.Vector3();
centre.lerpVectors(n1, n2, 0.5); centre.lerpVectors(n1.v3, n2.v3, 0.5);
const geometry = new THREE.CylinderGeometry(this.link_size, this.link_size, 1); const geometry = new THREE.CylinderGeometry(this.link_size * s2, this.link_size * s1, 1);
const cyl = new THREE.Mesh(geometry, material); const cyl = new THREE.Mesh(geometry, material);
const edge = new THREE.Group(); const edge = new THREE.Group();
edge.add(cyl); edge.add(cyl);
edge.position.copy(centre); edge.position.copy(centre);
edge.scale.copy(new THREE.Vector3(1, 1, length)); edge.scale.copy(new THREE.Vector3(1, 1, length));
edge.lookAt(n2); edge.lookAt(n2.v3);
cyl.rotation.x = Math.PI / 2.0; cyl.rotation.x = Math.PI / 2.0;
this.add(edge); this.add(edge);
return edge; return edge;
} }
updateLink(link, links_show) { updateLink(link, links_show) {
const n1 = this.nodes3[link.source].v3; const n1 = this.nodes3[link.source];
const n2 = this.nodes3[link.target].v3; const n2 = this.nodes3[link.target];
const length = n1.distanceTo(n2); const s1 = n1.scale;
const s2 = n2.scale;
const length = n1.v3.distanceTo(n2.v3);
const centre = new THREE.Vector3(); const centre = new THREE.Vector3();
centre.lerpVectors(n1, n2, 0.5); centre.lerpVectors(n1.v3, n2.v3, 0.5);
link.object.scale.copy(new THREE.Vector3(this.link_scale, this.link_scale, length)); link.object.scale.copy(new THREE.Vector3(this.link_size * s2, this.link_size * s1, length));
link.object.position.copy(centre); link.object.position.copy(centre);
link.object.lookAt(n2); link.object.lookAt(n2.v3);
link.object.children[0].rotation.x = Math.PI / 2.0; 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);
} }
@ -133,6 +137,7 @@ class FourDShape extends THREE.Group {
const material = this.getMaterial(n, this.node_ms); const material = this.getMaterial(n, this.node_ms);
this.nodes3[n.id] = { this.nodes3[n.id] = {
v3: v3, v3: v3,
scale: k,
label: n.label, label: n.label,
object: this.makeNode(material, v3, k) object: this.makeNode(material, v3, k)
}; };
@ -157,6 +162,7 @@ class FourDShape extends THREE.Group {
const s4 = k * this.node_scale * NODE_FORESHORTENING; const s4 = k * this.node_scale * NODE_FORESHORTENING;
const s3 = new THREE.Vector3(s4, s4, s4); const s3 = new THREE.Vector3(s4, s4, s4);
this.nodes3[n.id].v3 = v3; this.nodes3[n.id].v3 = v3;
this.nodes3[n.id].scale = k;
this.nodes3[n.id].object.position.copy(v3); this.nodes3[n.id].object.position.copy(v3);
this.nodes3[n.id].object.scale.copy(s3); this.nodes3[n.id].object.scale.copy(s3);
this.nodes3[n.id].object.visible = ( !nodes_show || n.label in nodes_show ); this.nodes3[n.id].object.visible = ( !nodes_show || n.label in nodes_show );