orbit controls

app.js

@@ -1,10 +1,13 @@
-P = (x, y, z) => new THREE.Vector3(x, y, z)
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+let P = (x, y, z) => new THREE.Vector3(x, y, z)
 
 Array.prototype.pick = function() { return this.splice(Math.floor(Math.random()*this.length), 1)[0] }
 
 HTMLElement.prototype.addNewChild = function(tag, properties) {
     let child = document.createElement(tag)
-    for (key in properties) {
+    for (let key in properties) {
         child[key] = properties[key]
     }
     this.appendChild(child)
@@ -227,7 +230,6 @@ class Tetromino extends THREE.Group {
         this.rotatedLast = false
         this.rotationPoint4Used = false
         this.holdEnabled = true
-        let material = this.material
         for (let i=0; i<4; i++) {
             this.add(new Mino())
         }
@@ -315,9 +317,9 @@ Tetromino.prototype.srs = [
     { [ROTATION.CW]: [P(0, 0, 0), P( 1, 0, 0), P( 1,  1, 0), P(0, -2, 0), P( 1, -2, 0)], [ROTATION.CCW]: [P(0, 0, 0), P(-1, 0, 0), P(-1,  1, 0), P(0, -2, 0), P(-1, -2, 0)] },
     { [ROTATION.CW]: [P(0, 0, 0), P(-1, 0, 0), P(-1, -1, 0), P(0,  2, 0), P(-1,  2, 0)], [ROTATION.CCW]: [P(0, 0, 0), P(-1, 0, 0), P(-1, -1, 0), P(0,  2, 0), P(-1,  2, 0)] },
 ]
-minoRenderTarget = new THREE.WebGLCubeRenderTarget(256)
+const minoRenderTarget = new THREE.WebGLCubeRenderTarget(256)
 minoRenderTarget.texture.type = THREE.HalfFloatType
-minoCamera = new THREE.CubeCamera(1, 1000, minoRenderTarget)
+const minoCamera = new THREE.CubeCamera(1, 1000, minoRenderTarget)
 minoCamera.position.set(5, 10, 0)
 Tetromino.prototype.lockedMaterial = new THREE.MeshBasicMaterial({
     color: 0xffffff,
@@ -785,8 +787,17 @@ renderer.setSize(window.innerWidth, window.innerHeight)
 document.body.appendChild(renderer.domElement)
 
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 400)
-camera.position.set(5, 7, 16)
+camera.position.set(5, 1, 16)
-camera.lookAt(5, 9, 0) 
+
+const controls = new OrbitControls( camera, renderer.domElement );
+controls.autoRotate;
+controls.enableDamping;
+controls.maxDistance = 21;
+controls.keys = {};
+controls.minPolarAngle = 0.9;
+controls.maxPolarAngle = 2.14;
+controls.target = P(5, 9, 0);
+controls.update();
 
 const commonCylinderGeometry = new THREE.CylinderGeometry(25, 25, 400, 20, 1, true)
 
@@ -850,11 +861,9 @@ const edgeExtrudeSettings = {
 	bevelEnabled: false,
 }
 const edge = new THREE.Mesh(
-    //new THREE.PlaneGeometry(10, SKYLINE),
     new THREE.ExtrudeGeometry(edgeShape, edgeExtrudeSettings),
     edgeMaterial
 )
-//edge.position.set(5, 10, 0)
 scene.add(edge)
 
 const holdQueue = new THREE.Group()
@@ -889,6 +898,8 @@ function animate() {
     colorFullCylinderTexture.offset.y -= COLORFULL_MOVE_FORWARD
     colorFullCylinderTexture.offset.x -= COLORFULL_TEXTURE_ROTATION
 
+    controls.update();
+
     renderer.render(scene, camera)
     minoCamera.update(renderer, scene)
 
@@ -1033,7 +1044,7 @@ let playerActions = {
             scheduler.clearInterval(fall)
             scheduler.clearTimeout(lockDown)
     
-            heldpiece = holdQueue.piece
+            let heldpiece = holdQueue.piece
             holdQueue.piece = piece
             holdQueue.piece.holdEnabled = false
             holdQueue.piece.locked = false
@@ -1053,15 +1064,15 @@ const REPEATABLE_ACTIONS = [
     playerActions.moveRight,
     playerActions.softDrop
 ]
-pressedKeys = new Set()
+let pressedKeys = new Set()
-actionsQueue = []
+let actionsQueue = []
 
 function onkeydown(event) {
     if (event.key in settings.keyBind) {
         event.preventDefault()
         if (!pressedKeys.has(event.key)) {
             pressedKeys.add(event.key)
-            action = settings.keyBind[event.key]
+            let action = settings.keyBind[event.key]
             action()
             if (REPEATABLE_ACTIONS.includes(action)) {
                 actionsQueue.unshift(action)
@@ -1093,7 +1104,7 @@ function onkeyup(event) {
     if (event.key in settings.keyBind) {
         event.preventDefault()
         pressedKeys.delete(event.key)
-        action = settings.keyBind[event.key]
+        let action = settings.keyBind[event.key]
         if (actionsQueue.includes(action)) {
             actionsQueue.splice(actionsQueue.indexOf(action), 1)
             if (!actionsQueue.length) {

index.html

@@ -9,7 +9,15 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
         <link rel="stylesheet" href="style.css">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>
+        <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
+        <script type="importmap">
+          {
+            "imports": {
+              "three": "https://unpkg.com/three@0.152.2/build/three.module.js",
+              "three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
+            }
+          }
+        </script>
     </head>
 
     <body data-bs-theme="dark">
@@ -143,8 +151,7 @@
           </div>
         </div>
       </div>
-
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
-      <script src="app.js"></script>
+      <script type="module" src="app.js"></script>
     </body>
 </html>