JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://threejs.org/build/three.js"></script>

CSS

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

JavaScript

// Test for three.js r87
// I test in firefox, goto Open menu (top-right) -> Developer -> Toggle Tools
// In "Memory" tab click at "Take snapshot" button
// Press "q" for dispost things.
// Open new tab goto "about:memory" page and click at "Minimize memory usage" button for completely clear GC
// Press "Take snapshot" button again, memory is not much deduct.
// Uncomment at line 44 "renderer.dispose"
// Test from step before again...

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );

var geometry = new THREE.SphereBufferGeometry( 1, 1024, 1024 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var sphere = new THREE.Mesh( geometry, material );

scene.add( sphere );
camera.position.z = 5;
	
function onWindowResize()
{
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}

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

window.addEventListener( "keydown", function( event ) {
	switch ( event.keyCode ) {
		case 81: // q
			scene.remove( sphere );
			geometry.dispose();
			material.dispose();
			//renderer.dispose();
			geometry = undefined;
			material = undefined;
			sphere = undefined;
			console.log("q");
			break;
	}
}, true);

render();