minimal three.js modules (no buildpack)

index.html

<header>
	<style>
		body { font-family: arial; margin: 0; }
		.nav {
			color: white; background-color: rgba(100, 100, 100, 0.5);
			text-align: center; width: 100%; top: 0px; 
			position: fixed; z-index: 1; margin: 0px;
		}
	</style>
</header>
<h1 class="nav"> Minimal Three JS, no buildpack </h1>

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      		"three/": "https://unpkg.com/three/"
		}
	}
</script>

<script type="module">
/* seperate this out to a seperate main.js file, and point to it */	
	import * as THREE from 'three';
	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

	// init
	const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
	camera.position.z = 1;

	const scene = new THREE.Scene();

	const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
	const material = new THREE.MeshNormalMaterial();

	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setAnimationLoop(animation);
	document.body.appendChild(renderer.domElement);

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

	// animation
	function animation(time) {
		renderer.render(scene, camera);
	}

</script>