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

Compare commits

base: bombinans:cc7f77a5a944cac4dd54f78eb76c7a0885cbb0f0
Branches Tags
bombinans:main
bombinans:feature-120-cell-more-inscriptions
bombinans:feature-tapered-links
bombinans:broken-cursed-links
bombinans:feature-alt-projections
bombinans:feature-descriptions
bombinans:feature-node-foreshortening
bombinans:feature-snub-24-cell
bombinans:feature-120-cell-layers
bombinans:feature-3d-shapes
bombinans:feature-inscriptions
bombinans:experiments-120-cell
bombinans:feature-120-cell-index
bombinans:feature-faces
bombinans:feature-big-polytopes
...
compare: bombinans:43c85d0084c6712457888504a7f55dfa89921764
Branches Tags
bombinans:feature-120-cell-more-inscriptions
bombinans:main
bombinans:feature-tapered-links
bombinans:broken-cursed-links
bombinans:feature-alt-projections
bombinans:feature-descriptions
bombinans:feature-node-foreshortening
bombinans:feature-snub-24-cell
bombinans:feature-120-cell-layers
bombinans:feature-3d-shapes
bombinans:feature-inscriptions
bombinans:experiments-120-cell
bombinans:feature-120-cell-index
bombinans:feature-faces
bombinans:feature-big-polytopes

4 Commits
cc7f77a5a9 ... 43c85d0084

Author SHA1 Message Date
Mike Lynch
43c85d0084 Added a testbed version of main to fiddle with tapered links 2025-11-15 14:43:51 +11:00
Mike Lynch
6c875dbda8 Not working but it looks good 2025-11-09 17:41:37 +11:00
Mike Lynch
4695423931 Weirdness - the glitchiness is coming and going depending on whether 
the clipping plane is enabled, or the cylinders added?
 2025-11-09 11:20:16 +11:00
Mike Lynch
bf55db9f75 Comment about really silly idea 2025-11-09 08:43:04 +11:00
5 changed files with 131 additions and 20 deletions
Show Stats Expand all files Collapse all files

6
gui.js
View File

@ -2,12 +2,12 @@ import { GUI } from 'lil-gui';
const DEFAULTS = { const DEFAULTS = {
nodesize: 4, nodesize: 1,
nodeopacity: 1, nodeopacity: 1,
linksize: 1.0, linksize: 1.0,
linkopacity: 0.75, linkopacity: 1,
link2opacity: 0.75, link2opacity: 0.75,
shape: 'linky', shape: '5-cell',
option: 'none', option: 'none',
visibility: 5, visibility: 5,
inscribed: false, inscribed: false,

2
index.html
View File

@ -24,7 +24,7 @@
</style> </style>
</head> </head>
<body> <body>
<script type="module" src="/main.js"></script> <script type="module" src="/linktest.js"></script>
<div id="description"></div> <div id="description"></div>
<div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> - <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> <a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>

88
linktest.js Normal file
View File

@ -0,0 +1,88 @@
import * as THREE from 'three';
import { GUI } from 'lil-gui';
import { TaperedLink } from './taperedLink.js';
const FACE_OPACITY = 0.3;
const CAMERA_K = 5;
// scene, lights and camera
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const light = new THREE.PointLight(0xffffff, 2);
light.position.set(10, 10, 10);
scene.add(light);
const light2 = new THREE.PointLight(0xffffff, 2);
light2.position.set(-10, 5, 10);
scene.add(light);
const amblight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(amblight);
camera.position.set(0, 0, CAMERA_K / 2);
camera.lookAt(0, 0, 0);
//camera.position.z = 4;
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.localClippingEnabled = true;
document.body.appendChild( renderer.domElement );
const NODEC = 0x3293a9;
const BACKGROUNDC = 0xd4d4d4;
scene.background = new THREE.Color(BACKGROUNDC);
const material = new THREE.MeshStandardMaterial({ color: NODEC });
const params = {
r1: 0.5,
r2: 0.6,
l: 3,
};
const gui = new GUI();
gui.add(params, "r1", 0.01, 1.5);
gui.add(params, "r2", 0.01, 1.5);
gui.add(params, "l", 0, 4);
function makeNode(material, pos, r) {
const geometry = new THREE.SphereGeometry(1);
const sphere = new THREE.Mesh(geometry, material);
updateNode(sphere, pos, r);
return sphere;
}
function updateNode(node, pos, r) {
node.scale.copy(new THREE.Vector3(r, r, r));
node.position.copy(pos);
}
const n1 = makeNode(material, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]);
const n2 = makeNode(material, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"])
//const tl = new TaperedLink(
scene.add(n1);
scene.add(n2);
function animate() {
requestAnimationFrame(animate);
updateNode(n1, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]);
updateNode(n2, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"]);
renderer.render(scene, camera);
}
animate();

4
polytopes.js
View File

@ -865,7 +865,7 @@ export const icosahedron = () => {
export const build_all = () => { export const build_all = () => {
return [ return [
linkTest(), linkTest(),
/* tetrahedron(), tetrahedron(),
octahedron(), octahedron(),
cube(), cube(),
icosahedron(), icosahedron(),
@ -879,7 +879,7 @@ export const build_all = () => {
cell600_layered(), cell600_layered(),
cell120_inscribed(), cell120_inscribed(),
cell120_layered() cell120_layered()
*/ ]; ];
} }
export const radii = (shape) => { export const radii = (shape) => {

41
taperedLink.js
View File

@ -1,21 +1,31 @@
import * as THREE from 'three'; import * as THREE from 'three';
// really stupid idea: add a cylinder as well!
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( 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( geometry, 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 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.update(n1, n2, r1, r2);
} }
update(n1, n2, r1, r2) { update(n1, n2, r1, r2) {
this.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;
let nbase = n1.v3; let nbase = n1.v3;
@ -30,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;
@ -40,15 +47,19 @@ 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);
@ -57,8 +68,20 @@ class TaperedLink extends THREE.Group {
this.cone.material.clippingPlanes[0].setFromNormalAndCoplanarPoint( this.cone.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
clipnorm, napex 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;
}
}
export { TaperedLink }; export { TaperedLink };