Fixing a few things before releasing the taperedLink version
This commit is contained in:
Mike Lynch
parent
840e46201c
commit
6019237e31
21
gui.js
21
gui.js
@ -2,12 +2,11 @@ import { GUI } from 'lil-gui';
|
||||
|
||||
|
||||
const DEFAULTS = {
|
||||
nodesize: 1,
|
||||
nodesize: 0.6,
|
||||
nodeopacity: 1,
|
||||
linksize: 1.0,
|
||||
linkopacity: 1,
|
||||
link2opacity: 0.75,
|
||||
shape: '5-cell',
|
||||
linkopacity: 0.75,
|
||||
shape: '120-cell',
|
||||
option: 'none',
|
||||
visibility: 5,
|
||||
inscribed: false,
|
||||
@ -41,7 +40,6 @@ class FourDGUI {
|
||||
inscribe_all: this.link['inscribe_all'],
|
||||
linksize: this.link['linksize'],
|
||||
linkopacity: this.link['linkopacity'],
|
||||
link2opacity: this.link['linkopacity'],
|
||||
nodesize: this.link['nodesize'],
|
||||
nodeopacity: this.link['nodeopacity'],
|
||||
depth: this.link['depth'],
|
||||
@ -72,15 +70,10 @@ class FourDGUI {
|
||||
});
|
||||
this.gui.add(this.params, 'hyperplane', 0.5, 1 / 0.8);
|
||||
this.gui.add(this.params, 'zoom', 0.1, 2.0);
|
||||
this.gui.add(this.params, 'nodesize', 0, 5);
|
||||
this.gui.add(this.params, 'nodesize', 0, 1.5);
|
||||
this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(setNodeOpacity);
|
||||
this.gui.add(this.params, 'linksize', 0, 5);
|
||||
this.gui.add(this.params, 'linkopacity', 0, 1).onChange(
|
||||
(v) => setLinkOpacity(v, true)
|
||||
);
|
||||
this.gui.add(this.params, 'link2opacity', 0, 1).onChange(
|
||||
(v) => setLinkOpacity(v, false)
|
||||
);
|
||||
this.gui.add(this.params, 'linksize', 0, 2);
|
||||
this.gui.add(this.params, 'linkopacity', 0, 1).onChange(setLinkOpacity);
|
||||
this.gui.addColor(this.params, 'color').onChange(setColor);
|
||||
this.gui.addColor(this.params, 'background').onChange(setBackground);
|
||||
this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
|
||||
@ -143,7 +136,6 @@ class FourDGUI {
|
||||
this.link['zoom'] = this.numParam('zoom', parseFloat);
|
||||
this.link['linksize'] = this.numParam('linksize', parseFloat);
|
||||
this.link['linkopacity'] = this.numParam('linkopacity', parseFloat);
|
||||
this.link['link2opacity'] = this.numParam('link2opacity', parseFloat);
|
||||
this.link['nodesize'] = this.numParam('nodesize', parseFloat);
|
||||
this.link['nodeopacity'] = this.numParam('nodeopacity', parseFloat);
|
||||
this.link['color'] = this.numParam('color', (s) => guiObj.stringToHex(s));
|
||||
@ -163,7 +155,6 @@ class FourDGUI {
|
||||
url.searchParams.append("nodesize", this.params.nodesize.toString());
|
||||
url.searchParams.append("nodeopacity", this.params.nodesize.toString());
|
||||
url.searchParams.append("linkopacity", this.params.nodeopacity.toString());
|
||||
url.searchParams.append("link2opacity", this.params.link2opacity.toString());
|
||||
url.searchParams.append("color", this.hexToString(this.params.color));
|
||||
url.searchParams.append("background", this.hexToString(this.params.background));
|
||||
url.searchParams.append("hyperplane", this.params.hyperplane.toString());
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script type="module" src="/linktest.js"></script>
|
||||
<script type="module" src="/main.js"></script>
|
||||
<div id="description"></div>
|
||||
<div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> -
|
||||
<a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>
|
||||
|
||||
@ -37,7 +37,7 @@ renderer.localClippingEnabled = true;
|
||||
const controls = new OrbitControls( camera, renderer.domElement );
|
||||
|
||||
|
||||
controls.autoRotate = false;
|
||||
controls.autoRotate = true;
|
||||
|
||||
document.body.appendChild( renderer.domElement );
|
||||
|
||||
@ -49,12 +49,12 @@ scene.background = new THREE.Color(BACKGROUNDC);
|
||||
const material = new THREE.MeshStandardMaterial({ color: LINKC });
|
||||
|
||||
material.transparent = true;
|
||||
material.opacity = 0.5;
|
||||
material.opacity = 0.7;
|
||||
|
||||
const node_mat = new THREE.MeshStandardMaterial({ color: NODEC });
|
||||
|
||||
node_mat.transparent = true;
|
||||
node_mat.opacity = 0.8;
|
||||
node_mat.opacity = 0.5;
|
||||
|
||||
const params = {
|
||||
r1: 0.5,
|
||||
|
||||
27
main.js
27
main.js
@ -40,14 +40,8 @@ document.body.appendChild( renderer.domElement );
|
||||
// set up colours and materials for gui callbacks
|
||||
|
||||
scene.background = new THREE.Color(DEFAULTS.background);
|
||||
const material = new THREE.MeshStandardMaterial({ color: DEFAULTS.color });
|
||||
const node_colours = get_colours(DEFAULTS.color);
|
||||
|
||||
|
||||
material.transparent = true;
|
||||
material.opacity = 0.5;
|
||||
|
||||
|
||||
const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
|
||||
const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c}));
|
||||
|
||||
@ -66,7 +60,7 @@ link_ms.map((m) => {
|
||||
|
||||
|
||||
const face_ms = [
|
||||
new THREE.MeshLambertMaterial( { color: 0x44ff44 } )
|
||||
new THREE.MeshStandardMaterial( { color: 0x44ff44 } )
|
||||
];
|
||||
|
||||
for( const face_m of face_ms ) {
|
||||
@ -128,23 +122,22 @@ function setColors(c) {
|
||||
node_ms[i].color = new THREE.Color(nc[i]);
|
||||
link_ms[i].color = new THREE.Color(nc[i]);
|
||||
}
|
||||
material.color = new THREE.Color(c);
|
||||
//material.color = new THREE.Color(c);
|
||||
}
|
||||
|
||||
function setBackground(c) {
|
||||
scene.background = new THREE.Color(c)
|
||||
}
|
||||
|
||||
// taperedLinks have their own materials so we have to set opacity
|
||||
// on them individually. And also set the base materials as they
|
||||
// will get updated from it when the shape changes
|
||||
|
||||
function setLinkOpacity(o, primary) {
|
||||
if( structure.nolink2opacity ) {
|
||||
link_ms.map((lm) => lm.opacity = o);
|
||||
} else {
|
||||
if( primary ) {
|
||||
link_ms[0].opacity = o;
|
||||
} else {
|
||||
link_ms.slice(1).map((lm) => lm.opacity = o);
|
||||
}
|
||||
}
|
||||
link_ms.map((lm) => lm.opacity = o);
|
||||
if( shape ) {
|
||||
shape.links.map((l) => l.object.material.opacity = o);
|
||||
}
|
||||
}
|
||||
|
||||
function setNodeOpacity(o) {
|
||||
|
||||
@ -1,40 +1,23 @@
|
||||
|
||||
|
||||
import * as THREE from 'three';
|
||||
|
||||
const EPSILON = 0.001;
|
||||
|
||||
class TaperedLink extends THREE.Group {
|
||||
|
||||
constructor(baseMaterial, n1, n2, r1, r2) {
|
||||
super();
|
||||
const geometry = new THREE.ConeGeometry( 1, 1, 16, true );
|
||||
//const geometry = new THREE.CylinderGeometry( 1, 1, 1, 16, 1, true);
|
||||
const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
|
||||
const material = baseMaterial.clone();
|
||||
material.clippingPlanes = [ cplane ];
|
||||
this.object = new THREE.Mesh( geometry, material );
|
||||
this.material = baseMaterial.clone();
|
||||
this.material.clippingPlanes = [ cplane ];
|
||||
this.object = new THREE.Mesh( geometry, this.material );
|
||||
this.add( this.object );
|
||||
this.update(n1, n2, r1, r2, 1, 0, 0);
|
||||
this.update(n1, n2, r1, r2);
|
||||
}
|
||||
|
||||
update_cyl(n1, n2, r1, r2, rotx, roty, rotz) {
|
||||
const length = n1.v3.distanceTo(n2.v3);
|
||||
const centre = new THREE.Vector3();
|
||||
centre.lerpVectors(n1.v3, n2.v3, 0.5);
|
||||
const link_mean = (r1 + r2) * 0.5;
|
||||
this.scale.copy(new THREE.Vector3(link_mean, link_mean, length));
|
||||
this.position.copy(centre);
|
||||
this.lookAt(n2.v3);
|
||||
this.children[0].rotation.x = rotx * Math.PI / 2.0;
|
||||
this.children[0].rotation.y = roty * Math.PI / 2.0;
|
||||
this.children[0].rotation.z = rotz * Math.PI / 2.0;
|
||||
this.visible = true;
|
||||
}
|
||||
|
||||
|
||||
update(n1, n2, r1, r2, rotx, roty, rotz) {
|
||||
update(n1, n2, r1, r2) {
|
||||
const kraw = r1 - r2;
|
||||
let k = ( kraw == 0 ) ? 0.001 : kraw;
|
||||
let k = ( Math.abs(kraw) < EPSILON ) ? EPSILON : kraw;
|
||||
let nbase = n1.v3;
|
||||
let napex = n2.v3;
|
||||
let rbase = r1;
|
||||
@ -58,16 +41,14 @@ class TaperedLink extends THREE.Group {
|
||||
this.position.copy(pos); // the group, not the cone!!
|
||||
|
||||
this.lookAt(nbase);
|
||||
this.children[0].rotation.x = rotx * Math.PI / 2.0;
|
||||
this.children[0].rotation.y = roty * Math.PI / 2.0;
|
||||
this.children[0].rotation.z = rotz * Math.PI / 2.0;
|
||||
this.children[0].rotation.x = 3 * Math.PI / 2.0;
|
||||
this.visible = true;
|
||||
const clipnorm = new THREE.Vector3();
|
||||
clipnorm.copy(napex);
|
||||
clipnorm.sub(nbase);
|
||||
clipnorm.negate();
|
||||
clipnorm.normalize();
|
||||
this.object.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
|
||||
this.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
|
||||
clipnorm, napex
|
||||
);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user