three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.webgpu.js",
      "three/webgpu": "https://unpkg.com/three/build/three.webgpu.js",
      "three/tsl": "https://unpkg.com/three/build/three.tsl.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from "three/webgpu"
import {
  uv,
  Loop,
  texture3D,
  texture,
  time,
  abs,
  pow,
  mix,
  normalLocal,
  modelNormalMatrix,
  mul,
  positionLocal,
  mx_noise_float,
  color,
  cross,
  dot,
  float,
  bufferAttribute,
  transformNormalToView,
  sign,
  step,
  Fn,
  uniform,
  varying,
  vec2,
  vec3,
  uniformArray,
  uniformGroup,
  sin,
  oneMinus,
} from "three/tsl"
import { OrbitControls } from "three/addons/controls/OrbitControls.js"
import {
  updatePlane,
  getHeightArray,
  get_z_splines,
  do_lights,
  handleCurves,
  getRndIntegerArray,
  getRandomInt,
  get_x_splines,
  getTerrainMatrix,
  varyInt,
} from  "@jsfiddle/v95w3xjL.js"
let camera, scene, renderer, controls

const BOARD_SIZE = 8
const normalLookUpShift = uniform(0.01)
const vNormal = varying(vec3())
const colorSand = uniform(color("#e62861"))
const scale = uniform(1.0)

// THESE VALUES ARE USED TO MAKE NICE CURVED SURFACES FROM LOW RES DATA
// shape of incoming data
const curve_length = 8
const dimension = curve_length - 1
const num_curves = curve_length

// curve sampling
const curve_points = 64
const maxH = 16

const redMat = new THREE.MeshStandardNodeMaterial({
  metalness: 0.5,
  roughness: 0.8,
  //color: '#85d534',
  side: THREE.DoubleSide,
  transparent: false,
  opacity: 0.96,
})

const greenMat = new THREE.MeshStandardNodeMaterial({
  metalness: 0.5,
  roughness: 0.8,
  color: "#111134",
  side: THREE.DoubleSide,
  transparent: false,
  opacity: 0.96,
})

// Add a nice smooth standard shaded plane
const yellowMat = new THREE.MeshStandardMaterial({
  metalness: 0.5,
  roughness: 0.8,
  color: "#FCE905",
  side: THREE.DoubleSide,
  transparent: false,
  opacity: 0.96,
})

// Plane
const geometry = new THREE.PlaneGeometry(
  BOARD_SIZE,
  BOARD_SIZE,
  curve_points,
  curve_points,
)
geometry.deleteAttribute("normal")
console.log("geom: ", geometry)
const redPlane = new THREE.Mesh(geometry, redMat)
//Plane 2
const geometry2 = new THREE.PlaneGeometry(
 ...