JSFiddle - React, Tailwind, and code Playground

by [Twiner]

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - convex geometry</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #000;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				color: #fff;
				top: 0px;
				width: 100%;
				padding: 5px;
				text-align:center;
			}
			a {
				color: #fff;
			}
		</style>
	</head>
	<body>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js' />
		<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
		<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
		<script src="https://threejs.org/examples/js/QuickHull.js"></script>
		<script src="https://threejs.org/examples/js/geometries/ConvexGeometry.js"></script>

		<script>
			var group, camera, scene, renderer, model, isModelRotating = true;
			init();
			animate();
			function init() {
                console.log(THREE.OrbitControls)
				scene = new THREE.Scene();
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );
                
				// camera
				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 5000 );
				camera.position.set( 0, 1000, 1000 );
				scene.add( camera );
				// controls
				var controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.minDistance = 50;
				controls.maxDistance = 500000;
				controls.maxPolarAngle = Math.PI / 2;
                scene.add( new THREE.AmbientLight( 0xffffff ) );
                //scene.add( new THREE.AmbientLight( 0xffffff ) );
                

                scene.background = new...