Implement Timecycle lighting for viewer

package.json

@@ -38,21 +38,21 @@
     "assert": "^2.0.0",
     "buffer": "^6.0.3",
     "canvas": "^2.6.1",
-    "process": "^0.11.10",
-    "node-canvas-webgl": "PrismarineJS/node-canvas-webgl",
-    "minecraft-assets": "^1.9.0",
+    "fs-extra": "^11.0.0",
     "jest": "^27.0.4",
     "jest-puppeteer": "^6.0.0",
+    "minecraft-assets": "^1.9.0",
     "minecraft-wrap": "^1.3.0",
+    "minecrafthawkeye": "^1.2.5",
     "mineflayer": "^4.0.0",
     "mineflayer-pathfinder": "^2.0.0",
+    "node-canvas-webgl": "PrismarineJS/node-canvas-webgl",
     "prismarine-schematic": "^1.2.0",
-    "minecrafthawkeye": "^1.2.5",
     "prismarine-viewer": "file:./",
+    "process": "^0.11.10",
     "puppeteer": "^16.0.0",
     "standard": "^17.0.0",
     "webpack": "^5.10.2",
-    "webpack-cli": "^5.1.1",
-    "fs-extra": "^11.0.0"
+    "webpack-cli": "^5.1.1"
   }
 }

viewer/lib/viewer.js

@@ -85,6 +85,10 @@ class Viewer {
       this.setBlockStateId(new Vec3(pos.x, pos.y, pos.z), stateId)
     })
 
+    emitter.on('timecycleUpdate', ({ timeOfDay, moonPhase }) => {
+      this.updateTimecycleLighting(timeOfDay, moonPhase)
+    })
+
     this.domElement.addEventListener('pointerdown', (evt) => {
       const raycaster = new THREE.Raycaster()
       const mouse = new THREE.Vector2()
@@ -96,6 +100,49 @@ class Viewer {
     })
   }
 
+  updateTimecycleLighting(timeOfDay, moonPhase) {
+    if (timeOfDay === undefined) { return }
+    const lightIntensity = this.calculateIntensity(timeOfDay)
+    const skyColor = scene.background.getHexString()
+    const newSkyColor = `#${this.darkenSkyColour(skyColor, lightIntensity).padStart(6, 0)}`
+
+    function timeToRads(time) {
+      return time * (Math.PI / 12000)
+    }
+
+    // Update colours
+    this.scene.background = new THREE.Color(newSkyColor)
+    this.ambientLight.itensity = ((lightIntensity < 0.25) ? 0.25 : lightIntensity) + (0.07 - (moonPhase / 100))
+    this.directionalLight.intensity = lightIntensity + (0.07 - (moonPhase / 100))
+    this.directionalLight.position.set(
+      Math.cos(timeToRads(timeOfDay)),
+      Math.sin(timeToRads(timeOfDay)),
+      0.2
+    ).normalize()
+  }
+
+  calculateIntensity(timeOfDay) {
+    if ((timeOfDay >= 13000) && (timeOfDay <= 23000)) {
+      return 0
+    } else if ((timeOfDay <= 12000) && (timeOfDay >= 0)) {
+      return 0.75
+    } else if ((timeOfDay < 13000) && (timeOfDay > 12000)) {
+      const transition = timeOfDay - 12000
+      return (0.75 - (0.75 * transition / 1000))
+    } else {
+      const transition = timeOfDay - 23000
+      return (0.75 * transition / 1000)
+    }
+  }
+
+  // Darken by factor (0 to black, 0.5 half as bright, 1 unchanged)
+  darkenSkyColour(skyColour, factor) {
+    skyColour = parseInt(skyColour, 16)
+    return (Math.round((skyColour & 0x0000FF) * factor) |
+      (Math.round(((skyColour >> 8) & 0x00FF) * factor) << 8) |
+      (Math.round((skyColour >> 16) * factor) << 16)).toString(16)
+  }
+
   update () {
     TWEEN.update()
   }

viewer/lib/worldView.js

@@ -10,6 +10,7 @@ class WorldView extends EventEmitter {
     this.loadedChunks = {}
     this.lastPos = new Vec3(0, 0, 0).update(position)
     this.emitter = emitter || this
+    this._timecycleUpdateInterval = null
 
     this.listeners = {}
     this.emitter.on('mouseClick', async (click) => {
@@ -54,13 +55,20 @@ class WorldView extends EventEmitter {
         this.emitter.emit('entity', { id: e.id, name: e.name, pos: e.position, width: e.width, height: e.height, username: e.username })
       }
     }
+
+    this._timecycleUpdateInterval = setInterval(() => {
+      this.emit('timecycleUpdate', { timeOfDay: bot.time.timeOfDay, moonPhase: bot.time.moonPhase })
+    }, 750)
   }
 
   removeListenersFromBot (bot) {
     for (const [evt, listener] of Object.entries(this.listeners[bot.username])) {
       bot.removeListener(evt, listener)
     }
     delete this.listeners[bot.username]
+
+    clearInterval(this._timecycleUpdateInterval)
+    this._timecycleUpdateInterval = null
   }
 
   async init (pos) {