Everything's working except for default colours

feature-faces
Mike Lynch 2023-07-29 16:44:18 +10:00
parent d253a851e9
commit 0b78ea2939
2 changed files with 18 additions and 17 deletions

30
gui.js
View File

@ -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);
} }

View File

@ -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