three.js / public

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<div id="world"></div>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  margin: 0;
}
#world {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(#e4e0ba, #f7d9aa);
}

TypeScript

// https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/

let HEIGHT: number;
let WIDTH: number;
let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
let renderer: THREE.WebGLRenderer;
let airplane;
let sea;
let controls;
const colors = {
	red: 0xf25346,
	white: 0xd8d0d1,
	brown: 0x59332e,
	pink: 0xF5986E,
	brownDark: 0x23190f,
	blue: 0x68c3c0,
};

// 1
createScene();
// 2
createLights();
// 3
createObjects();
// 4
loop();

function createScene() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

  // scene
  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);
  
  // camera
  const aspectRatio = WIDTH / HEIGHT;
  const fieldOfView = 60;
  const nearPlane = 1;
  const farPlane = 10000;
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
  );
  camera.position.x = 0;
  camera.position.z = 200;
  camera.position.y = 100;
  controls = new THREE.OrbitControls(camera);
controls.autoRotate=true;
  

  // renderer
  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setSize(WIDTH, HEIGHT);
  renderer.shadowMap.enabled = true;

  const container = document.getElementById('world');
  container.appendChild(renderer.domElement);
}

function createLights() {
  const hemisphereLight: any = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9)

  const shadowLight: any = new THREE.DirectionalLight(0xffffff, .9);
  shadowLight.position.set(150, 350, 350);
  shadowLight.castShadow = true;
  shadowLight.shadow.camera.left = -400;
  shadowLight.shadow.camera.right = 400;
  shadowLight.shadow.camera.top = 400;
  shadowLight.shadow.camera.bottom = -400;
  shadowLight.shadow.camera.near = 1;
  shadowLight.shadow.camera.far = 1000;
  shadowLight.shadow.mapSize.width = 2048;
  shadowLight.shadow.mapSize.height = 2048;

  scene.add(hemisphereLight);
  scene.add(shadowLight);
  
  const ambientLight = new...