From a2581a2f66e69359e740cf622de17ef3348c9e60 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sat, 15 Nov 2025 18:12:06 +1100 Subject: [PATCH] This is throwing errors in vite and I don't know why --- linktest.js | 23 ++++++++------ taperedLink.js | 84 +++++++++++++++++++++----------------------------- 2 files changed, 49 insertions(+), 58 deletions(-) diff --git a/linktest.js b/linktest.js index 7a9ff86..9b13f39 100644 --- a/linktest.js +++ b/linktest.js @@ -1,10 +1,10 @@ import * as THREE from 'three'; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GUI } from 'lil-gui'; import { TaperedLink } from './taperedLink.js'; - const FACE_OPACITY = 0.3; const CAMERA_K = 5; @@ -27,13 +27,17 @@ scene.add(amblight); camera.position.set(0, 0, CAMERA_K / 2); camera.lookAt(0, 0, 0); -//camera.position.z = 4; +camera.position.z = 8; const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.localClippingEnabled = true; +const controls = new OrbitControls( camera, renderer.domElement ); + + +controls.autoRotate = true; document.body.appendChild( renderer.domElement ); @@ -50,13 +54,13 @@ material.opacity = 0.5; const node_mat = new THREE.MeshStandardMaterial({ color: NODEC }); node_mat.transparent = true; -node_mat.opacity = 0.1; +node_mat.opacity = 0.8; const params = { r1: 0.5, r2: 0.6, sync: false, - l: 3, + l: 9, }; const gui = new GUI(); @@ -64,7 +68,7 @@ const gui = new GUI(); gui.add(params, "r1", 0.01, 1.5); gui.add(params, "r2", 0.01, 1.5); gui.add(params, "sync"); -gui.add(params, "l", 0, 4); +gui.add(params, "l", 0, 10); function makeNode(material, pos, r) { const geometry = new THREE.SphereGeometry(1); @@ -84,8 +88,8 @@ function updateNode(node, pos, r) { } -const n1 = makeNode(node_mat, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]); -const n2 = makeNode(node_mat, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"]); +const n1 = makeNode(node_mat, new THREE.Vector3(-params["l"], -1, -1), params["r1"]); +const n2 = makeNode(node_mat, new THREE.Vector3(params["l"], 1, 1), params["r2"]); const tl = new TaperedLink(material, n1, n2, params["r1"], params["r2"]); @@ -100,9 +104,10 @@ function animate() { const r1 = params["r1"]; const r2 = params["sync"] ? r1 : params["r2"] - updateNode(n1, new THREE.Vector3(-0.5 * params["l"], 0, 0), r1); - updateNode(n2, new THREE.Vector3(0.5 * params["l"], 0, 0), r2); + updateNode(n1, new THREE.Vector3(- params["l"], -1, -1), r1); + updateNode(n2, new THREE.Vector3(params["l"], 1, 1), r2); tl.update(n1, n2, r1, r2); + controls.update(); renderer.render(scene, camera); } animate(); diff --git a/taperedLink.js b/taperedLink.js index 3f5e965..5dd0ad3 100644 --- a/taperedLink.js +++ b/taperedLink.js @@ -1,33 +1,22 @@ import * as THREE from 'three'; -// really stupid idea: add a cylinder as well! - -const EPSILON = 0.01; +// wtf dude class TaperedLink extends THREE.Group { constructor(baseMaterial, n1, n2, r1, r2) { super(); - const cone = new THREE.ConeGeometry( 1, 1, 32, true ); + //const geometry = new THREE.ConeGeometry( 1, 1, 32, 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.cone = new THREE.Mesh( cone, material ); - this.add( this.cone ); -// const cylinder = new THREE.CylinderGeometry(1, 1, 1, 16, 1, true); -// const cyl_material = baseMaterial.clone(); -// cyl_material.color = new THREE.Color(0xff0000); -// this.cylinder = new THREE.Mesh(cylinder, cyl_material); -// this.add( this.cylinder ); - // this.update(n1, n2, r1, r2); + this.object = new THREE.Mesh( geometry, material ); + this.add( this.object ); + this.update(n1, n2, r1, r2); } - update(n1, n2, r1, r2) { - this.update_cone(n1, n2, r1, r2); - } - - - update_cone(n1, n2, r1, r2) { + update_cone_busted(n1, n2, r1, r2) { const kraw = r1 - r2; let k = ( kraw == 0 ) ? 0.001 : kraw; let nbase = n1.v3; @@ -45,43 +34,40 @@ class TaperedLink extends THREE.Group { const l = nbase.distanceTo(napex); const lapex = l * rapex / k; const h = l + lapex; - this.cone.scale.copy(new THREE.Vector3(rbase, h, rbase)); + this.object.scale.copy(new THREE.Vector3(rbase, h, rbase)); const h_offset = 0.5 * h / l; const pos = new THREE.Vector3(); pos.lerpVectors(nbase, napex, h_offset); - - //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.lookAt(napex); // the group, not the cone!! + + //this.scale.copy(new THREE.Vector3(rbase, h, rbase)); this.position.copy(pos); // the group, not the cone!! - this.cone.rotation.x = Math.PI / 2.0; -// this.cylinder.rotation.x = Math.PI / 2.0; -// const clipnorm = new THREE.Vector3(); -// clipnorm.copy(napex); - // clipnorm.sub(nbase); - // clipnorm.negate(); - // clipnorm.normalize(); - // this.cone.material.clippingPlanes[0].setFromNormalAndCoplanarPoint( - // clipnorm, napex - // ); - + this.lookAt(napex); + this.rotation.y = Math.PI / 2.0; + /* const clipnorm = new THREE.Vector3(); + clipnorm.copy(napex); + clipnorm.sub(nbase); + clipnorm.negate(); + clipnorm.normalize(); + this.cone.material.clippingPlanes[0].setFromNormalAndCoplanarPoint( + clipnorm, napex + ); + +*/ } - update_cylinder_busted(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.cylinder.scale.copy(new THREE.Vector3(link_mean, link_mean, length)); - this.cylinder.position.copy(centre); - //this.cylinder.lookAt(n2.v3); - this.cylinder.rotation.x = Math.PI / 2.0; - - } -} + 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; +} + + export { TaperedLink };