THREE.js Boilerplate by HarryStevens

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="scene"></div>
  <div id="stats"></div>
  <script src="https://unpkg.com/three@0.105.2/build/three.js"></script>
  <script src="https://unpkg.com/three@0.105.2/examples/js/libs/stats.min.js"></script>
  <script src="https://unpkg.com/three@0.105.2/examples/js/libs/dat.gui.min.js"></script>
  <script>
    const controls = {}
    const gui = (_ => {
      const gui = new dat.GUI();
      return gui;
    })();

    const stats = (_ => {
      const stats = new Stats();
      stats.domElement.style.position = "absolute";
      stats.domElement.style.left = "0px";
      stats.domElement.style.top = "0px";
      document.getElementById("stats").appendChild(stats.domElement);
      return stats;
    })();

    const scene = new THREE.Scene();

    const camera = (_ => {
      const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 1000);
      camera.position.set(20, 20, 20);
      camera.lookAt(scene.position);
      return camera;
    })();

    const renderer = (_ => {
      const renderer = new THREE.WebGLRenderer();
      renderer.setClearColor("#fff");
      renderer.setPixelRatio(devicePixelRatio);
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      renderer.gammaOutput = true;
      renderer.gammaFactor = 2.2;
      document.getElementById("scene").appendChild(renderer.domElement);
      return renderer;
    })();
    
    function animate(){
      requestAnimationFrame(animate);
      stats.update();
      renderer.render(scene, camera);
    }
    animate();

    function size(){
      camera.aspect = innerWidth / innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(innerWidth, innerHeight);
    }
    size();
    onresize = size;
  </script>
</body>
</html>