fourdjs/fourDShape.js

177 lines
4.8 KiB
JavaScript
Raw Normal View History

2023-07-24 23:05:06 +00:00
import * as THREE from 'three';
const HYPERPLANE = 2.0;
2024-04-14 06:08:46 +00:00
const NODE_FORESHORTENING = 0.4;
2023-07-24 23:05:06 +00:00
class FourDShape extends THREE.Group {
2023-07-28 07:06:42 +00:00
constructor(node_ms, link_ms, face_ms, structure) {
2023-07-24 23:05:06 +00:00
super();
this.node_ms = node_ms;
2023-07-24 23:34:53 +00:00
this.link_ms = link_ms;
2023-07-28 07:06:42 +00:00
this.face_ms = face_ms;
2023-07-24 23:05:06 +00:00
this.nodes4 = structure.nodes;
this.nodes3 = {};
this.links = structure.links;
2023-07-28 07:06:42 +00:00
this.faces = ( "faces" in structure ) ? structure.faces : [];
2023-07-29 06:23:08 +00:00
this.node_size = structure.geometry.node_size;
this.link_size = structure.geometry.link_size;
this.node_scale = 1;
this.link_scale = 1;
2023-07-25 05:43:26 +00:00
this.hyperplane = HYPERPLANE;
2024-04-25 00:37:45 +00:00
this.projection = 1;
2023-07-24 23:05:06 +00:00
this.initShapes();
}
2023-07-25 05:43:26 +00:00
2023-07-24 23:34:53 +00:00
// 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) {
2023-07-29 06:23:08 +00:00
const geometry = new THREE.SphereGeometry(this.node_size);
2023-07-24 23:05:06 +00:00
const sphere = new THREE.Mesh(geometry, material);
sphere.position.copy(v3);
this.add(sphere);
return sphere;
}
2023-07-24 23:34:53 +00:00
makeLink(material, link) {
2023-07-24 23:05:06 +00:00
const n1 = this.nodes3[link.source].v3;
const n2 = this.nodes3[link.target].v3;
const length = n1.distanceTo(n2);
const centre = new THREE.Vector3();
centre.lerpVectors(n1, n2, 0.5);
2023-07-29 06:23:08 +00:00
const geometry = new THREE.CylinderGeometry(this.link_size, this.link_size, 1);
2023-07-24 23:34:53 +00:00
const cyl = new THREE.Mesh(geometry, material);
2023-07-24 23:05:06 +00:00
const edge = new THREE.Group();
edge.add(cyl);
edge.position.copy(centre);
edge.scale.copy(new THREE.Vector3(1, 1, length));
edge.lookAt(n2);
cyl.rotation.x = Math.PI / 2.0;
this.add(edge);
return edge;
}
updateLink(link, links_show) {
2023-07-24 23:05:06 +00:00
const n1 = this.nodes3[link.source].v3;
const n2 = this.nodes3[link.target].v3;
const length = n1.distanceTo(n2);
const centre = new THREE.Vector3();
centre.lerpVectors(n1, n2, 0.5);
link.object.scale.copy(new THREE.Vector3(this.link_scale, this.link_scale, length));
2023-07-24 23:05:06 +00:00
link.object.position.copy(centre);
link.object.lookAt(n2);
link.object.children[0].rotation.x = Math.PI / 2.0;
link.object.visible = (!links_show || link.label in links_show);
2023-07-24 23:05:06 +00:00
}
2023-07-28 07:06:42 +00:00
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;
}
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;
}
2024-04-25 00:37:45 +00:00
renderNodePerspective(n, rotations) {
const v4 = this.fourDrotate(n.x, n.y, n.z, n.w, rotations);
const k = this.fourDscale(v4.w);
2024-04-25 00:37:45 +00:00
const position = new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
const s4 = k * this.node_scale * NODE_FORESHORTENING;
const scale = new THREE.Vector3(s4, s4, s4);
return { position: position, scale: scale }
}
2023-07-25 05:43:26 +00:00
2024-04-25 00:37:45 +00:00
renderNodeIsometric(n, rotations) {
const v4 = this.fourDrotate(n.x, n.y, n.z, n.w, rotations);
const position = new THREE.Vector3(v4.x, v4.y + v4.w, v4.z);
const s4 = this.node_scale;
const scale = new THREE.Vector3(s4, s4, s4);
return { position: position, scale: scale }
}
2023-07-24 23:05:06 +00:00
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);
2023-07-24 23:34:53 +00:00
const material = this.getMaterial(n, this.node_ms);
2023-07-24 23:05:06 +00:00
this.nodes3[n.id] = {
v3: v3,
label: n.label,
object: this.makeNode(material, v3, k)
2023-07-24 23:05:06 +00:00
};
}
for( const l of this.links ) {
2023-07-24 23:34:53 +00:00
const material = this.getMaterial(l, this.link_ms);
l.object = this.makeLink(material, l);
2023-07-24 23:05:06 +00:00
}
2023-07-31 07:37:19 +00:00
for( const f of this.faces ) {
const material = this.getMaterial(f, this.face_ms);
f.object = this.makeFace(material, f);
}
2023-07-24 23:05:06 +00:00
}
2023-07-25 05:43:26 +00:00
render3(rotations, nodes_show, links_show) {
this.scalev3 = new THREE.Vector3(this.node_scale, this.node_scale, this.node_scale);
2023-07-24 23:05:06 +00:00
for( const n of this.nodes4 ) {
2024-04-25 00:37:45 +00:00
const node3d = this.renderNodeIsometric(n, rotations);
this.nodes3[n.id].v3 = node3d.position;
this.nodes3[n.id].object.position.copy(node3d.position);
this.nodes3[n.id].object.scale.copy(node3d.scale);
this.nodes3[n.id].object.visible = ( !nodes_show || n.label in nodes_show );
2023-07-24 23:05:06 +00:00
}
for( const l of this.links ) {
this.updateLink(l, links_show);
2023-07-24 23:05:06 +00:00
}
2023-07-28 07:06:42 +00:00
2023-07-31 07:37:19 +00:00
for( const f of this.faces ) {
this.setFaceGeometry(f, f.object.geometry);
}
2023-07-24 23:05:06 +00:00
}
}
2023-07-31 07:33:40 +00:00
export { FourDShape };