fourdjs/main.js

259 lines
5.3 KiB
JavaScript

import * as THREE from 'three';
import * as SHAPES from './shapes.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const NODE_SIZE = 0.07;
const LINK_SIZE = 0.03;
const NODE_OPACITY = 1.0;
const LINK_OPACITY = 0.8;
const HYPERPLANE = 2;
// hacky stuff for 4d rotations
// see https://math.stackexchange.com/questions/1402362/can-rotations-in-4d-be-given-an-explicit-matrix-form#1402376
function rotZW(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
ctheta, -stheta, 0, 0,
stheta, ctheta, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
}
function rotYW(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
ctheta, 0, -stheta, 0,
0, 1, 0, 0,
stheta, 0, ctheta, 0,
0, 0, 0, 1,
);
}
function rotYZ(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
ctheta, 0, 0, -stheta,
0, 1, 0, 0,
0, 0, 1, 0,
stheta, 0, 0, ctheta,
);
}
function rotXW(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
1, 0, 0, 0,
0, ctheta, -stheta, 0,
0, stheta, ctheta, 0,
0, 0, 0, 1
);
}
function rotXZ(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
1, 0, 0, 0,
0, ctheta, 0, -stheta,
0, 0, 1, 0,
0, stheta, 0, ctheta,
);
}
function rotXY(theta) {
const ctheta = Math.cos(theta);
const stheta = Math.sin(theta);
return new THREE.Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, ctheta, -stheta,
0, 0, stheta, ctheta,
);
}
// putting rotation here first - it's a matrix4
function fourDtoV3(x, y, z, w, rotations) {
const v4 = new THREE.Vector4(x, y, z, w);
for ( const m4 of rotations ) {
v4.applyMatrix4(m4);
}
const k = HYPERPLANE / (HYPERPLANE + v4.w);
return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
}
class FourDShape extends THREE.Group {
constructor(node_m, link_m, structure) {
super();
this.node_m = node_m;
this.link_m = link_m;
this.nodes4 = structure.nodes;
this.nodes3 = {};
this.links = structure.links;
this.initShapes();
}
makeNode(v3) {
const geometry = new THREE.SphereGeometry(NODE_SIZE);
const sphere = new THREE.Mesh(geometry, this.node_m);
sphere.position.copy(v3);
this.add(sphere);
return sphere;
}
makeLink(link) {
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);
const geometry = new THREE.CylinderGeometry(LINK_SIZE, LINK_SIZE, 1);
const cyl = new THREE.Mesh(geometry, this.link_m);
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) {
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(1, 1, length));
link.object.position.copy(centre);
link.object.lookAt(n2);
link.object.children[0].rotation.x = Math.PI / 2.0;
}
initShapes() {
for( const n of this.nodes4 ) {
const v3 = fourDtoV3(n.x, n.y, n.z, n.w, []);
this.nodes3[n.id] = {
v3: v3,
object: this.makeNode(v3)
};
}
for( const l of this.links ) {
l.object = this.makeLink(l);
}
}
render3(rotations) {
for( const n of this.nodes4 ) {
const v3 = fourDtoV3(n.x, n.y, n.z, n.w, rotations);
this.nodes3[n.id].v3 = v3;
this.nodes3[n.id].object.position.copy(v3);
// could do scaling here
}
for( const l of this.links ) {
this.updateLink(l);
}
}
}
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const light = new THREE.PointLight(0xffffff, 2);
light.position.set(10, 10, 10);
scene.add(light);
const amblight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(amblight);
scene.background = new THREE.Color(0xdddddd);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0, 0 );
controls.update();
controls.enablePan = false;
controls.enableDamping = true;
const node_m = new THREE.MeshStandardMaterial(
{ color: 0x990044 } );
node_m.roughness = 0.2;
if( NODE_OPACITY < 1.0 ) {
node_m.transparent = true;
node_m.opacity = NODE_OPACITY;
}
const link_m = new THREE.MeshStandardMaterial(
{ color: 0xb0b0b0 } );
link_m.metalness = 0.4;
link_m.roughness = 0.0;
if( LINK_OPACITY < 1.0 ) {
link_m.transparent = true;
link_m.opacity = LINK_OPACITY;
}
const struct = SHAPES.cell24();
const shape = new FourDShape(node_m, link_m, struct);
scene.add(shape);
camera.position.z = 4;
let theta = 0;
const rotation = new THREE.Matrix4();
function animate() {
requestAnimationFrame( animate );
theta += 0.01;
const rotations = [rotYZ(theta * 0.33), rotXW(theta * 0.5)];
shape.render3(rotations);
renderer.render( scene, camera );
}
animate();