Improved option defaults and URL params
parent
203850ba39
commit
42d1871a9e
15
gui.js
15
gui.js
|
@ -6,7 +6,8 @@ const DEFAULTS = {
|
|||
nodesize: 1.25,
|
||||
linkopacity: 0.5,
|
||||
link2opacity: 0.5,
|
||||
shape: '120-cell inscribed',
|
||||
shape: '',
|
||||
option: '',
|
||||
visibility: 5,
|
||||
inscribed: false,
|
||||
inscribe_all: false,
|
||||
|
@ -24,10 +25,16 @@ class FourDGUI {
|
|||
|
||||
constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) {
|
||||
this.gui = new GUI();
|
||||
const SHAPE_NAMES = shapes.map((s) => s.name);
|
||||
// set default shape + option from the first shape
|
||||
DEFAULTS.shape = shapes[0].name;
|
||||
DEFAULTS.option = shapes[0].options[0].name;
|
||||
|
||||
this.parseLinkParams();
|
||||
const guiObj = this;
|
||||
this.params = {
|
||||
shape: this.link['shape'],
|
||||
option: this.link['option'],
|
||||
inscribed: this.link['inscribed'],
|
||||
inscribe_all: this.link['inscribe_all'],
|
||||
thickness: this.link['thickness'],
|
||||
|
@ -44,7 +51,6 @@ class FourDGUI {
|
|||
dpsi: this.link['dpsi'],
|
||||
"copy link": function () { guiObj.copyUrl() }
|
||||
};
|
||||
const SHAPE_NAMES = shapes.map((s) => s.name);
|
||||
let options_ctrl;
|
||||
this.gui.add(this.params, 'shape', SHAPE_NAMES).onChange((shape) => {
|
||||
const options = this.getShapeOptions(shapes, shape);
|
||||
|
@ -54,7 +60,7 @@ class FourDGUI {
|
|||
changeShape(shape)
|
||||
});
|
||||
const options = this.getShapeOptions(shapes, this.params['shape']);
|
||||
options_ctrl = this.gui.add(this.params, 'options', options).onChange((option) => {
|
||||
options_ctrl = this.gui.add(this.params, 'option', options).onChange((option) => {
|
||||
setVisibility(option)
|
||||
});
|
||||
this.gui.add(this.params, 'hyperplane', 1.5, 2.25);
|
||||
|
@ -111,7 +117,7 @@ class FourDGUI {
|
|||
const guiObj = this;
|
||||
|
||||
this.urlParams = this.linkUrl.searchParams;
|
||||
for( const param of [ "shape", "rotation", "visiblity" ]) {
|
||||
for( const param of [ "shape", "rotation", "option" ]) {
|
||||
const value = this.urlParams.get(param);
|
||||
if( value ) {
|
||||
this.link[param] = value;
|
||||
|
@ -137,6 +143,7 @@ class FourDGUI {
|
|||
copyUrl() {
|
||||
const url = new URL(this.linkUrl.origin + this.linkUrl.pathname);
|
||||
url.searchParams.append("shape", this.params.shape);
|
||||
url.searchParams.append("option", this.params.option);
|
||||
url.searchParams.append("inscribed", this.params.inscribed ? 'y': 'n');
|
||||
url.searchParams.append("inscribe_all", this.params.inscribe_all ? 'y': 'n');
|
||||
url.searchParams.append("thickness", this.params.thickness.toString());
|
||||
|
|
6
main.js
6
main.js
|
@ -74,14 +74,14 @@ let node_show = [];
|
|||
let link_show = [];
|
||||
|
||||
|
||||
function createShape(name) {
|
||||
function createShape(name, option) {
|
||||
if( shape ) {
|
||||
scene.remove(shape);
|
||||
}
|
||||
structure = STRUCTURES_BY_NAME[name];
|
||||
shape = new FourDShape(node_ms, link_ms, face_ms, structure);
|
||||
scene.add(shape);
|
||||
setVisibility(structure.options[0].name);
|
||||
setVisibility(option ? option : structure.options[0].name);
|
||||
}
|
||||
|
||||
// initialise gui and read params from URL
|
||||
|
@ -177,7 +177,7 @@ renderer.domElement.addEventListener("pointerup", (event) => {
|
|||
dragging = false;
|
||||
})
|
||||
|
||||
createShape(gui.params.shape);
|
||||
createShape(gui.params.shape, gui.params.option);
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame( animate );
|
||||
|
|
Loading…
Reference in New Issue