JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

html, body {
  margin: 0;
  padding: 0;
}

JavaScript

let camera, scene, controls, renderer;

let material = new THREE.MeshNormalMaterial();

let radius = 20; // Radius of the blank diameter (not the neck)
let height = 50;

let inset = 3; 	// inset of the neck
let rows = 10; 	// length of the neck
let angle = 45; // Angle of the end of the neck

let initThree = function () {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    
    controls = new THREE.OrbitControls(camera,renderer.domElement);
}

let setupCylinder = function () {
	let cylGeom = new THREE.CylinderGeometry(radius, radius, height, radius, height);
	cylGeom.computeBoundingBox();
	
	let center = new THREE.Vector3(0, 0, 0);

	let cylMesh = new THREE.Mesh(cylGeom, material);
	
	angle *= Math.PI / 180;
	
	for (let x = 0; x < radius * rows; x++) {
		let vert = cylMesh.geometry.vertices[x];
		center.y = vert.y;
		let direction = center.clone().sub(vert);
		direction.normalize();
		direction.multiplyScalar(inset);
				
		vert.x += direction.x;
		vert.z += direction.z;
		
		if (x >= radius * rows - radius && x < radius * rows && x + radius < radius * height) {
			let underneathVert = cylMesh.geometry.vertices[x + radius];
			vert.y = underneathVert.y;
			vert.y += Math.tan(angle) * vert.clone().sub(underneathVert.clone()).length();
		}
	}
	
	let edgesGeom = new THREE.EdgesGeometry(cylMesh.geometry);
	var line = new THREE.LineSegments(edgesGeom, new THREE.LineBasicMaterial({color: 0xffffff}));
	
	cylMesh.position.x += radius * 2;
	line.position.x += radius * 2;
	
	scene.add(cylMesh);
	scene.add(line);
	
	console.log(cylMesh);
}

let setupLathe = function() {
	let points = [];
	
	let center = new THREE.Vector3(0, 0,...