Adjustable node sizes relative to links
parent
82195b717f
commit
fdd75b103b
|
@ -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
4
gui.js
|
@ -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' ]);
|
||||||
|
|
3
main.js
3
main.js
|
@ -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 );
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue