JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

let R = 2;
let r = 1;
let h = 4;

let g = cylinderLathe(R, r, h);
let m = new THREE.MeshStandardMaterial({ color: 0x4488ff, flatShading: true });
let o = new THREE.Mesh(g, m);
scene.add(o);

let wm = new THREE.MeshBasicMaterial({wireframe: true});
let wo = new THREE.Mesh(g, wm);
o.add(wo);

let pg = new THREE.BufferGeometry().setFromPoints(g.parameters.points);
let pm = new THREE.LineBasicMaterial({color: 0x000000, depthTest: false});
let po = new THREE.Line(pg, pm);
o.add(po);

renderer.setAnimationLoop(()=>{
	renderer.render(scene, camera);
})

function cylinderLathe(R, r, h){

	let halfH = h * 0.5;
  
  let points = [
  	new THREE.Vector2(r, -halfH),
    new THREE.Vector2(R, -halfH),
    new THREE.Vector2(R, halfH),
    new THREE.Vector2(r, halfH),
    new THREE.Vector2(r, -halfH)
  ];
	
  let g = new THREE.LatheBufferGeometry(points, 72);
  console.log(g)
  
  return g;

}