Adjustable node sizes relative to links

experiments-120-cell
Mike Lynch 2023-08-04 14:10:39 +10:00
parent 82195b717f
commit fdd75b103b
4 changed files with 12 additions and 8 deletions

View File

@ -1,7 +1,7 @@
import * as THREE from 'three'; import * as THREE from 'three';
const HYPERPLANE = 2; const HYPERPLANE = 2.0;
class FourDShape extends THREE.Group { class FourDShape extends THREE.Group {
@ -15,7 +15,8 @@ class FourDShape extends THREE.Group {
this.links = structure.links; this.links = structure.links;
this.node_size = structure.geometry.node_size; this.node_size = structure.geometry.node_size;
this.link_size = structure.geometry.link_size; this.link_size = structure.geometry.link_size;
this.geom_scale = 1; this.node_scale = 1;
this.link_scale = 1;
this.hyperplane = HYPERPLANE; this.hyperplane = HYPERPLANE;
this.initShapes(); this.initShapes();
} }
@ -64,7 +65,7 @@ class FourDShape extends THREE.Group {
const length = n1.distanceTo(n2); const length = n1.distanceTo(n2);
const centre = new THREE.Vector3(); const centre = new THREE.Vector3();
centre.lerpVectors(n1, n2, 0.5); centre.lerpVectors(n1, n2, 0.5);
link.object.scale.copy(new THREE.Vector3(this.geom_scale, this.geom_scale, length)); link.object.scale.copy(new THREE.Vector3(this.link_scale, this.link_scale, length));
link.object.position.copy(centre); link.object.position.copy(centre);
link.object.lookAt(n2); link.object.lookAt(n2);
link.object.children[0].rotation.x = Math.PI / 2.0; link.object.children[0].rotation.x = Math.PI / 2.0;
@ -97,7 +98,7 @@ class FourDShape extends THREE.Group {
render3(rotations) { render3(rotations) {
this.scalev3 = new THREE.Vector3(this.geom_scale, this.geom_scale, this.geom_scale); this.scalev3 = new THREE.Vector3(this.node_scale, this.node_scale, this.node_scale);
for( const n of this.nodes4 ) { for( const n of this.nodes4 ) {
const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, rotations); const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, rotations);
this.nodes3[n.id].v3 = v3; this.nodes3[n.id].v3 = v3;

4
gui.js
View File

@ -16,6 +16,7 @@ class FourDGUI {
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,
nodesize: this.link['nodesize'] || 0,
color: this.link['color'] || DEFAULT_COLOR, color: this.link['color'] || DEFAULT_COLOR,
background: this.link['background'] || DEFAULT_BG, background: this.link['background'] || DEFAULT_BG,
hyperplane: this.link['hyperplane'] || 2, hyperplane: this.link['hyperplane'] || 2,
@ -31,8 +32,9 @@ class FourDGUI {
[ '5-cell', '16-cell', 'tesseract', '24-cell', '120-cell', '600-cell' ] [ '5-cell', '16-cell', 'tesseract', '24-cell', '120-cell', '600-cell' ]
).onChange(createShape) ).onChange(createShape)
this.gui.add(this.params, 'hyperplane', 1.5, 4); this.gui.add(this.params, 'hyperplane', 1.5, 3);
this.gui.add(this.params, 'thickness', 0.1, 4); this.gui.add(this.params, 'thickness', 0.1, 4);
this.gui.add(this.params, 'nodesize', 0, 5);
this.gui.addColor(this.params, 'color').onChange(setColor); this.gui.addColor(this.params, 'color').onChange(setColor);
this.gui.addColor(this.params, 'background').onChange(setBackground); this.gui.addColor(this.params, 'background').onChange(setBackground);
this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]); this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);

View File

@ -132,7 +132,8 @@ function animate() {
rotfn[gui.params.yRotate](psi) rotfn[gui.params.yRotate](psi)
]; ];
shape.hyperplane = gui.params.hyperplane; shape.hyperplane = gui.params.hyperplane;
shape.geom_scale = gui.params.thickness; shape.link_scale = gui.params.thickness;
shape.node_scale = gui.params.thickness * (gui.params.nodesize + 1);
shape.render3(rotations); shape.render3(rotations);
renderer.render( scene, camera ); renderer.render( scene, camera );

View File

@ -339,8 +339,8 @@ export const cell600 = () => {
nodes: nodes, nodes: nodes,
links: links, links: links,
geometry: { geometry: {
node_size: 0.08, node_size: 0.02,
link_size: 0.01 link_size: 0.02
} }
} }
} }