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 src=https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js></script>
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

// Simple three.js example

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';


const gui = new dat.GUI();
const dpr = 180 / Math.PI; // degrees per radian
class DegRadGUIHelper {
  constructor(obj, radProp) {
    this.obj = obj;
    this.radProp = radProp;
  }
  get deg() {
    return this.obj[this.radProp] * this.dpr;
  }
  set deg(deg) {
    this.obj[this.radProp] = deg / this.dpr;
  }
}

function makeXYZGUI(gui, vector3, onChangeFn, range) {
    const folder = (gui instanceof dat.GUI) ? gui : gui.gui.addFolder(gui.name);
    let dr = [-50, 50];
    let r = (v, i) => range ? range[v][i] : dr[i];
    folder.add(vector3, 'x', r(0, 0), r(0, 1)).onChange(onChangeFn);
    folder.add(vector3, 'y', r(1, 0), r(1, 1)).onChange(onChangeFn);
    folder.add(vector3, 'z', r(2, 0), r(2, 1)).onChange(onChangeFn);
    folder.open();
    return folder;
  }


function addSpot(deg, x, y, z) {
  const light = new THREE.SpotLight(0xffffff, 1.3);
  light.angle = deg * (Math.PI / 180);
  light.position.set(x, y, z);
  light.target.position.set(0, 0, 0);
  scene.add(light);
  scene.add(light.target);

  const helper = new THREE.SpotLightHelper(light);
  scene.add(helper);
  helper.update();

  let updateLight = () => {
    light.target.updateMatrixWorld();
    helper.update();
  };
  let folder = gui.addFolder('spot-light');
  let drhelp = new DegRadGUIHelper(light, 'angle');
  //folder.add(drhelp, 'deg', 0, 180).onChange(updateLight);
  makeXYZGUI(folder, light.position, updateLight);
  makeXYZGUI(gui.addFolder('spot-target'), light.target.position, updateLight);
}

function setZ(plane, x, y, z) {
  let segsx = plane.parameters.widthSegments;
  let segsy = plane.parameters.heightSegments;
  let ix = Math.max(0, Math.min(segsx, Math.round(x)));
  let iy = Math.max(0, Math.min(segsy, Math.round(y)));
  let ndx = iy * (segsx + 1) + ix;
  plane.attributes.position.setZ(ndx, z);
}

function setColorByZ(geometry) {
  const v1 = new...