188 lines
5.0 KiB
JavaScript
188 lines
5.0 KiB
JavaScript
import * as THREE from 'three';
|
|
|
|
|
|
const HYPERPLANE = 2.0;
|
|
const W_FORESHORTENING = 0.04;
|
|
|
|
class FourDShape extends THREE.Group {
|
|
|
|
constructor(node_ms, link_ms, face_ms, structure) {
|
|
super();
|
|
this.node_ms = node_ms;
|
|
this.link_ms = link_ms;
|
|
this.face_ms = face_ms;
|
|
this.nodes4 = structure.nodes;
|
|
this.nodes3 = {};
|
|
this.links = structure.links;
|
|
this.faces = ( "faces" in structure ) ? structure.faces : [];
|
|
this.node_scale = 1;
|
|
this.link_scale = 1;
|
|
this.hyperplane = HYPERPLANE;
|
|
this.foreshortening = W_FORESHORTENING;
|
|
this.initShapes();
|
|
}
|
|
|
|
|
|
|
|
// if a node/link has no label, use the 0th material
|
|
|
|
getMaterial(entity, materials) {
|
|
if( "label" in entity ) {
|
|
return materials[entity.label];
|
|
} else {
|
|
return materials[0];
|
|
}
|
|
}
|
|
|
|
makeNode(material, v3, scale) {
|
|
const geometry = new THREE.SphereGeometry(this.node_size);
|
|
const sphere = new THREE.Mesh(geometry, material);
|
|
sphere.position.copy(v3);
|
|
this.add(sphere);
|
|
return sphere;
|
|
}
|
|
|
|
makeLink(material, link) {
|
|
const n1 = this.nodes3[link.source];
|
|
const n2 = this.nodes3[link.target];
|
|
const s1 = n1.scale;
|
|
const s2 = n2.scale;
|
|
const length = n1.v3.distanceTo(n2.v3);
|
|
const centre = new THREE.Vector3();
|
|
centre.lerpVectors(n1.v3, n2.v3, 0.5);
|
|
const geometry = new THREE.CylinderGeometry(
|
|
this.link_scale * s2, this.link_scale * s1, 1,
|
|
16, 1, true
|
|
);
|
|
const cyl = new THREE.Mesh(geometry, material);
|
|
const edge = new THREE.Group();
|
|
edge.add(cyl);
|
|
edge.position.copy(centre);
|
|
edge.scale.copy(new THREE.Vector3(1, 1, length));
|
|
edge.lookAt(n2.v3);
|
|
cyl.rotation.x = Math.PI / 2.0;
|
|
this.add(edge);
|
|
return edge;
|
|
}
|
|
|
|
updateLink(link, links_show) {
|
|
const n1 = this.nodes3[link.source];
|
|
const n2 = this.nodes3[link.target];
|
|
const s1 = n1.scale;
|
|
const s2 = n2.scale;
|
|
const length = n1.v3.distanceTo(n2.v3);
|
|
const centre = new THREE.Vector3();
|
|
centre.lerpVectors(n1.v3, n2.v3, 0.5);
|
|
// take the average of the ends as the thickness - as a workaround,
|
|
// because I haven't worked out how to reshape tapered links without
|
|
// having to reassign a new geometry to every link
|
|
const link_mean = this.link_scale * (s1 + s2) * 0.5;
|
|
link.object.scale.copy(new THREE.Vector3(link_mean, link_mean, length));
|
|
link.object.position.copy(centre);
|
|
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);
|
|
}
|
|
|
|
|
|
setFaceGeometry(face, geometry) {
|
|
const values = [];
|
|
for( const f of face.nodes ) {
|
|
const v3 = this.nodes3[f].v3;
|
|
values.push(v3.x);
|
|
values.push(v3.y);
|
|
values.push(v3.z);
|
|
}
|
|
const v3 = this.nodes3[face.nodes[0]].v3;
|
|
values.push(v3.x);
|
|
values.push(v3.y);
|
|
values.push(v3.z);
|
|
const vertices = new Float32Array(values);
|
|
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
|
|
}
|
|
|
|
makeFace(material, face) {
|
|
const geometry = new THREE.BufferGeometry();
|
|
this.setFaceGeometry(face, geometry)
|
|
const mesh = new THREE.Mesh( geometry, material );
|
|
this.add(mesh);
|
|
return mesh;
|
|
}
|
|
|
|
|
|
fourDtoV3_old(x, y, z, w, rotations) {
|
|
const v4 = new THREE.Vector4(x, y, z, w);
|
|
for ( const m4 of rotations ) {
|
|
v4.applyMatrix4(m4);
|
|
}
|
|
const k = this.fourDscale(v4.w);
|
|
return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
|
|
}
|
|
|
|
fourDscale(w) {
|
|
return this.hyperplane / ( this.hyperplane + w );
|
|
}
|
|
|
|
fourDrotate(x, y, z, w, rotations) {
|
|
const v4 = new THREE.Vector4(x, y, z, w);
|
|
for ( const m4 of rotations ) {
|
|
v4.applyMatrix4(m4);
|
|
}
|
|
return v4;
|
|
}
|
|
|
|
fourDtoV3(v4) {
|
|
const k = this.fourDscale(v4.w);
|
|
return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
|
|
}
|
|
|
|
initShapes() {
|
|
for( const n of this.nodes4 ) {
|
|
const k = this.fourDscale(n.w);
|
|
const v3 = new THREE.Vector3(n.x * k, n.y * k, n.z * k);
|
|
const material = this.getMaterial(n, this.node_ms);
|
|
this.nodes3[n.id] = {
|
|
v3: v3,
|
|
scale: k,
|
|
label: n.label,
|
|
object: this.makeNode(material, v3, k)
|
|
};
|
|
}
|
|
for( const l of this.links ) {
|
|
const material = this.getMaterial(l, this.link_ms);
|
|
l.object = this.makeLink(material, l);
|
|
}
|
|
for( const f of this.faces ) {
|
|
const material = this.getMaterial(f, this.face_ms);
|
|
f.object = this.makeFace(material, f);
|
|
}
|
|
}
|
|
|
|
|
|
render3(rotations, nodes_show, links_show) {
|
|
this.scalev3 = new THREE.Vector3(this.node_scale, this.node_scale, this.node_scale);
|
|
for( const n of this.nodes4 ) {
|
|
const v4 = this.fourDrotate(n.x, n.y, n.z, n.w, rotations);
|
|
const k = this.fourDscale(v4.w);
|
|
const v3 = new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
|
|
const s4 = k * this.node_scale * this.foreshortening;
|
|
const s3 = new THREE.Vector3(s4, s4, s4);
|
|
this.nodes3[n.id].v3 = v3;
|
|
this.nodes3[n.id].scale = k * this.foreshortening;
|
|
this.nodes3[n.id].object.position.copy(v3);
|
|
this.nodes3[n.id].object.scale.copy(s3);
|
|
this.nodes3[n.id].object.visible = ( !nodes_show || n.label in nodes_show );
|
|
}
|
|
for( const l of this.links ) {
|
|
this.updateLink(l, links_show);
|
|
}
|
|
|
|
for( const f of this.faces ) {
|
|
this.setFaceGeometry(f, f.object.geometry);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
export { FourDShape };
|