bombinans
/
fourdjs
1
1
Fork 0
Code Issues 11 Pull Requests Packages Projects Releases Wiki Activity

Added zoom control

pull/11/head
Mike Lynch 2023-11-03 09:55:44 +11:00
parent 029b14f53a
commit e805c64de6
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gui.js
View File

@ -14,6 +14,7 @@ const DEFAULTS = {
color: 0x3293a9, color: 0x3293a9,
background: 0xd4d4d4, background: 0xd4d4d4,
hyperplane: 1.5, hyperplane: 1.5,
zoom: 1,
rotation: 'rigid', rotation: 'rigid',
dtheta: 0, dtheta: 0,
dpsi: 0, dpsi: 0,
@ -42,6 +43,7 @@ class FourDGUI {
color: this.link['color'], color: this.link['color'],
background: this.link['background'], background: this.link['background'],
hyperplane: this.link['hyperplane'], hyperplane: this.link['hyperplane'],
zoom: this.link['zoom'],
rotation: this.link['rotation'], rotation: this.link['rotation'],
damping: false, damping: false,
dtheta: this.link['dtheta'], dtheta: this.link['dtheta'],
@ -58,10 +60,11 @@ class FourDGUI {
changeShape(shape) changeShape(shape)
}); });
const options = this.getShapeOptions(shapes, this.params['shape']); const options = this.getShapeOptions(shapes, this.params['shape']);
options_ctrl = this.gui.add(this.params, 'option', options).onChange((option) => { options_ctrl = this.gui.add(this.params, 'option').options(options).onChange((option) => {
setVisibility(option) setVisibility(option)
}); });
this.gui.add(this.params, 'hyperplane', 1.4, 2.4); this.gui.add(this.params, 'hyperplane', 1.4, 2.0);
this.gui.add(this.params, 'zoom', 0.1, 2.0);
this.gui.add(this.params, 'thickness', 0.1, 2); this.gui.add(this.params, 'thickness', 0.1, 2);
this.gui.add(this.params, 'linkopacity', 0, 1).onChange( this.gui.add(this.params, 'linkopacity', 0, 1).onChange(
(v) => setLinkOpacity(v, true) (v) => setLinkOpacity(v, true)
@ -127,6 +130,7 @@ class FourDGUI {
this.link[param] = ( this.urlParams.get(param) === 'y' ); this.link[param] = ( this.urlParams.get(param) === 'y' );
} }
this.link['hyperplane'] = this.numParam('hyperplane', parseFloat); this.link['hyperplane'] = this.numParam('hyperplane', parseFloat);
this.link['zoom'] = this.numParam('zoom', parseFloat);
this.link['thickness'] = this.numParam('thickness', parseFloat); this.link['thickness'] = this.numParam('thickness', parseFloat);
this.link['linkopacity'] = this.numParam('linkopacity', parseFloat); this.link['linkopacity'] = this.numParam('linkopacity', parseFloat);
this.link['link2opacity'] = this.numParam('link2opacity', parseFloat); this.link['link2opacity'] = this.numParam('link2opacity', parseFloat);
@ -151,6 +155,7 @@ class FourDGUI {
url.searchParams.append("color", this.hexToString(this.params.color)); url.searchParams.append("color", this.hexToString(this.params.color));
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("rotation", this.params.rotation); url.searchParams.append("rotation", this.params.rotation);
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());

2
main.js
View File

@ -200,7 +200,7 @@ function animate() {
const rotations = get_rotation(gui.params.rotation, theta, psi); const rotations = get_rotation(gui.params.rotation, theta, psi);
shape.hyperplane = gui.params.hyperplane; shape.hyperplane = gui.params.hyperplane;
camera.position.set(0, 0, CAMERA_K / gui.params.hyperplane); camera.position.set(0, 0, gui.params.zoom * CAMERA_K / gui.params.hyperplane);
shape.link_scale = gui.params.thickness; shape.link_scale = gui.params.thickness;
shape.node_scale = gui.params.nodesize; shape.node_scale = gui.params.nodesize;