JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/three@0.133.1";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.133.1/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 20, 40);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

let pts = [[25,0],[15, 0],[5, 10],[0, 10]].map(p => {return new THREE.Vector2(p[0], p[1])});
let g = new THREE.LatheGeometry(pts, 10);
beautifyLathe(g);
let m = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg"), wireframe: false});
let o = new THREE.Mesh(g, m);
//o.rotation.set(Math.PI * 0.5, Math.PI, 0)
scene.add(o);

window.addEventListener("resize", () => {
	camera.aspect = innerWidth / innerHeight;
  camear.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

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

function beautifyLathe(g){
	
  let pos = g.attributes.position;
  
  let pCount = g.parameters.points.length;
  let segs = g.parameters.segments;
  
  let pStart = new THREE.Vector3();
  let pEnd = new THREE.Vector3();
  let pMid = new THREE.Vector3();
  
  for(let i = 0; i < segs; i += 2){
  	for(let p = 0; p < pCount; p++){
  		pStart.fromBufferAttribute(pos, pCount * i + p);
      pEnd.fromBufferAttribute(pos, pCount * (i + 2) + p);
      pMid.addVectors(pStart, pEnd).multiplyScalar(0.5);
      pos.setXYZ(pCount * (i + 1) + p, pMid.x, pMid.y, pMid.z);
    }
  }
  
  g.computeVertexNormals();
  
}