Sphere

A basic THREE.js scene with shadows, lights, camera rotation, and frame rate stats.

<!DOCTYPE html>
  <html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/69/three.js"></script>  
    <script src="https://unpkg.com/three@0.104.0/examples/js/libs/stats.min.js"></script>
    <script src="https://unpkg.com/geometric@1.1.1/build/geometric.min.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
  <div id="stats"></div>
  <div id="scene"></div>
  <script>
    const stats = (_ => {
      const stats = new Stats();
      stats.setMode(0);
      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(-40, 20, -20);
      camera.lookAt(scene.position);
      return camera;
    })();

const renderer = (_ => {
      const renderer = new THREE.WebGLRenderer();
      renderer.setClearColor("#eee");
      renderer.setSize(innerWidth, innerHeight);
      renderer.shadowMapEnabled = true;
      document.getElementById("scene").appendChild(renderer.domElement);
      return renderer;
    })();

const plane = (_ => {
      const geo = new THREE.PlaneBufferGeometry(30, 30);
      const mat = new THREE.MeshLambertMaterial({ color: "#fff" });
      const plane = new THREE.Mesh(geo, mat);
      plane.rotation.x = -.5 * Math.PI;
      plane.receiveShadow = true;
      scene.add(plane);
      return plane;
    })();

const sphere = (_ => {
      const geo = new THREE.SphereGeometry(4, 32, 32);
      const mat = new THREE.MeshPhongMaterial({ color: "steelblue"});
      const sphere = new THREE.Mesh(geo, mat);
      sphere.position.y = 4;
      sphere.castShadow = true;
      scene.add(sphere);
      return sphere;
    })();

const spotlight = (_ => {
      const spotlight = new THREE.SpotLight("#fff");
      spotlight.position.set(-50, 50, -50);
      spotlight.castShadow = true;
      scene.add(spotlight);
      return spotlight;
    })();

function render() {
      requestAnimationFrame(render);
      stats.update();
      [camera.position.x, camera.position.z] = geometric.pointRotate([camera.position.x, camera.position.z], 0.5);
      camera.lookAt(scene.position);
      renderer.render(scene, camera);
    }
    render();

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

https://cdnjs.cloudflare.com/ajax/libs/three.js/69/three.js

https://unpkg.com/three@0.104.0/examples/js/libs/stats.min.js

https://unpkg.com/geometric@1.1.1/build/geometric.min.js