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

Automatically shifts the camera distance to match the hyperplane. #10

Merged
bombinans merged 1 commits from feature-improve-hyperplane into main 2023-11-02 07:41:44 +00:00
Conversation 0 Commits 1 Files Changed 2
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
gui.js
View File

@ -6,14 +6,14 @@ const DEFAULTS = {
nodesize: 1.25, nodesize: 1.25,
linkopacity: 0.5, linkopacity: 0.5,
link2opacity: 0.5, link2opacity: 0.5,
shape: '', shape: '120-cell',
option: '', option: 'none',
visibility: 5, visibility: 5,
inscribed: false, inscribed: false,
inscribe_all: false, inscribe_all: false,
color: 0x3293a9, color: 0x3293a9,
background: 0xd4d4d4, background: 0xd4d4d4,
hyperplane: 2, hyperplane: 1.5,
rotation: 'rigid', rotation: 'rigid',
dtheta: 0, dtheta: 0,
dpsi: 0, dpsi: 0,
@ -26,9 +26,6 @@ class FourDGUI {
constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) { constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) {
this.gui = new GUI(); this.gui = new GUI();
const SHAPE_NAMES = shapes.map((s) => s.name); 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(); this.parseLinkParams();
const guiObj = this; const guiObj = this;
@ -64,7 +61,7 @@ class FourDGUI {
options_ctrl = this.gui.add(this.params, 'option', options).onChange((option) => { options_ctrl = this.gui.add(this.params, 'option', options).onChange((option) => {
setVisibility(option) setVisibility(option)
}); });
this.gui.add(this.params, 'hyperplane', 1.5, 2.25); this.gui.add(this.params, 'hyperplane', 1.4, 2.4);
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)

8
main.js
View File

@ -9,6 +9,7 @@ import { FourDShape } from './fourDShape.js';
import { get_colours } from './colours.js'; import { get_colours } from './colours.js';
const FACE_OPACITY = 0.3; const FACE_OPACITY = 0.3;
const CAMERA_K = 10;
// scene, lights and camera // scene, lights and camera
@ -23,7 +24,7 @@ scene.add(light);
const amblight = new THREE.AmbientLight(0xffffff, 0.5); const amblight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(amblight); scene.add(amblight);
camera.position.set(0, 0, 4); camera.position.set(0, 0, CAMERA_K / 2);
camera.lookAt(0, 0, 0); camera.lookAt(0, 0, 0);
//camera.position.z = 4; //camera.position.z = 4;
@ -132,7 +133,6 @@ function setVisibility(option_name) {
} }
gui = new FourDGUI( gui = new FourDGUI(
STRUCTURES, STRUCTURES,
changeShape, changeShape,
@ -200,10 +200,14 @@ 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);
shape.link_scale = gui.params.thickness; shape.link_scale = gui.params.thickness;
shape.node_scale = gui.params.nodesize; shape.node_scale = gui.params.nodesize;
shape.render3(rotations, node_show, link_show); shape.render3(rotations, node_show, link_show);
renderer.render( scene, camera ); renderer.render( scene, camera );
} }
animate(); animate();