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

Fixed the weird glitching at r1 = r2 / 2 by making it face the base, not the apex

Browse Source
This commit is contained in:
Mike Lynch 2025-11-16 11:04:36 +11:00
parent a2581a2f66
commit 840e46201c
2 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
linktest.js
View File

@ -37,7 +37,7 @@ renderer.localClippingEnabled = true;
const controls = new OrbitControls( camera, renderer.domElement ); const controls = new OrbitControls( camera, renderer.domElement );
controls.autoRotate = true; controls.autoRotate = false;
document.body.appendChild( renderer.domElement ); document.body.appendChild( renderer.domElement );
@ -61,6 +61,9 @@ const params = {
r2: 0.6, r2: 0.6,
sync: false, sync: false,
l: 9, l: 9,
rotx: 1,
roty: 0,
rotz: 0,
}; };
const gui = new GUI(); const gui = new GUI();
@ -69,6 +72,9 @@ gui.add(params, "r1", 0.01, 1.5);
gui.add(params, "r2", 0.01, 1.5); gui.add(params, "r2", 0.01, 1.5);
gui.add(params, "sync"); gui.add(params, "sync");
gui.add(params, "l", 0, 10); gui.add(params, "l", 0, 10);
gui.add(params, "rotx", 0, 4);
gui.add(params, "roty", 0, 4);
gui.add(params, "rotz", 0, 4);
function makeNode(material, pos, r) { function makeNode(material, pos, r) {
const geometry = new THREE.SphereGeometry(1); const geometry = new THREE.SphereGeometry(1);
@ -106,7 +112,7 @@ function animate() {
updateNode(n1, new THREE.Vector3(- params["l"], -1, -1), r1); updateNode(n1, new THREE.Vector3(- params["l"], -1, -1), r1);
updateNode(n2, new THREE.Vector3(params["l"], 1, 1), r2); updateNode(n2, new THREE.Vector3(params["l"], 1, 1), r2);
tl.update(n1, n2, r1, r2); tl.update(n1, n2, r1, r2, params["rotx"], params["roty"], params["rotz"]);
controls.update(); controls.update();
renderer.render(scene, camera); renderer.render(scene, camera);
} }

55
taperedLink.js
View File

@ -1,22 +1,38 @@
import * as THREE from 'three'; import * as THREE from 'three';
// wtf dude
class TaperedLink extends THREE.Group { class TaperedLink extends THREE.Group {
constructor(baseMaterial, n1, n2, r1, r2) { constructor(baseMaterial, n1, n2, r1, r2) {
super(); super();
//const geometry = new THREE.ConeGeometry( 1, 1, 32, true ); const geometry = new THREE.ConeGeometry( 1, 1, 16, true );
const geometry = new THREE.CylinderGeometry( 1, 1, 1, 16, 1, 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 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.object = new THREE.Mesh( geometry, material ); this.object = new THREE.Mesh( geometry, material );
this.add( this.object ); this.add( this.object );
this.update(n1, n2, r1, r2); this.update(n1, n2, r1, r2, 1, 0, 0);
} }
update_cone_busted(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) {
const kraw = r1 - r2; const kraw = r1 - r2;
let k = ( kraw == 0 ) ? 0.001 : kraw; let k = ( kraw == 0 ) ? 0.001 : kraw;
let nbase = n1.v3; let nbase = n1.v3;
@ -34,39 +50,30 @@ class TaperedLink extends THREE.Group {
const l = nbase.distanceTo(napex); const l = nbase.distanceTo(napex);
const lapex = l * rapex / k; const lapex = l * rapex / k;
const h = l + lapex; const h = l + lapex;
this.object.scale.copy(new THREE.Vector3(rbase, h, rbase)); this.scale.copy(new THREE.Vector3(rbase, rbase, h));
const h_offset = 0.5 * h / l; const h_offset = 0.5 * h / l;
const pos = new THREE.Vector3(); const pos = new THREE.Vector3();
pos.lerpVectors(nbase, napex, h_offset); pos.lerpVectors(nbase, napex, h_offset);
//this.scale.copy(new THREE.Vector3(rbase, h, rbase));
this.position.copy(pos); // the group, not the cone!! this.position.copy(pos); // the group, not the cone!!
this.lookAt(napex); this.lookAt(nbase);
this.rotation.y = Math.PI / 2.0; this.children[0].rotation.x = rotx * Math.PI / 2.0;
/* const clipnorm = new THREE.Vector3(); this.children[0].rotation.y = roty * Math.PI / 2.0;
this.children[0].rotation.z = rotz * Math.PI / 2.0;
this.visible = true;
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.object.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
clipnorm, napex clipnorm, napex
); );
*/
} }
update(n1, n2, r1, r2) {
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 = Math.PI / 2.0;
this.visible = true;
} }