feat: add realistic water from three.js

package.json

@@ -154,6 +154,7 @@
     "rimraf": "^5.0.1",
     "storybook": "^7.4.6",
     "stream-browserify": "^3.0.0",
+    "three-latest": "npm:three@latest",
     "three": "0.154.0",
     "timers-browserify": "^2.0.12",
     "typescript": "5.5.4",

prismarine-viewer/viewer/lib/worldrendererThree.ts

@@ -5,6 +5,7 @@ import PrismarineChatLoader from 'prismarine-chat'
 import * as tweenJs from '@tweenjs/tween.js'
 import { BloomPass, RenderPass, UnrealBloomPass, EffectComposer, WaterPass, GlitchPass } from 'three-stdlib'
 import worldBlockProvider from 'mc-assets/dist/worldBlockProvider'
+import { Water } from 'three-latest/examples/jsm/objects/Water2.js'
 import { renderSign } from '../sign-renderer'
 import { chunkPos, sectionPos } from './simpleUtils'
 import { WorldRendererCommon, WorldRendererConfig } from './worldrendererCommon'
@@ -109,6 +110,34 @@ export class WorldRendererThree extends WorldRendererCommon {
     }
   }
 
+  addWater () {
+    // offset 0, -2, 0
+    const chunkPos = new THREE.Vector3(...this.camera.position.clone().toArray().map(x => Math.floor(x / 16) * 16) as [number, number, number])
+    const x = 0
+    const z = 0
+    const y = this.camera.position.y - chunkPos[1]
+
+    // const posChunkMiddle = chunkPos.map((x, i) => i === 0 ? 0 : 0) as [number, number, number]
+    const posChunkMiddle = chunkPos.toArray()
+    const waterGeometry = new THREE.PlaneGeometry(20, 20)
+    const textureLoader = new THREE.TextureLoader()
+    const water = new Water(waterGeometry, {
+      scale: 1,
+      flowDirection: new THREE.Vector2(1, 1),
+      textureWidth: 1024,
+      textureHeight: 1024,
+      normalMap0: textureLoader.load('https://threejs.org/examples/textures/water/Water_1_M_Normal.jpg'),
+      normalMap1: textureLoader.load('https://threejs.org/examples/textures/water/Water_2_M_Normal.jpg'),
+    })
+    const scale = 20 / 16 / 16
+    water.scale.set(scale, scale, 1)
+    //@ts-expect-error
+    water.material.uniforms['color'].value.set(new THREE.Color(117 / 255, 202 / 255, 255 / 255).getHex())
+    water.rotation.x = Math.PI * - 0.5
+    water.position.set(...posChunkMiddle)
+    this.scene.add(water)
+  }
+
   // debugRecomputedDeletedObjects = 0
   handleWorkerMessage (data: { geometry: MesherGeometryOutput, key, type }): void {
     if (data.type !== 'geometry') return