three.js dev template - module

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<script type="importmap">
  {
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>
<div style="display: flex;">
  <div class="flex-child" style="width: 200px;">

  </div>
  <div id="container" class="flex-child">

  </div>
</div>

CSS

body {
	margin: 0px;
}
flex-child {
  flex: 1;
}
.flex-child:first-child {
    margin-right: 20px;
}

JavaScript

import * as THREE from 'three';

import {
  OrbitControls
} from 'three/addons/controls/OrbitControls.js';
import {
  TransformControls
} from 'three/addons/controls/TransformControls.js';

let cameraPersp, cameraOrtho, currentCamera;
let scene, renderer, control, orbit;

init();
render();

function init() {

	const container = document.getElementById( 'container' );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth - 200, window.innerHeight);
  container.appendChild(renderer.domElement);

  const aspect = ( window.innerWidth - 200 ) / window.innerHeight;

  cameraPersp = new THREE.PerspectiveCamera(50, aspect, 0.01, 30000);
  cameraOrtho = new THREE.OrthographicCamera(-600 * aspect, 600 * aspect, 600, -600, 0.01, 30000);
  currentCamera = cameraPersp;

  currentCamera.position.set(1000, 500, 1000);
  currentCamera.lookAt(0, 200, 0);

  scene = new THREE.Scene();
  scene.add(new THREE.GridHelper(1000, 10, 0x888888, 0x444444));

  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.set(1, 1, 1);
  scene.add(light);

  const texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/crate.gif', render);
  texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

  const geometry = new THREE.BoxGeometry(200, 200, 200);
  const material = new THREE.MeshLambertMaterial({
    map: texture,
    transparent: true
  });

  orbit = new OrbitControls(currentCamera, renderer.domElement);
  orbit.update();
  orbit.addEventListener('change', render);

  control = new TransformControls(currentCamera, renderer.domElement);
  control.addEventListener('change', render);

  control.addEventListener('dragging-changed', function(event) {

    orbit.enabled = !event.value;

  });

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

  control.attach(mesh);
  scene.add(control);

  window.addEventListener('resize', onWindowResize);

 ...