import * as THREE from "three";
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
console.clear();
let scene = new THREE.Scene();
let baseArc_Group = new THREE.Group(); baseArc_Group.name = 'baseArcs';
let leftArc_Group = new THREE.Group(); leftArc_Group.name = 'leftArcs';
let rightArc_Group = new THREE.Group(); rightArc_Group.name = 'rightArcs';
let topArc_Group = new THREE.Group(); topArc_Group.name = 'topArcs';
let decoration_Group = new THREE.Group(); decoration_Group.name = 'decoration'; // polygon, kopfkreis
scene.add( baseArc_Group );
scene.add( leftArc_Group );
scene.add( rightArc_Group );
scene.add( topArc_Group );
scene.add( decoration_Group );
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, .1, 1000);
camera.position.set(0, 0, 60);
let renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.shadowMap.enabled = true;
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0xffffff, 0);
document.body.appendChild(renderer.domElement);
window.addEventListener( 'resize', onWindowResize, false );
let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.minDistance = .1;
controls.maxDistance = 1000;
controls.addEventListener( 'change', render );
let light = new THREE.DirectionalLight(0xffffff, .5);
const amb = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( amb );
light.position.setScalar(1);
light.castShadow = true;
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));
let points = [];
let curChainIndex = 2;
let decoShow = true;
let monochrome = false;
const black = 0x000000;
let color = 0x000000;
// Data for Pitch, Rollerdia, Innerwidth taken from: https://www.iwis.com/as-handbook/iwis-handbuch-kettentechnik-konstruktionsunterlagen-berechnungsbeispiele.pdf
// Data for Studdia, Platethickness taken from: https://www.maedler.de/product/1643/1615/640/einfach-rollenketten-standard
var Chains = [
{Name: "3/8 x 5/32“", Pitch: 9.525, Rollerdia: 6.35, Innerwidth: 5.72, Studdia: 3.28, Platethickness: 1.405},
{Name: "1/2 x 5/16“", Pitch: 12.700, Rollerdia: 8.51, Innerwidth: 7.75, Studdia: 4.09, Platethickness: 1.775},
{Name: "5/8 x 3/8“", Pitch: 15.875, Rollerdia: 10.16, Innerwidth: 9.65, Studdia: 5.08, Platethickness: 1.815},
{Name: "3/4 x 7/16“", Pitch: 19.050, Rollerdia: 12.07, Innerwidth: 11.75, Studdia: 5.72, Platethickness: 1.970},
{Name: "1“ x 17 mm", Pitch: 25.400, Rollerdia: 15.88, Innerwidth: 17.02, Studdia: 8.28, Platethickness: 4.210},
{Name: "1 1/4 x 3/4“",Pitch: 31.750, Rollerdia: 19.05, Innerwidth: 19.56, Studdia: 10.19, Platethickness: 4.725},
];
const gui = new GUI();
const params = {
Chain: "5/8 x 3/8“",
Pitch: Chains[curChainIndex].Pitch,
Rollerdia: Chains[curChainIndex].Rollerdia,
NumTeeth: 5,
Decoration: decoShow,
Monochrome: monochrome
}
const folder = gui.addFolder( 'Sprocket' );
folder.add( params, 'Chain', { "3/8 x 5/32“": 0,
"1/2 x 5/16“": 1,
"5/8 x 3/8“": 2,
"3/4 x 7/16“": 3,
"1“ x 17 mm": 4,
"1 1/4 x 3/4“": 5 } ).onChange( proxy );
folder.add( params, 'Pitch', Chains[curChainIndex].Pitch ).listen().disable().updateDisplay();
folder.add( params, 'Rollerdia', Chains[curChainIndex].Rollerdia ).listen().disable().updateDisplay();
folder.add( params, 'Decoration', decoShow).onChange( proxy2 );
folder.add( params, 'Monochrome', decoShow).onChange( proxy3 );
folder.add( params, 'NumTeeth', 5, 43, 1).onChange( createSprocket );
folder.open();
function proxy( val ) {
curChainIndex = val;
params.Pitch = Chains[curChainIndex].Pitch;
params.Rollerdia = Chains[curChainIndex].Rollerdia;
createSprocket();
}
function proxy2( val ) {
decoShow = val;
createSprocket();
}
function proxy3( val ) {
monochrome = val;
createSprocket();
}
function createSprocket( ) {
const N = parseInt( params.NumTeeth ); // Anzahl Zähne
const dAng = 2 * Math.PI / N; // Winkel zwischen benachbarten Zähnen
const P = Chains[ curChainIndex ].Pitch; // Teilung / pitch
const R = (P / 2) / Math.sin( dAng / 2 ); // Teilkreisradius
const rr = Chains[ curChainIndex ].Rollerdia / 2; // Rollenradius
let cx, cy; // center coordinates for ellipse curve (arc)
let sAng, eAng; // start / end angle of arc
let geometry, mesh, m;
let pts, curve, ellipse;
// ********************* pitch polygon ***************************
// remove previous meshes (Polygon, Kopfkreis)
while ( decoration_Group.children.length != 0 ) decoration_Group.children[0].removeFromParent();
let vec1 = new THREE.Vector2().set( 0, R ); // start with 1st vertex @ 12:00 position
let vec2 = new THREE.Vector2().set( 0, 0 );
let center = new THREE.Vector2().set( 0, 0 );
points.length = 0;
points.push( vec1 );
for ( let i = 0; i < N; i++ ) {
vec2 = vec1.rotateAround( center, dAng );
points.push( vec2.clone( vec2 ) );
vec1.copy( vec2 );
}
for ( let i = 0; i < N; i++ ) {
const geometry = new THREE.CircleGeometry( rr, 32 );
const material = new THREE.LineBasicMaterial( { color: 0xffE0E0 } );
const circle = new THREE.Mesh( geometry, material );
circle.position.set( points[i].x, points[i].y, 0.0 );
decoration_Group.add( circle );
}
m = new THREE.LineBasicMaterial( { color: 0x808080 } );
geometry = new THREE.BufferGeometry().setFromPoints( points );
mesh = new THREE.LineLoop( geometry, m); mesh.name = 'Polygon';
decoration_Group.add( mesh );
// ********************* Kopfkreis ***************************
const rk = ( 2 * R + ( 1.0 - ( 1.6 / N ) ) * P - rr ) / 2.0; // min. Kopfkreisradius (aus Literatur)
curve = new THREE.EllipseCurve(
0.0, 0.0, // ax, aY
rk, rk, // xRadius, yRadius
0.0, // aStartAngle,
2 * Math.PI, // aEndAngle
true, // aClockwise
0 // aRotation
);
pts = curve.getPoints( 200 ); // full circle, as opposed to "edgy" pitch polygon
geometry = new THREE.BufferGeometry().setFromPoints( pts );
const m1 = new THREE.LineBasicMaterial( { color: 0xE0E0E0 } );
ellipse = new THREE.Line( geometry, m1 ); ellipse.name = "Kopfkreis";
decoration_Group.add( ellipse );
// ********************* baseArc ***************************
// remove previous baseArcs
while ( baseArc_Group.children.length != 0 ) baseArc_Group.children[0].removeFromParent();
color = monochrome? black : 0xff0000;
const m2 = new THREE.LineBasicMaterial( { color: color } );
for ( let i = 0; i < N; i++ ) {
sAng = -dAng / 2 + i * dAng;
eAng = Math.PI + dAng / 2 + i * dAng;
curve = new THREE.EllipseCurve(
points[i].x, points[i].y, // ax, aY
rr, rr, // xRadius, yRadius
sAng, // aStartAngle,
eAng, // aEndAngle
true, // aClockwise
0 // aRotation
);
pts = curve.getPoints( 20 );
geometry = new THREE.BufferGeometry().setFromPoints( pts );
ellipse = new THREE.Line( geometry, m2 ); ellipse.name = "Ellipse"+i;
baseArc_Group.add( ellipse );
}
// ********************* rightArc ***************************
// remove previous leftArcs
while ( rightArc_Group.children.length != 0 ) rightArc_Group.children[0].removeFromParent();
let Rr = P - rr; // Radius (linke) Zahnflanke
let Sx = 0, Sy = 0;
let dx = 0, dy = 0;
let ang1, ang2, delta;
let e1 = 0, e2 = 0;
// the outer ends of the left/right flank arcs are limited by their intersection with 'Kopfkreis'
let i = 0;
let result = Intersect2Circles( [points[i].x, points[i].y], Rr, [0, 0], rk );
// compute angle of 1st intersection point wrt. current arc center
Sx = result[0][0];
Sy = result[0][1];
ang1 = ( Math.atan2( ( Sy - points[i].y ) , ( Sx - points[i].x ) ) );
// compute angle of 2nd intersection point wrt. current arc center
Sx = result[1][0];
Sy = result[1][1];
ang2 = ( Math.atan2( ( Sy - points[i].y ) , ( Sx - points[i].x ) ) );
// compute both angular "distances" from arc start angle sAng, then use smaller one
sAng = -dAng / 2 + i * dAng;
e1 = Math.abs( ang1 - sAng );
e2 = Math.abs( ang2 - sAng );
delta = e1 < e2 ? ang1 - sAng : ang2 - sAng ;
color = monochrome? black : 0x00ff00;
const m3 = new THREE.LineBasicMaterial( { color: color } );
for ( let i = 0; i < N; i++ ) {
sAng = -dAng / 2 + i * dAng;
eAng = sAng + delta;
curve = new THREE.EllipseCurve(
points[i].x, points[i].y, // ax, aY
Rr, Rr, // xRadius, yRadius
sAng, // aStartAngle,
eAng, // aEndAngle
false, // aClockwise
0 // aRotation
);
pts = curve.getPoints( 20 );
geometry = new THREE.BufferGeometry().setFromPoints( pts );
ellipse = new THREE.Line( geometry, m3 ); ellipse.name = "Ellipse"+i;
rightArc_Group.add( ellipse );
}
// ********************* leftArc ***************************
// remove previous leftArcs
while ( leftArc_Group.children.length != 0 ) leftArc_Group.children[0].removeFromParent();
let Rl = P - rr; // Radius (rechte) Zahnflanke
color = monochrome? black : 0x0000ff;
const m4 = new THREE.LineBasicMaterial( { color: color } );
for ( let i = 0; i < N; i++ ) {
sAng = +dAng / 2 + Math.PI + i * dAng;
eAng = sAng - delta;
curve = new THREE.EllipseCurve(
points[i].x, points[i].y, // ax, aY
Rl, Rl, // xRadius, yRadius
sAng, // aStartAngle,
eAng, // aEndAngle
true, // aClockwise
0 // aRotation
);
pts = curve.getPoints( 20 );
geometry = new THREE.BufferGeometry().setFromPoints( pts );
ellipse = new THREE.Line( geometry, m4 ); ellipse.name = "Ellipse"+i;
leftArc_Group.add( ellipse );
}
// ********************* top Arc ***************************
// The top arc connects the far ends of left / right flank arcs of same tooth
// with an arc about the center of rotation of the sprocket, "Kopfkreis".
//
// Strategy:
// 1. compute x,y coordinates of flank arc far endpoints from flank arc center,
// radius and end angle
// 2. compute angle wrt. center of sprocket from flank arc endpoint coordinates
// 3. do this for 1st tooth only on one side, because of symmetry
// 4. use finding on all other teeth
let ex = 0, ey = 0; // flank arc endpoint = top arc start point
let tAng = 0, dtAng = 0;
eAng = +dAng / 2 + Math.PI - delta;
ex = Rl * Math.cos( eAng ) + points[ 0 ].x;
ey = Rl * Math.sin( eAng ) + points[ 0 ].y;
tAng = Math.PI + Math.atan( ey / ex ); // start angle for top arc of tooth#1
dtAng = tAng - (Math.PI /2 + dAng / 2); // delta ang (±) for symmetry axis of tooth#1
// remove previous topArcs
while ( topArc_Group.children.length != 0 ) topArc_Group.children[0].removeFromParent();
color = monochrome? black : 0x000000;
const m5 = new THREE.LineBasicMaterial( { color: color } );
for ( let i = 0; i < N; i++ ) {
sAng = tAng + i * dAng;
eAng = sAng - 2 * dtAng;
curve = new THREE.EllipseCurve(
0.0, 0.0, // ax, aY
rk, rk, // xRadius, yRadius
sAng, // aStartAngle,
eAng, // aEndAngle
true, // aClockwise
0 // aRotation
);
pts = curve.getPoints( 20 );
geometry = new THREE.BufferGeometry().setFromPoints( pts );
ellipse = new THREE.Line( geometry, m5 ); ellipse.name = "Ellipse"+i;
topArc_Group.add( ellipse );
}
decoration_Group.visible = decoShow;
render();
}
createSprocket();
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
controls.update();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function Intersect2Circles( A, a, B, b ) {
//
// taken from:
//
// http://walter.bislins.ch/blog/index.asp?page=Schnittpunkte+zweier+Kreise+berechnen+%28JavaScript%29
//
// A, B = [ x, y ]
// a = radius of circle about center A
// b = radius of circle about center B
// return = [ Q1, Q2 ] or [ Q ] or [] where Q = [ x, y ]
var AB0 = B[0] - A[0];
var AB1 = B[1] - A[1];
var c = Math.sqrt( AB0 * AB0 + AB1 * AB1 );
if (c == 0) {
// no distance between centers
return [];
}
var x = (a*a + c*c - b*b) / (2*c);
var y = a*a - x*x;
if (y < 0) {
// no intersection
return [];
}
if (y > 0) y = Math.sqrt( y );
// compute unit vectors ex and ey
var ex0 = AB0 / c;
var ex1 = AB1 / c;
var ey0 = -ex1;
var ey1 = ex0;
var Q1x = A[0] + x * ex0;
var Q1y = A[1] + x * ex1;
if (y == 0) {
// one touch point
return [ [ Q1x, Q1y ] ];
}
// two intersections
var Q2x = Q1x - y * ey0;
var Q2y = Q1y - y * ey1;
Q1x += y * ey0;
Q1y += y * ey1;
return [ [ Q1x, Q1y ], [ Q2x, Q2y ] ];
}
function render() {
renderer.render( scene, camera );
}
!
