export controls

app.js

@@ -1,10 +1,10 @@
 import * as THREE from 'three'
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 import { T_SPIN } from './jsm/common.js'
-import { Settings } from './jsm/settings.js'
-import { Stats } from './jsm/stats.js'
+import { Settings } from './jsm/Settings.js'
+import { Stats } from './jsm/Stats.js'
 import { Scheduler } from './jsm/utils.js'
-import { TetraGUI } from './jsm/gui.js'
+import { TetraGUI } from './jsm/TetraGUI.js'
+import { TetraControls } from './jsm/TetraControls.js'
 
 let P = (x, y, z = 0) => new THREE.Vector3(x, y, z)
 
@@ -442,21 +442,7 @@ document.body.appendChild(renderer.domElement)
 world.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
 world.camera.position.set(5, 0, 16)
 
-const controls = new OrbitControls(world.camera, renderer.domElement)
-controls.autoRotate
-controls.enableDamping   = true
-controls.dampingFactor   = 0.04
-controls.maxDistance     = 21
-controls.keys            = {}
-controls.minPolarAngle   = 0.9
-controls.maxPolarAngle   = 2.14
-controls.minAzimuthAngle = 0.9 - Math.PI / 2
-controls.maxAzimuthAngle = 2.14 - Math.PI / 2
-controls.target.set(5, 9, 0)
-controls.update()
-
-controls.addEventListener("start", () => renderer.domElement.style.cursor = "grabbing")
-controls.addEventListener("end", () => renderer.domElement.style.cursor = "grab")
+const controls = new TetraControls(world.camera, renderer.domElement)
 
 
 const GLOBAL_ROTATION = 0.028

index.html

@@ -6,8 +6,8 @@
       <meta charset="utf-8" />
       <title>teTra</title>
       <link rel="icon" href="favicon.ico">
-      <link rel="stylesheet" href="style.css">
       <link rel="stylesheet" href="loading.css">
+      <link rel="stylesheet" href="style.css">
       <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
       <script type="importmap">
         {
@@ -25,7 +25,8 @@
           <div class="m-loader">
             <span class="e-text">
               <div>Chargement</div>
-              <div id="loadingPercent">0%</div></span>
+              <div id="loadingPercent">0%</div>
+            </span>
           </div>
         </div>
       </div>

jsm/Stats.js

@@ -74,7 +74,7 @@ class Stats {
   }
 
   get time() {
-      return this.clock.timeFormat.format(this.clock.elapsedTime * 1000)
+      return this.clock.timeFormat.format(this.clock.getElapsedTime() * 1000)
   }
 
   lockDown(nbClearedLines, tSpin) {

jsm/TetraControls.js

@@ -0,0 +1,24 @@
+
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+
+
+class TetraControls extends OrbitControls {
+  constructor(camera, domElement) {
+      super(camera, domElement)
+      this.autoRotate
+      this.enableDamping   = true
+      this.dampingFactor   = 0.04
+      this.maxDistance     = 21
+      this.keys            = {}
+      this.minPolarAngle   = 0.9
+      this.maxPolarAngle   = 2.14
+      this.minAzimuthAngle = 0.9 - Math.PI / 2
+      this.maxAzimuthAngle = 2.14 - Math.PI / 2
+      this.target.set(5, 9, 0)
+      
+      this.addEventListener("start", () => domElement.style.cursor = "grabbing")
+      this.addEventListener("end", () => domElement.style.cursor = "grab")
+  }
+}
+
+export { TetraControls }