JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var renderer, scene, camera;

init();
render();

function init() {

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	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( 5, 5, 20 );

	var controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.addEventListener( 'change', render ); // use if there is no animation loop
	controls.minDistance = 2;
	controls.maxDistance = 200;

	scene.add( new THREE.AxesHelper( 50 ) );

	var geometry = new THREE.PlaneBufferGeometry( 50, .2 );
	geometry.rotateX( - Math.PI / 2 );
	geometry.rotateY( - Math.PI / 16 );
	geometry.rotateZ( - Math.PI / 16 );

	var material = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide } );

	var obj = new THREE.Mesh( geometry, material );
	obj.position.set( 0, 0.1, 0.1 );
	scene.add( obj );

}

function render() {

	renderer.render( scene, camera );

}