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/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
		}
	}
</script>
<div id="container">

</div>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';

import Stats from 'three/addons/libs/stats.module.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Water } from 'three/addons/objects/Water2.js';
import { Sky } from 'three/addons/objects/Sky.js';

const container = document.getElementById( 'container' );
const scene = new THREE.Scene()
//scene.background = new THREE.Color(0xf0f0f0)

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(6, 6, 12)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
container.appendChild( renderer.domElement );

const sunLight = new THREE.DirectionalLight( 0xFFE499, 3 );
sunLight.castShadow = true;
sunLight.shadow.camera.near = .1;
sunLight.shadow.camera.far = 3;
sunLight.shadow.camera.right = 2;
sunLight.shadow.camera.left = - 2;
sunLight.shadow.camera.top = 2;
sunLight.shadow.camera.bottom = - 2;
sunLight.shadow.mapSize.width = 2048;
sunLight.shadow.mapSize.height = 2048;
sunLight.shadow.bias = - 0.001;
sunLight.position.set( 1, 3, 1 );

const waterAmbientLight = new THREE.HemisphereLight( 0x333366, 0x74ccf4, 5 );
const skyAmbientLight = new THREE.HemisphereLight( 0x74ccf4, 0, 1 );

scene.add( sunLight );
scene.add( skyAmbientLight );
scene.add( waterAmbientLight );

const controls = new OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.495;
controls.target.set( 0, 0, 0 );
controls.minDistance = 4.0;
controls.maxDistance = 200.0;
controls.update();

//

const stats = new Stats();
container.appendChild( stats.dom );

let sky, water, mesh;

init();
animate();

function init() {
  // Add Sky
  sky = new Sky();
  sky.scale.setScalar( 45000000 );
  scene.add( sky );
   scene.background = new THREE.Color(0xf0f0f0)

  // ground
 
  const groundGeometry = new THREE.PlaneGeometry( 20, 20 );
  const groundMaterial = new THREE.MeshStandardMaterial( { roughness: 0.8, metalness:...