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
var P = 2; // number of flights

var 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;

var α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:
	var 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:
	var 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);

	var params = {xc: xc, yc: yc, af: af};
	return params;
}

function getProfile() {
	// creates the shape of the screw profile
	var shape = new THREE.Shape();
	var 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
		var 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 = getFlankParams(angle, Dr/2, angle+αf, D/2, ctr++);
		shape.absarc(params.xc, params.yc, Cl, angle,...