Generate a 3D scene with water and atmosphere

HTML

<script async src="https://unpkg.com/es-module-shims@1.3.6/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>

CSS

body {
	  margin: 0;
}

JavaScript

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

var scene, camera, renderer, water, controls;
init();

function init() {
  //set up a renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true,
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  //webGl background color: hex value color (# goes to 0x)
  renderer.setClearColor(0xd4e4ef, 1);

  //find the element to add the renderer to (which is the section tag)
  document.body.appendChild(renderer.domElement);

  //let's create a scene
  scene = new THREE.Scene();

  //let's create a camera
  camera = new THREE.PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    0.1,
    1000,
  );
  camera.position.set(0, 20, 20);
  camera.lookAt(scene.position);

  controls = new OrbitControls(camera, renderer.domElement);
  

  // ground
  var groundGeometry = new THREE.PlaneGeometry(20, 20, 10, 10);
  var groundMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
  var ground = new THREE.Mesh(groundGeometry, groundMaterial);
  ground.rotation.x = Math.PI * -0.5;
  scene.add(ground);
  var textureLoader = new THREE.TextureLoader();
  textureLoader.load(
    'https://threejs.org/examples/textures/floors/FloorsCheckerboard_S_Diffuse.jpg',
    function (map) {
      map.wrapS = THREE.RepeatWrapping;
      map.wrapT = THREE.RepeatWrapping;
      map.anisotropy = 16;
      map.repeat.set(4, 4);
      groundMaterial.map = map;
      groundMaterial.needsUpdate = true;
    },
  );

	const wallMesh=ground.clone()
  wallMesh.rotation.x=0
	scene.add(wallMesh)

  // water
  var waterGeometry = new THREE.PlaneGeometry(20, 20);
  var flowMap = textureLoader.load(
    'https://threejs.org/examples/textures/water/Water_1_M_Flow.jpg',
  );
  water = new...