Everything's working except for default colours
parent
d253a851e9
commit
0b78ea2939
30
gui.js
30
gui.js
|
@ -12,6 +12,7 @@ class FourDGUI {
|
||||||
constructor(createShape, setColor, setBackground) {
|
constructor(createShape, setColor, setBackground) {
|
||||||
this.gui = new GUI();
|
this.gui = new GUI();
|
||||||
this.parseLinkParams();
|
this.parseLinkParams();
|
||||||
|
const guiObj = this;
|
||||||
this.params = {
|
this.params = {
|
||||||
shape: this.link['shape'] || DEFAULT_SHAPE,
|
shape: this.link['shape'] || DEFAULT_SHAPE,
|
||||||
thickness: this.link['thickness'] || 1,
|
thickness: this.link['thickness'] || 1,
|
||||||
|
@ -21,9 +22,9 @@ class FourDGUI {
|
||||||
xRotate: this.link['xRotate'] || 'YW',
|
xRotate: this.link['xRotate'] || 'YW',
|
||||||
yRotate: this.link['yRotate'] || 'XZ',
|
yRotate: this.link['yRotate'] || 'XZ',
|
||||||
damping: false,
|
damping: false,
|
||||||
dtheta: this.link['dtheta'],
|
dtheta: this.link['dtheta'] || 0,
|
||||||
dpsi: this.link['dpsi'],
|
dpsi: this.link['dpsi'] || 0,
|
||||||
"copy link": function () { this.copyUrl() }
|
"copy link": function () { guiObj.copyUrl() }
|
||||||
};
|
};
|
||||||
|
|
||||||
this.gui.add(this.params, 'shape',
|
this.gui.add(this.params, 'shape',
|
||||||
|
@ -52,7 +53,7 @@ class FourDGUI {
|
||||||
return dft;
|
return dft;
|
||||||
}
|
}
|
||||||
|
|
||||||
stringtoHex(cstr) {
|
stringToHex(cstr) {
|
||||||
return parseInt('0x' + cstr.substr(1));
|
return parseInt('0x' + cstr.substr(1));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -73,32 +74,33 @@ class FourDGUI {
|
||||||
this.link[param] = value;
|
this.link[param] = value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const guiObj = this;
|
||||||
|
console.log(guiObj);
|
||||||
this.link['hyperplane'] = this.numParam('hyperplane', parseFloat, 2);
|
this.link['hyperplane'] = this.numParam('hyperplane', parseFloat, 2);
|
||||||
this.link['thickness'] = this.numParam('thickness', parseFloat, 1);
|
this.link['thickness'] = this.numParam('thickness', parseFloat, 1);
|
||||||
this.link['color'] = this.numParam(
|
this.link['color'] = this.numParam(
|
||||||
'color', (s) => this.stringToHex(s), DEFAULT_COLOR
|
'color', (s) => guiObj.stringToHex(s), DEFAULT_COLOR
|
||||||
);
|
);
|
||||||
this.link['background'] = this.numParam(
|
this.link['background'] = this.numParam(
|
||||||
'background', (s) => this.stringToHex(s), DEFAULT_BG
|
'background', (s) => guiObj.stringToHex(s), DEFAULT_BG
|
||||||
);
|
);
|
||||||
|
|
||||||
this.link['dpsi'] = this.numParam('dpsi', 0);
|
this.link['dpsi'] = this.numParam('dpsi', parseFloat, 0);
|
||||||
this.link['dtheta'] = this.numParam('dtheta', 0);
|
this.link['dtheta'] = this.numParam('dtheta', parseFloat, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
copyUrl() {
|
copyUrl() {
|
||||||
const url = new URL(linkUrl.origin + linkUrl.pathname);
|
const url = new URL(this.linkUrl.origin + this.linkUrl.pathname);
|
||||||
url.searchParams.append("shape", this.params.shape);
|
url.searchParams.append("shape", this.params.shape);
|
||||||
url.searchParams.append("thickness", this.params.thickness.toString());
|
url.searchParams.append("thickness", this.params.thickness.toString());
|
||||||
url.searchParams.append("color", hexToString(this.params.color));
|
url.searchParams.append("color", this.hexToString(this.params.color));
|
||||||
url.searchParams.append("background", 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("xRotate", this.params.xRotate);
|
url.searchParams.append("xRotate", this.params.xRotate);
|
||||||
url.searchParams.append("yRotate", this.params.yRotate);
|
url.searchParams.append("yRotate", this.params.yRotate);
|
||||||
url.searchParams.append("dtheta", this.dtheta.toString());
|
url.searchParams.append("dtheta", this.params.dtheta.toString());
|
||||||
url.searchParams.append("dpsi", this.dpsi.toString());
|
url.searchParams.append("dpsi", this.params.dpsi.toString());
|
||||||
this.copyTextToClipboard(url);
|
this.copyTextToClipboard(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
5
main.js
5
main.js
|
@ -28,8 +28,8 @@ document.body.appendChild( renderer.domElement );
|
||||||
|
|
||||||
// set up colours and materials for gui callbacks
|
// set up colours and materials for gui callbacks
|
||||||
|
|
||||||
scene.background = new THREE.Color(0x000000);
|
scene.background = new THREE.Color(0xdddddd);
|
||||||
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
|
const material = new THREE.MeshStandardMaterial({ color: 0x90ebff });
|
||||||
|
|
||||||
const node_ms = [ material ];
|
const node_ms = [ material ];
|
||||||
|
|
||||||
|
@ -52,7 +52,6 @@ function createShape(name) {
|
||||||
}
|
}
|
||||||
shape = new FourDShape(node_ms, link_ms, STRUCTURES[name]);
|
shape = new FourDShape(node_ms, link_ms, STRUCTURES[name]);
|
||||||
scene.add(shape);
|
scene.add(shape);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// initialise gui and read params from URL
|
// initialise gui and read params from URL
|
||||||
|
|
Loading…
Reference in New Issue