fourdjs/main.js

214 lines
4.9 KiB
JavaScript
Raw Normal View History

2023-07-22 01:11:18 +00:00
import * as THREE from 'three';
2023-07-22 06:59:48 +00:00
2023-07-22 03:24:42 +00:00
2023-07-29 06:23:08 +00:00
import * as POLYTOPES from './polytopes.js';
2023-09-02 07:41:00 +00:00
import { get_rotation } from './rotation.js';
import { FourDGUI, DEFAULTS } from './gui.js';
2023-07-29 06:23:08 +00:00
import { FourDShape } from './fourDShape.js';
import { get_colours } from './colours.js';
2023-07-22 03:24:42 +00:00
2023-07-31 07:37:19 +00:00
const FACE_OPACITY = 0.3;
const CAMERA_K = 10;
2023-07-31 07:37:19 +00:00
2023-07-29 06:23:08 +00:00
// scene, lights and camera
2023-07-22 06:59:48 +00:00
2023-07-22 01:11:18 +00:00
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);
2023-07-27 22:40:27 +00:00
const light2 = new THREE.PointLight(0xffffff, 2);
light2.position.set(-10, 5, 10);
scene.add(light);
2023-07-24 02:34:48 +00:00
const amblight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(amblight);
camera.position.set(0, 0, CAMERA_K / 2);
camera.lookAt(0, 0, 0);
//camera.position.z = 4;
2023-07-24 23:05:06 +00:00
const renderer = new THREE.WebGLRenderer({antialias: true});
2023-07-22 01:11:18 +00:00
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
2023-07-29 06:23:08 +00:00
// set up colours and materials for gui callbacks
scene.background = new THREE.Color(DEFAULTS.background);
const material = new THREE.MeshStandardMaterial({ color: DEFAULTS.color });
const node_colours = get_colours(DEFAULTS.color);
2023-08-04 05:04:52 +00:00
2023-09-01 07:34:27 +00:00
2023-08-06 08:54:32 +00:00
material.transparent = true;
material.opacity = 0.5;
2023-08-04 05:04:52 +00:00
2023-09-01 07:34:27 +00:00
const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
2023-07-24 02:00:34 +00:00
link_ms.map((m) => {
m.transparent = true;
m.opacity = 0.5;
}
)
2023-07-28 07:06:42 +00:00
const face_ms = [
new THREE.MeshLambertMaterial( { color: 0x44ff44 } )
];
for( const face_m of face_ms ) {
face_m.transparent = true;
face_m.opacity = FACE_OPACITY;
}
2023-11-01 00:14:57 +00:00
const STRUCTURES = POLYTOPES.build_all();
const STRUCTURES_BY_NAME = {};
STRUCTURES.map((s) => STRUCTURES_BY_NAME[s.name] = s);
2023-07-25 05:43:26 +00:00
let shape = false;
let structure = false;
let node_show = [];
let link_show = [];
2023-07-25 05:43:26 +00:00
function createShape(name, option) {
2023-07-25 05:43:26 +00:00
if( shape ) {
scene.remove(shape);
}
structure = STRUCTURES_BY_NAME[name];
shape = new FourDShape(node_ms, link_ms, face_ms, structure);
2023-07-25 05:43:26 +00:00
scene.add(shape);
setVisibility(option ? option : structure.options[0].name);
2023-07-25 05:43:26 +00:00
}
2023-07-29 06:23:08 +00:00
// initialise gui and read params from URL
2023-07-29 06:23:08 +00:00
// callbacks to do things which are triggered by controls: reset the shape,
// change the colors. Otherwise we just read stuff from gui.params.
2023-07-22 03:24:42 +00:00
2023-08-04 05:28:08 +00:00
function setColors(c) {
const nc = get_colours(c);
for( let i = 0; i < node_ms.length; i++ ) {
node_ms[i].color = new THREE.Color(nc[i]);
link_ms[i].color = new THREE.Color(nc[i]);
2023-08-04 05:28:08 +00:00
}
material.color = new THREE.Color(c);
}
function setBackground(c) {
scene.background = new THREE.Color(c)
}
function setLinkOpacity(o, primary) {
if( structure.nolink2opacity ) {
link_ms.map((lm) => lm.opacity = o);
} else {
if( primary ) {
link_ms[0].opacity = o;
} else {
link_ms.slice(1).map((lm) => lm.opacity = o);
}
}
}
2023-11-02 05:36:18 +00:00
let gui;
function changeShape() {
createShape(gui.params.shape);
}
2023-08-04 05:28:08 +00:00
function setVisibility(option_name) {
const option = structure.options.filter((o) => o.name === option_name);
2023-11-01 01:52:59 +00:00
if( option.length ) {
node_show = option[0].nodes;
link_show = option[0].links;
} else {
console.log(`Error: option '${option_name}' not found`);
}
}
gui = new FourDGUI(
STRUCTURES,
changeShape,
setColors,
setBackground,
setLinkOpacity,
setVisibility
);
2023-08-04 05:28:08 +00:00
// these are here to pick up colour settings from the URL params
setColors(gui.params.color);
setBackground(gui.params.background);
2023-07-24 02:34:48 +00:00
const dragK = 0.005;
2023-07-28 01:04:08 +00:00
const damping = 0.99;
2023-07-23 05:57:34 +00:00
let theta = 0;
2023-07-24 03:57:51 +00:00
let psi = 0;
2023-07-28 00:47:33 +00:00
let theta0 = 0;
let psi0 = 0;
let dragx0 = 0;
let dragy0 = 0;
2023-07-28 01:04:08 +00:00
let dragging = false;
2023-07-24 03:57:51 +00:00
2023-07-28 01:04:08 +00:00
renderer.domElement.addEventListener("pointerdown", (event) => {
2023-07-24 03:57:51 +00:00
if( event.buttons === 1 ) {
2023-07-28 00:47:33 +00:00
theta0 = theta;
psi0 = psi;
dragx0 = event.clientX;
dragy0 = event.clientY;
2023-07-28 01:04:08 +00:00
dragging = true;
2023-07-24 03:57:51 +00:00
}
})
2023-07-28 01:04:08 +00:00
renderer.domElement.addEventListener("pointermove", (event) => {
2023-07-24 03:57:51 +00:00
if( event.buttons === 1 ) {
2023-07-28 01:04:08 +00:00
const theta1 = theta0 + (event.clientX - dragx0) * dragK;
const psi1 = psi0 + (event.clientY - dragy0) * dragK;
2023-07-29 06:23:08 +00:00
gui.params.dtheta = theta1 - theta;
gui.params.dpsi = psi1 - psi;
2023-07-28 01:04:08 +00:00
theta = theta1;
psi = psi1;
2023-07-24 03:57:51 +00:00
}
})
2023-07-22 01:11:18 +00:00
2023-07-28 01:04:08 +00:00
renderer.domElement.addEventListener("pointerup", (event) => {
dragging = false;
})
2023-07-28 00:47:33 +00:00
createShape(gui.params.shape, gui.params.option);
2023-07-22 06:59:48 +00:00
2023-07-22 01:11:18 +00:00
function animate() {
requestAnimationFrame( animate );
2023-07-28 01:04:08 +00:00
if( ! dragging ) {
2023-07-29 06:23:08 +00:00
theta += gui.params.dtheta;
psi += gui.params.dpsi;
if( gui.params.damping ) {
gui.params.dtheta = gui.params.dtheta * damping;
gui.params.dpsi = gui.params.dpsi * damping;
2023-07-28 01:04:08 +00:00
}
}
2023-09-02 07:41:00 +00:00
const rotations = get_rotation(gui.params.rotation, theta, psi);
2023-07-29 06:23:08 +00:00
shape.hyperplane = gui.params.hyperplane;
2023-11-02 22:55:44 +00:00
camera.position.set(0, 0, gui.params.zoom * CAMERA_K / gui.params.hyperplane);
shape.link_scale = gui.params.thickness;
shape.node_scale = gui.params.nodesize;
shape.render3(rotations, node_show, link_show);
2023-07-22 01:11:18 +00:00
renderer.render( scene, camera );
}
2023-07-28 07:40:39 +00:00
animate();