JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

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

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

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

var points = [
  new THREE.Vector2(1, 0),
  new THREE.Vector2(3, 0),
  new THREE.Vector2(7, 7.5),
  new THREE.Vector2(7, 8),
  new THREE.Vector2(3, 8),
  new THREE.Vector2(3, 6),
  new THREE.Vector2(4, 6),
  new THREE.Vector2(4, 7),
  new THREE.Vector2(6, 7),
  new THREE.Vector2(2.75, 1),
  new THREE.Vector2(1, 1),
  new THREE.Vector2(1, 0)
];

var latheGeometry = new THREE.LatheGeometry(points, 64);
latheGeometry.translate(0, -4, 0);
var latheMaterial = new THREE.MeshPhongMaterial({
  color: "aqua"
});
var lathe = new THREE.Mesh(latheGeometry, latheMaterial);
scene.add(lathe);

var profileGeometry = new THREE.BufferGeometry().setFromPoints(points);
var line = new THREE.Line(profileGeometry, new THREE.LineBasicMaterial({
  color: "yellow", depthTest: false
}));
line.position.set(0, -4, 0);
scene.add(line);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}