Three JSFiddle Skeleton

by notchris

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://cdn.skypack.dev/three@0.144.0/build/three.module",
      "three/": "https://cdn.skypack.dev/three@0.144.0/"
		}
	}
</script>

CSS

* {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  font-kerning: auto;
  outline: none;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}

JavaScript

import * as THREE from 'three'
import {
  OrbitControls
} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";

const renderer = new THREE.WebGLRenderer({
antialias: true
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10)
camera.position.z = 2


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

let light = new THREE.DirectionalLight(0xffffff, 0.5)
  let shadowCamHalfSize = 100
  let multiplier = 0.4
  let lightTarget = new THREE.Object3D()

  light.position.set(0, 10, 0)
  lightTarget.position.setScalar(-1)
  light.add(lightTarget)
  light.target = lightTarget

  light.shadow.camera.top = shadowCamHalfSize * multiplier
  light.shadow.camera.bottom = -shadowCamHalfSize * multiplier
  light.shadow.camera.left = -shadowCamHalfSize * multiplier
  light.shadow.camera.right = shadowCamHalfSize * multiplier
  light.shadow.camera.near = -shadowCamHalfSize * 0.5
  light.shadow.camera.far = shadowCamHalfSize * 1.5
  light.shadow.mapSize.width = light.shadow.mapSize.height = 1024
  light.castShadow = true
  scene.add(light, new THREE.AmbientLight(0xffffff, 0.5))


const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1,32, 32),
  new THREE.MeshStandardMaterial({
    color: 0xffffff
  }))
scene.add(sphere)


window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
  render()
}, false)


function animate() {
  requestAnimationFrame(animate)
  render()
}

function render() {
  renderer.render(scene, camera)
}

animate()