JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
CSS
body {
font-family: Monospace;
background-color: #222;
margin: 0px;
overflow: hidden;
}
a {
color: #f80;
}
JavaScript
var container;
var camera, scene, renderer, controls;
init();
renderer.render(scene, camera);
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 500);
scene.add(new THREE.AmbientLight(0x222222));
var light = new THREE.PointLight(0xffffff);
light.position.copy(camera.position);
scene.add(light);
var material = new THREE.MeshLambertMaterial({
color : 0xff8000,
wireframe : false
});
var path = new THREE.Path();
path.moveTo(0, 0);
path.arc(0, 0, 100, 0, Math.PI * 2, false);
var shape = path.toShapes(false, false);
var extrudeSettings = {
amount : 20,
steps : 1
};
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 50);
scene.add(mesh);
}