JSFiddle - React, Tailwind, and code Playground

by samonela

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>

CSS

body {
				font-family: Monospace;
				background-color: #222;
				margin: 0px;
				overflow: hidden;
			}
			a {
				color: #f80;
			}

JavaScript

'use strict';

var container;
var camera, scene, renderer, controls;
var screw, mirror;

// Screw parameters
const P = 2; // number of flights

const D = 50, // outer diameter
		Dr = D/1.66, // root diameter
		Cl = (Dr+D)/2, // centerline distance
		αi = 2*Math.acos(Cl/D),
		Ih = D*Math.sin(αi/2)/2,
		H = D-Cl;

const αf = αi,
		αt = Math.PI/P - αf,
		αr = αt;

//console.log(D, Dr, Cl, Ih, H);
//console.log(αi, αf, αt, αr);

function getFlankParams(α1, D1, α2, D2, ctr){
	// flanks are arcs with origin (xc, yc) of radius Cl passing through (x1, y1) and (x2, y2):
	// (x1-xc)^2 + (y1-yc)^2 = Cl^2
	// (x2-xc)^2 + (y2-yc)^2 = Cl^2
	var x1 = D1*Math.cos(α1),
			y1 = D1*Math.sin(α1),
			x2 = D2*Math.cos(α2),
			y2 = D2*Math.sin(α2);
	// Solving system of equations yields linear eq:
	// y1-yc = beta - alpha*(x1-xc)
	var alpha = (x1-x2)/(y1-y2),	
			beta = (y1-y2)*(1+Math.pow(alpha,2))/2;
	// Substitution and applying quadratic equation:
	const xc = x1 - alpha*beta/(1+Math.pow(alpha,2))*(1+Math.pow(-1,ctr)*Math.sqrt(1-(1-Math.pow(Cl/beta,2))*(1+1/Math.pow(alpha,2)))),
			yc = y1 + alpha*(x1-xc) - beta;
	// Following from law of consines, the angle the flank extends wrt its own origin:
	const asq = Math.pow(Dr/2,2)+Math.pow(D/2,2)-2*(Dr/2)*(D/2)*Math.cos(αf),
			af = Math.acos(1-asq/Math.pow(Cl, 2)/2);
  return {xc, yc, af};
}
var cachedShape;
function getShape() {
  if (typeof cachedShape === 'undefined') {
    // creates the shape of the screw profile
    const shape = new THREE.Shape();
    let angle = 0, ctr = 0;
    // loop over number of flights
    for (var p=0; p<P; p++){
      // tip
      shape.absarc(0, 0, D/2, angle, angle+αt);
      angle += αt; 
      // flank
      let params = getFlankParams(angle, D/2, angle+αf, Dr/2, ctr++);
      shape.absarc(params.xc, params.yc, Cl, angle+αf-params.af, angle+αf, false);
      angle += αf; 
      // root
      shape.absarc(0, 0, Dr/2, angle, angle+αr);
      angle += αr; 
      // flank
      params =...