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

Not working but it looks good

Browse Source
This commit is contained in:
Mike Lynch 2025-11-09 17:41:37 +11:00
parent 4695423931
commit 6c875dbda8
1 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
taperedLink.js
View File

@ -9,7 +9,7 @@ class TaperedLink extends THREE.Group {
const cone = new THREE.ConeGeometry( 0.75, 1, 32, true ); const cone = new THREE.ConeGeometry( 0.75, 1, 32, true );
const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5); const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
const material = baseMaterial.clone(); const material = baseMaterial.clone();
//material.clippingPlanes = [ cplane ]; material.clippingPlanes = [ cplane ];
this.cone = new THREE.Mesh( cone, material ); this.cone = new THREE.Mesh( cone, material );
this.add( this.cone ); this.add( this.cone );
const cylinder = new THREE.CylinderGeometry(1, 1, 1, 16, 1, true); const cylinder = new THREE.CylinderGeometry(1, 1, 1, 16, 1, true);
@ -20,13 +20,11 @@ class TaperedLink extends THREE.Group {
this.update(n1, n2, r1, r2); this.update(n1, n2, r1, r2);
} }
// mystery - commenting out the cylinder stuff makes the glitchiness return!
update(n1, n2, r1, r2) { update(n1, n2, r1, r2) {
this.update_cone(n1, n2, r1, r2); this.update_cone(n1, n2, r1, r2);
this.update_cylinder(n1, n2, r1, r2);
} }
update_cone(n1, n2, r1, r2) { update_cone(n1, n2, r1, r2) {
const kraw = r1 - r2; const kraw = r1 - r2;
let k = ( kraw == 0 ) ? 0.001 : kraw; let k = ( kraw == 0 ) ? 0.001 : kraw;
@ -42,9 +40,6 @@ class TaperedLink extends THREE.Group {
k = -k; k = -k;
} }
// FIXME - the problem is that when the h_offset > 1, the centroid
// of the cone is on the other side of napex, so it looks the wrong way
const l = nbase.distanceTo(napex); const l = nbase.distanceTo(napex);
const h = l * rbase / k; const h = l * rbase / k;
const h_offset = 0.5 * h / l; const h_offset = 0.5 * h / l;
@ -52,33 +47,39 @@ class TaperedLink extends THREE.Group {
if( l > 0 ) { if( l > 0 ) {
pos.lerpVectors(nbase, napex, h_offset); pos.lerpVectors(nbase, napex, h_offset);
} }
const rmean = 0.5 * (r1 + r2);
if( h_offset < 1 ) { if( h_offset < 1 ) {
this.cone.scale.copy(new THREE.Vector3(rbase, h, rbase)); this.cone.scale.copy(new THREE.Vector3(rbase, h, rbase));
this.cylinder.scale.copy(new THREE.Vector3(rmean, l, rmean));
} else { } else {
// you're on the other side of napex so flip the cone // you're on the other side of napex so flip the cone
this.cone.scale.copy(new THREE.Vector3(rbase, -h, rbase)); this.cone.scale.copy(new THREE.Vector3(rbase, -h, rbase));
this.cylinder.scale.copy(new THREE.Vector3(rmean, -l, rmean));
} }
this.lookAt(napex); this.lookAt(napex); // the group, not the cone!!
this.position.copy(pos); this.position.copy(pos); // the group, not the cone!!
this.cone.rotation.x = Math.PI / 2.0; this.cone.rotation.x = Math.PI / 2.0;
this.cylinder.rotation.x = Math.PI / 2.0;
const clipnorm = new THREE.Vector3(); const clipnorm = new THREE.Vector3();
clipnorm.copy(napex); clipnorm.copy(napex);
clipnorm.sub(nbase); clipnorm.sub(nbase);
clipnorm.negate(); clipnorm.negate();
clipnorm.normalize(); clipnorm.normalize();
//this.cone.material.clippingPlanes[0].setFromNormalAndCoplanarPoint( this.cone.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
// clipnorm, napex clipnorm, napex
// ); );
} }
update_cylinder(n1, n2, r1, r2) { update_cylinder_busted(n1, n2, r1, r2) {
const length = n1.v3.distanceTo(n2.v3); const length = n1.v3.distanceTo(n2.v3);
const centre = new THREE.Vector3(); const centre = new THREE.Vector3();
centre.lerpVectors(n1.v3, n2.v3, 0.5); centre.lerpVectors(n1.v3, n2.v3, 0.5);
const link_mean = (r1 + r2) * 0.5; const link_mean = (r1 + r2) * 0.5;
this.cylinder.scale.copy(new THREE.Vector3(link_mean, link_mean, length)); this.cylinder.scale.copy(new THREE.Vector3(link_mean, link_mean, length));
this.cylinder.position.copy(centre); this.cylinder.position.copy(centre);
this.lookAt(n2.v3); //this.cylinder.lookAt(n2.v3);
this.cylinder.rotation.x = Math.PI / 2.0; this.cylinder.rotation.x = Math.PI / 2.0;
} }