JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/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 = 15; // Diameter of the blank (not the neck)
let height = 50; // Height of the blank
let maxNeckLength = 20; // The maximal length of the neck
let neckInset = 3; // inset of the neck (the radius of the neck will be: radius - neckInset)
let neckLength = 50; // length of the neck
let neckAngle = 45; // Angle of the end of the neck
let bevelInset = 3; // Inset of the bevel
let bevelAngle = 45; // Angle of the bevel
let showEdges = true; // Show the edges on the geometry
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 setupObjects = function () {
// Create the cylinder geometry
let cylGeom = new THREE.CylinderGeometry(radius, radius, height, radius, height);
material.transparent = true;
material.opacity = 0.5;
// Create the mesh
let cylMesh = new THREE.Mesh(cylGeom, material);
let center = new THREE.Vector3(0, 0, 0);
// convert angled to radians
neckAngle *= Math.PI / 180;
bevelAngle *= Math.PI / 180;
let rowY;
let rows = 0;
if (neckLength >= maxNeckLength) {
neckLength = maxNeckLength;
}
if (neckLength > 0) {
for (let x = 0; x < radius * neckLength; x++) {
let vert = cylMesh.geometry.vertices[x];
if (rowY === undefined || x > 0 && rowY !== vert.y) {
rows++;
rowY = vert.y;
}
// Set the center y to the vector y, this way we do not apply anything to the y axis
center.y = vert.y;
// Get the direction of the center - vector
let direction =...