three.js dev template - module

HTML

<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

import * as THREE from 'three';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Sky } from 'three/addons/objects/Sky.js';

let camera, scene, renderer;

let sky, sun;

init();

function initSky() {

    // Add Sky
    sky = new Sky();
    sky.scale.setScalar( 450000 );
    scene.add( sky );

    sun = new THREE.Vector3();

    /// GUI

    const effectController = {
        turbidity: 2,
        rayleigh: 0.75,
        mieCoefficient: 0.005,
        mieDirectionalG: 0.7,
        elevation: 90,
        azimuth: 180,
        exposure: renderer.toneMappingExposure,
        cloudCoverage: 0.4,
        cloudDensity: 0.4,
        cloudElevation: 0.5
    };

    function guiChanged() {

        const uniforms = sky.material.uniforms;
        uniforms[ 'turbidity' ].value = effectController.turbidity;
        uniforms[ 'rayleigh' ].value = effectController.rayleigh;
        uniforms[ 'mieCoefficient' ].value = effectController.mieCoefficient;
        uniforms[ 'mieDirectionalG' ].value = effectController.mieDirectionalG;
        uniforms[ 'cloudCoverage' ].value = effectController.cloudCoverage;
        uniforms[ 'cloudDensity' ].value = effectController.cloudDensity;
        uniforms[ 'cloudElevation' ].value = effectController.cloudElevation;

        const phi = THREE.MathUtils.degToRad( 90 - effectController.elevation );
        const theta = THREE.MathUtils.degToRad( effectController.azimuth );

        sun.setFromSphericalCoords( 1, phi, theta );

        uniforms[ 'sunPosition' ].value.copy( sun );

        renderer.toneMappingExposure = effectController.exposure;

    }

    const gui = new GUI();

    gui.add( effectController, 'turbidity', 0.0, 20.0, 0.1 ).onChange( guiChanged );
    gui.add( effectController, 'rayleigh', 0.0, 4, 0.001 ).onChange( guiChanged );
    gui.add( effectController,...