parent
01a12bfe2a
commit
bc9e86d918
17
gui.js
17
gui.js
|
@ -14,8 +14,8 @@ const DEFAULTS = {
|
||||||
color: 0x3293a9,
|
color: 0x3293a9,
|
||||||
background: 0xd4d4d4,
|
background: 0xd4d4d4,
|
||||||
hyperplane: 1.5,
|
hyperplane: 1.5,
|
||||||
zoom: 1,
|
xRotate: 'YW',
|
||||||
rotation: 'rigid',
|
yRotate: 'XZ',
|
||||||
dtheta: 0,
|
dtheta: 0,
|
||||||
dpsi: 0,
|
dpsi: 0,
|
||||||
}
|
}
|
||||||
|
@ -44,7 +44,8 @@ class FourDGUI {
|
||||||
background: this.link['background'],
|
background: this.link['background'],
|
||||||
hyperplane: this.link['hyperplane'],
|
hyperplane: this.link['hyperplane'],
|
||||||
zoom: this.link['zoom'],
|
zoom: this.link['zoom'],
|
||||||
rotation: this.link['rotation'],
|
xRotate: this.link['xRotate'],
|
||||||
|
yRotate: this.link['yRotate'],
|
||||||
damping: false,
|
damping: false,
|
||||||
dtheta: this.link['dtheta'],
|
dtheta: this.link['dtheta'],
|
||||||
dpsi: this.link['dpsi'],
|
dpsi: this.link['dpsi'],
|
||||||
|
@ -75,7 +76,8 @@ class FourDGUI {
|
||||||
this.gui.add(this.params, 'nodesize', 0.1, 4);
|
this.gui.add(this.params, 'nodesize', 0.1, 4);
|
||||||
this.gui.addColor(this.params, 'color').onChange(setColor);
|
this.gui.addColor(this.params, 'color').onChange(setColor);
|
||||||
this.gui.addColor(this.params, 'background').onChange(setBackground);
|
this.gui.addColor(this.params, 'background').onChange(setBackground);
|
||||||
this.gui.add(this.params, 'rotation', [ 'rigid', 'tumbling', 'inside-out', 'axisymmetrical' ]);
|
this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
|
||||||
|
this.gui.add(this.params, 'yRotate', [ 'XZ', 'XY', 'XW' ]);
|
||||||
this.gui.add(this.params, 'damping');
|
this.gui.add(this.params, 'damping');
|
||||||
this.gui.add(this.params, 'copy link');
|
this.gui.add(this.params, 'copy link');
|
||||||
|
|
||||||
|
@ -118,7 +120,7 @@ class FourDGUI {
|
||||||
const guiObj = this;
|
const guiObj = this;
|
||||||
|
|
||||||
this.urlParams = this.linkUrl.searchParams;
|
this.urlParams = this.linkUrl.searchParams;
|
||||||
for( const param of [ "shape", "rotation", "option" ]) {
|
for( const param of [ "shape", "xRotate", "yRotate", "option" ]) {
|
||||||
const value = this.urlParams.get(param);
|
const value = this.urlParams.get(param);
|
||||||
if( value ) {
|
if( value ) {
|
||||||
this.link[param] = value;
|
this.link[param] = value;
|
||||||
|
@ -156,7 +158,8 @@ class FourDGUI {
|
||||||
url.searchParams.append("background", this.hexToString(this.params.background));
|
url.searchParams.append("background", this.hexToString(this.params.background));
|
||||||
url.searchParams.append("hyperplane", this.params.hyperplane.toString());
|
url.searchParams.append("hyperplane", this.params.hyperplane.toString());
|
||||||
url.searchParams.append("zoom", this.params.zoom.toString());
|
url.searchParams.append("zoom", this.params.zoom.toString());
|
||||||
url.searchParams.append("rotation", this.params.rotation);
|
url.searchParams.append("xRotate", this.params.xRotate);
|
||||||
|
url.searchParams.append("yRotate", this.params.yRotate);
|
||||||
url.searchParams.append("dtheta", this.params.dtheta.toString());
|
url.searchParams.append("dtheta", this.params.dtheta.toString());
|
||||||
url.searchParams.append("dpsi", this.params.dpsi.toString());
|
url.searchParams.append("dpsi", this.params.dpsi.toString());
|
||||||
this.copyTextToClipboard(url);
|
this.copyTextToClipboard(url);
|
||||||
|
@ -204,4 +207,4 @@ class FourDGUI {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export { FourDGUI, DEFAULTS };
|
export { FourDGUI, DEFAULTS };
|
||||||
|
|
8
main.js
8
main.js
|
@ -3,7 +3,7 @@ import * as THREE from 'three';
|
||||||
|
|
||||||
|
|
||||||
import * as POLYTOPES from './polytopes.js';
|
import * as POLYTOPES from './polytopes.js';
|
||||||
import { get_rotation } from './rotation.js';
|
import { rotfn } from './rotation.js';
|
||||||
import { FourDGUI, DEFAULTS } from './gui.js';
|
import { FourDGUI, DEFAULTS } from './gui.js';
|
||||||
import { FourDShape } from './fourDShape.js';
|
import { FourDShape } from './fourDShape.js';
|
||||||
import { get_colours } from './colours.js';
|
import { get_colours } from './colours.js';
|
||||||
|
@ -197,8 +197,10 @@ function animate() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const rotations = get_rotation(gui.params.rotation, theta, psi);
|
const rotations = [
|
||||||
|
rotfn[gui.params.xRotate](theta),
|
||||||
|
rotfn[gui.params.yRotate](psi)
|
||||||
|
];
|
||||||
shape.hyperplane = gui.params.hyperplane;
|
shape.hyperplane = gui.params.hyperplane;
|
||||||
camera.position.set(0, 0, gui.params.zoom * CAMERA_K / gui.params.hyperplane);
|
camera.position.set(0, 0, gui.params.zoom * CAMERA_K / gui.params.hyperplane);
|
||||||
|
|
||||||
|
|
19
rotation.js
19
rotation.js
|
@ -81,24 +81,5 @@ export const rotfn = {
|
||||||
ZW: rotZW,
|
ZW: rotZW,
|
||||||
};
|
};
|
||||||
|
|
||||||
const rotMode = {
|
|
||||||
'rigid': [ rotYW, rotXW ],
|
|
||||||
'tumbling': [ rotYW, rotXZ ],
|
|
||||||
'inside-out': [ rotYW, rotXY ],
|
|
||||||
'axisymmetrical': [ rotZW, rotXY ]
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
export const get_rotation = (mode, theta, psi) => {
|
|
||||||
const fns = rotMode[mode];
|
|
||||||
return [ fns[0](theta), fns[1](psi) ];
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// [
|
|
||||||
// rotfn[gui.params.xRotate](theta),
|
|
||||||
// rotfn[gui.params.yRotate](psi)
|
|
||||||
// ];
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue