Ball Control

Use the arrow keys to move the ball.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      overflow: none;
    }
  </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.104.0/examples/js/libs/stats.min.js"></script>
  <script src="https://unpkg.com/three@0.104.0/examples/js/utils/sceneutils.js"></script>
  <script>
    let right = 0,
        left = 0,
        up = 0,
        down = 0;

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(40, 40, 40);
      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;
    })();

const floor = (_ => {
      const geo = new THREE.PlaneBufferGeometry(20, 20);
      const mat = new THREE.MeshLambertMaterial({ color: "green" });
      const mesh = new THREE.Mesh(geo, mat);
      mesh.rotation.x = Math.PI * -0.5;
      mesh.receiveShadow = true;
      scene.add(mesh);
      return mesh;
    })();

const floorTwo = (_ => {
      const geo = new THREE.PlaneBufferGeometry(10, 40);
      const mat = new THREE.MeshLambertMaterial({ color: "green" });
      const mesh = new THREE.Mesh(geo, mat);
      mesh.rotation.x = Math.PI * -0.5;
      mesh.position.set(15, 0, -10);
      mesh.receiveShadow = true;
      scene.add(mesh);
      return mesh;      
    })();

const rightWall = (_ => {
      const geo = new THREE.PlaneBufferGeometry(20, 4);
      const mat = new THREE.MeshLambertMaterial({ color: "orange" });
      const mesh = new THREE.Mesh(geo, mat);
      mesh.position.set(0, 2, -10)
      mesh.receiveShadow = true;
      mesh.castShadow = true;
      scene.add(mesh);
      return mesh;
    })();

const leftWall = (_ => {
      const geo = new THREE.PlaneBufferGeometry(20, 4);
      const mat = new THREE.MeshLambertMaterial({ color: "purple" });
      const mesh = new THREE.Mesh(geo, mat);
      mesh.rotation.y = Math.PI * 0.5
      mesh.position.set(-10, 2, 0)
      mesh.receiveShadow = true;
      mesh.castShadow = true;
      scene.add(mesh);
      return mesh;
    })();

const leftWall2 = (_ => {
      const geo = new THREE.PlaneBufferGeometry(20, 4);
      const mat = new THREE.MeshLambertMaterial({ color: "purple" });
      const mesh = new THREE.Mesh(geo, mat);
      mesh.rotation.y = Math.PI * 0.5
      mesh.position.set(10, 2, -20)
      mesh.receiveShadow = true;
      mesh.castShadow = true;
      scene.add(mesh);
      return mesh;
    })();

const ambient = (_ => {
      const light = new THREE.AmbientLight("#ccc", 0.8);
      scene.add(light);
      return light;  
    })();

const spot = (_ => {
      const light = new THREE.SpotLight("#fff", 0.8);
      light.position.set(-20, 20, 20);
      light.castShadow = true;
      light.shadow.mapSize.width = 1024;
      light.shadow.mapSize.height = 1024;
      light.angle = Math.PI / 5;
      scene.add(light);
      return light;
    })();

function animate(){
      requestAnimationFrame(animate);

if (right){
        if (sphere.position.x < 19.5) sphere.position.x += 0.2;
        sphere.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), -0.05);
      }
      if (left){
        if (sphere.position.z < -8){
          if (sphere.position.x > 13.5) sphere.position.x -= 0.2  
        }
        else {
          if (sphere.position.x > -8) sphere.position.x -= 0.2  
        }
        sphere.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), 0.05);
      }
      if (up){
        if (sphere.position.x < 12.5){
          if (sphere.position.z > -7.5) sphere.position.z -= 0.2;  
        }
        else {
          if (sphere.position.z > -28) sphere.position.z -= 0.2;
        }
        sphere.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), -0.05);
      }
      if (down){
        if (sphere.position.z < 9) sphere.position.z += 0.2;
        sphere.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), 0.05);
      }

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>

Updated missing url https://unpkg.com/three@0.104.0/examples/js/utils/SceneUtils.js to https://unpkg.com/three@0.104.0/examples/js/utils/sceneutils.js

https://unpkg.com/three@0.105.2/build/three.js

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

https://unpkg.com/three@0.104.0/examples/js/utils/SceneUtils.js