Added basic gui controls
Mike Lynch
parent
3026183d54
commit
b7355aa48c
|
|
@ -7,15 +7,6 @@ const NODE_SIZE = 0.08;
|
|||
const LINK_SIZE = 0.02;
|
||||
|
||||
|
||||
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 {
|
||||
|
||||
|
|
@ -26,9 +17,12 @@ class FourDShape extends THREE.Group {
|
|||
this.nodes4 = structure.nodes;
|
||||
this.nodes3 = {};
|
||||
this.links = structure.links;
|
||||
this.hyperplane = HYPERPLANE;
|
||||
this.initShapes();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// if a node/link has no label, use the 0th material
|
||||
|
||||
getMaterial(entity, materials) {
|
||||
|
|
@ -77,9 +71,19 @@ class FourDShape extends THREE.Group {
|
|||
link.object.children[0].rotation.x = Math.PI / 2.0;
|
||||
}
|
||||
|
||||
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 = this.hyperplane / (this.hyperplane + v4.w);
|
||||
return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
|
||||
}
|
||||
|
||||
|
||||
initShapes() {
|
||||
for( const n of this.nodes4 ) {
|
||||
const v3 = fourDtoV3(n.x, n.y, n.z, n.w, []);
|
||||
const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, []);
|
||||
const material = this.getMaterial(n, this.node_ms);
|
||||
this.nodes3[n.id] = {
|
||||
v3: v3,
|
||||
|
|
@ -92,9 +96,10 @@ class FourDShape extends THREE.Group {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
render3(rotations) {
|
||||
for( const n of this.nodes4 ) {
|
||||
const v3 = fourDtoV3(n.x, n.y, n.z, n.w, rotations);
|
||||
const v3 = this.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
|
||||
|
|
|
|||
58
main.js
58
main.js
|
|
@ -4,6 +4,7 @@ import * as POLYTOPES from './polytopes.js';
|
|||
|
||||
import { FourDShape } from './fourDShape.js';
|
||||
|
||||
import { GUI } from 'lil-gui';
|
||||
|
||||
|
||||
|
||||
|
|
@ -149,12 +150,29 @@ for( const link_m of link_ms ) {
|
|||
}
|
||||
}
|
||||
|
||||
const struct = POLYTOPES.cell24();
|
||||
const STRUCTURES = {
|
||||
'5-cell': POLYTOPES.cell5(),
|
||||
'16-cell': POLYTOPES.cell16(),
|
||||
'tesseract': POLYTOPES.tesseract(),
|
||||
'24-cell': POLYTOPES.cell24(),
|
||||
};
|
||||
|
||||
let shape = false;
|
||||
|
||||
function createShape(name) {
|
||||
if( shape ) {
|
||||
scene.remove(shape);
|
||||
}
|
||||
|
||||
shape = new FourDShape(node_ms, link_ms, STRUCTURES[name]);
|
||||
scene.add(shape);
|
||||
|
||||
}
|
||||
|
||||
|
||||
const shape = new FourDShape(node_ms, link_ms, struct);
|
||||
|
||||
scene.add(shape);
|
||||
|
||||
createShape('24-cell');
|
||||
|
||||
|
||||
camera.position.z = 4;
|
||||
|
|
@ -185,6 +203,34 @@ renderer.domElement.addEventListener("mousemove", (event) => {
|
|||
}
|
||||
})
|
||||
|
||||
// set up GUI
|
||||
|
||||
const gui = new GUI();
|
||||
|
||||
const gui_params = {
|
||||
shape: '24-cell',
|
||||
hyperplane: 2,
|
||||
xRotate: 'YW',
|
||||
yRotate: 'XZ',
|
||||
};
|
||||
|
||||
gui.add(gui_params, 'shape',
|
||||
[ '5-cell', '16-cell', 'tesseract', '24-cell' ]
|
||||
).onChange(createShape)
|
||||
|
||||
gui.add(gui_params, 'hyperplane', 1, 4);
|
||||
gui.add(gui_params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
|
||||
gui.add(gui_params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
|
||||
|
||||
const ROTFN = {
|
||||
XY: rotXY,
|
||||
XZ: rotXZ,
|
||||
XW: rotXW,
|
||||
YZ: rotYZ,
|
||||
YW: rotYW,
|
||||
ZW: rotZW,
|
||||
};
|
||||
|
||||
|
||||
|
||||
const rotation = new THREE.Matrix4();
|
||||
|
|
@ -192,7 +238,11 @@ const rotation = new THREE.Matrix4();
|
|||
function animate() {
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
const rotations = [rotYZ(theta), rotXZ(psi)];
|
||||
const rotations = [
|
||||
ROTFN[gui_params.xRotate](theta),
|
||||
ROTFN[gui_params.yRotate](psi)
|
||||
];
|
||||
shape.hyperplane = gui_params.hyperplane;
|
||||
shape.render3(rotations);
|
||||
|
||||
renderer.render( scene, camera );
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"lil-gui": "^0.18.2",
|
||||
"three": "^0.154.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -414,6 +415,11 @@
|
|||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lil-gui": {
|
||||
"version": "0.18.2",
|
||||
"resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.18.2.tgz",
|
||||
"integrity": "sha512-DgdrLy3/KGC0PiQLKgOcJMPItP4xY4iWgJ9+91Zaxfr8GCTmMps05QS9w9jW7yspILlbscbquwjOwxmWnSx5Uw=="
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.6",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"lil-gui": "^0.18.2",
|
||||
"three": "^0.154.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue