three.js dev template - module

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<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@0.152/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.152/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

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

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)

const renderer = new THREE.WebGLRenderer()
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)


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

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({
  color: 0x00ff00
})
const cube = new THREE.Mesh(geometry, material)
cube.castShadow = true
scene.add(cube)

const light = new THREE.DirectionalLight(0xffffff, 1)
light.castShadow = true
scene.add(light)
light.position.z = 2
light.position.y = 3
camera.position.z = 5

// scene.add( new THREE.CameraHelper(light.shadow.camera))

const gg = new THREE.BoxGeometry(5, 0.5, 10)
const gm = new THREE.MeshStandardMaterial({
  color: 0x0000ff
})
const ground = new THREE.Mesh(gg, gm)
ground.receiveShadow = true
ground.position.y = -3
scene.add(ground)
renderer.shadowMap.enabled = true

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
}

animate();