minecraft-renderer 0.1.0

package/src/three/threeJsMethods.ts

@@ -0,0 +1,15 @@
+import type { GraphicsBackend } from '../../../src/appViewer'
+import type { ThreeJsBackendMethods } from './graphicsBackend'
+
+export function getThreeJsRendererMethods (): ThreeJsBackendMethods | undefined {
+  const renderer = appViewer.backend
+  if (renderer?.id !== 'threejs' || !renderer.backendMethods) return
+  return new Proxy(renderer.backendMethods, {
+    get (target, prop) {
+      return async (...args) => {
+        const result = await (target[prop as any] as any)(...args)
+        return result
+      }
+    }
+  }) as ThreeJsBackendMethods
+}

package/src/three/threeJsParticles.ts

@@ -0,0 +1,160 @@
+import * as THREE from 'three'
+
+interface ParticleMesh extends THREE.Mesh {
+  velocity: THREE.Vector3;
+}
+
+interface ParticleConfig {
+  fountainHeight: number;
+  resetHeight: number;
+  xVelocityRange: number;
+  zVelocityRange: number;
+  particleCount: number;
+  particleRadiusRange: { min: number; max: number };
+  yVelocityRange: { min: number; max: number };
+}
+
+export interface FountainOptions {
+  position?: { x: number, y: number, z: number }
+  particleConfig?: Partial<ParticleConfig>;
+}
+
+export class Fountain {
+  private readonly particles: ParticleMesh[] = []
+  private readonly config: { particleConfig: ParticleConfig }
+  private readonly position: THREE.Vector3
+  container: THREE.Object3D | undefined
+
+  constructor (public sectionId: string, options: FountainOptions = {}) {
+    this.position = options.position ? new THREE.Vector3(options.position.x, options.position.y, options.position.z) : new THREE.Vector3(0, 0, 0)
+    this.config = this.createConfig(options.particleConfig)
+  }
+
+  private createConfig (
+    particleConfigOverride?: Partial<ParticleConfig>
+  ): { particleConfig: ParticleConfig } {
+    const particleConfig: ParticleConfig = {
+      fountainHeight: 10,
+      resetHeight: 0,
+      xVelocityRange: 0.4,
+      zVelocityRange: 0.4,
+      particleCount: 400,
+      particleRadiusRange: { min: 0.1, max: 0.6 },
+      yVelocityRange: { min: 0.1, max: 2 },
+      ...particleConfigOverride
+    }
+
+    return { particleConfig }
+  }
+
+
+  createParticles (container: THREE.Object3D): void {
+    this.container = container
+    const colorStart = new THREE.Color(0xff_ff_00)
+    const colorEnd = new THREE.Color(0xff_a5_00)
+
+    for (let i = 0; i < this.config.particleConfig.particleCount; i++) {
+      const radius = Math.random() *
+        (this.config.particleConfig.particleRadiusRange.max - this.config.particleConfig.particleRadiusRange.min) +
+        this.config.particleConfig.particleRadiusRange.min
+      const geometry = new THREE.SphereGeometry(radius)
+      const material = new THREE.MeshBasicMaterial({
+        color: colorStart.clone().lerp(colorEnd, Math.random())
+      })
+      const mesh = new THREE.Mesh(geometry, material)
+      const particle = mesh as unknown as ParticleMesh
+
+      particle.position.set(
+        this.position.x + (Math.random() - 0.5) * this.config.particleConfig.xVelocityRange * 2,
+        this.position.y + this.config.particleConfig.fountainHeight,
+        this.position.z + (Math.random() - 0.5) * this.config.particleConfig.zVelocityRange * 2
+      )
+
+      particle.velocity = new THREE.Vector3(
+        (Math.random() - 0.5) * this.config.particleConfig.xVelocityRange,
+        -Math.random() * this.config.particleConfig.yVelocityRange.max,
+        (Math.random() - 0.5) * this.config.particleConfig.zVelocityRange
+      )
+
+      this.particles.push(particle)
+      this.container.add(particle)
+
+      // this.container.onBeforeRender = () => {
+      //   this.render()
+      // }
+    }
+  }
+
+  render (): void {
+    for (const particle of this.particles) {
+      particle.velocity.y -= 0.01 + Math.random() * 0.1
+      particle.position.add(particle.velocity)
+
+      if (particle.position.y < this.position.y + this.config.particleConfig.resetHeight) {
+        particle.position.set(
+          this.position.x + (Math.random() - 0.5) * this.config.particleConfig.xVelocityRange * 2,
+          this.position.y + this.config.particleConfig.fountainHeight,
+          this.position.z + (Math.random() - 0.5) * this.config.particleConfig.zVelocityRange * 2
+        )
+        particle.velocity.set(
+          (Math.random() - 0.5) * this.config.particleConfig.xVelocityRange,
+          -Math.random() * this.config.particleConfig.yVelocityRange.max,
+          (Math.random() - 0.5) * this.config.particleConfig.zVelocityRange
+        )
+      }
+    }
+  }
+
+  private updateParticleCount (newCount: number): void {
+    if (newCount !== this.config.particleConfig.particleCount) {
+      this.config.particleConfig.particleCount = newCount
+      const currentCount = this.particles.length
+
+      if (newCount > currentCount) {
+        this.addParticles(newCount - currentCount)
+      } else if (newCount < currentCount) {
+        this.removeParticles(currentCount - newCount)
+      }
+    }
+  }
+
+  private addParticles (count: number): void {
+    const geometry = new THREE.SphereGeometry(0.1)
+    const material = new THREE.MeshBasicMaterial({ color: 0x00_ff_00 })
+
+    for (let i = 0; i < count; i++) {
+      const mesh = new THREE.Mesh(geometry, material)
+      const particle = mesh as unknown as ParticleMesh
+      particle.position.copy(this.position)
+      particle.velocity = new THREE.Vector3(
+        Math.random() * this.config.particleConfig.xVelocityRange -
+        this.config.particleConfig.xVelocityRange / 2,
+        Math.random() * 2,
+        Math.random() * this.config.particleConfig.zVelocityRange -
+        this.config.particleConfig.zVelocityRange / 2
+      )
+      this.particles.push(particle)
+      this.container!.add(particle)
+    }
+  }
+
+  private removeParticles (count: number): void {
+    for (let i = 0; i < count; i++) {
+      const particle = this.particles.pop()
+      if (particle) {
+        this.container!.remove(particle)
+      }
+    }
+  }
+
+  public dispose (): void {
+    for (const particle of this.particles) {
+      particle.geometry.dispose()
+      if (Array.isArray(particle.material)) {
+        for (const material of particle.material) material.dispose()
+      } else {
+        particle.material.dispose()
+      }
+    }
+  }
+}

package/src/three/threeJsSound.ts

@@ -0,0 +1,95 @@
+import * as THREE from 'three'
+import { WorldRendererThree } from './worldRendererThree'
+import { SoundSystem } from '@/graphicsBackend/types'
+
+export class ThreeJsSound implements SoundSystem {
+  audioListener: THREE.AudioListener | undefined
+  private readonly activeSounds = new Set<THREE.PositionalAudio>()
+  private readonly audioContext: AudioContext | undefined
+  private readonly soundVolumes = new Map<THREE.PositionalAudio, number>()
+  baseVolume = 1
+
+  constructor(public worldRenderer: WorldRendererThree) {
+    worldRenderer.onWorldSwitched.push(() => {
+      this.stopAll()
+    })
+
+    worldRenderer.onReactiveConfigUpdated('volume', (volume) => {
+      this.changeVolume(volume)
+    })
+  }
+
+  initAudioListener() {
+    if (this.audioListener) return
+    this.audioListener = new THREE.AudioListener()
+    this.worldRenderer.camera.add(this.audioListener)
+  }
+
+  playSound(position: { x: number, y: number, z: number }, path: string, volume = 1, pitch = 1, timeout = 500) {
+    this.initAudioListener()
+
+    const sound = new THREE.PositionalAudio(this.audioListener!)
+    this.activeSounds.add(sound)
+    this.soundVolumes.set(sound, volume)
+
+    const audioLoader = new THREE.AudioLoader()
+    const start = Date.now()
+    void audioLoader.loadAsync(path).then((buffer) => {
+      if (Date.now() - start > timeout) {
+        console.warn('Ignored playing sound', path, 'due to timeout:', timeout, 'ms <', Date.now() - start, 'ms')
+        return
+      }
+      // play
+      sound.setBuffer(buffer)
+      sound.setRefDistance(20)
+      sound.setVolume(volume * this.baseVolume)
+      sound.setPlaybackRate(pitch) // set the pitch
+      this.worldRenderer.scene.add(sound)
+      // set sound position
+      sound.position.set(position.x, position.y, position.z)
+      sound.onEnded = () => {
+        this.worldRenderer.scene.remove(sound)
+        if (sound.source) {
+          sound.disconnect()
+        }
+        this.activeSounds.delete(sound)
+        this.soundVolumes.delete(sound)
+        audioLoader.manager.itemEnd(path)
+      }
+      sound.play()
+    })
+  }
+
+  stopAll() {
+    for (const sound of this.activeSounds) {
+      if (!sound) continue
+      sound.stop()
+      if (sound.source) {
+        sound.disconnect()
+      }
+      this.worldRenderer.scene.remove(sound)
+    }
+    this.activeSounds.clear()
+    this.soundVolumes.clear()
+  }
+
+  changeVolume(volume: number) {
+    this.baseVolume = volume
+    for (const [sound, individualVolume] of this.soundVolumes) {
+      sound.setVolume(individualVolume * this.baseVolume)
+    }
+  }
+
+  destroy() {
+    this.stopAll()
+    // Remove and cleanup audio listener
+    if (this.audioListener) {
+      this.audioListener.removeFromParent()
+      this.audioListener = undefined
+    }
+  }
+
+  playTestSound() {
+    this.playSound(this.worldRenderer.camera.position, '/sound.mp3')
+  }
+}

package/src/three/threeJsUtils.ts

@@ -0,0 +1,90 @@
+import * as THREE from 'three'
+import { getLoadedImage } from 'mc-assets/dist/utils'
+import { createCanvas, loadImageFromUrl } from '../lib/utils'
+
+export const disposeObject = (obj: THREE.Object3D, cleanTextures = false) => {
+  // not cleaning texture there as it might be used by other objects, but would be good to also do that
+  if (obj instanceof THREE.Mesh) {
+    obj.geometry?.dispose?.()
+    obj.material?.dispose?.()
+  }
+  if (obj.children) {
+    // eslint-disable-next-line unicorn/no-array-for-each
+    obj.children.forEach(child => disposeObject(child, cleanTextures))
+  }
+  if (cleanTextures) {
+    if (obj instanceof THREE.Mesh) {
+      obj.material?.map?.dispose?.()
+    }
+  }
+}
+
+let textureCache: Record<string, THREE.Texture> = {}
+let imagesPromises: Record<string, Promise<THREE.Texture>> = {}
+
+export const loadThreeJsTextureFromUrlSync = (imageUrl: string) => {
+  const texture = new THREE.Texture()
+  const promise = loadImageFromUrl(imageUrl).then(bitmap => {
+    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height)
+    const ctx = canvas.getContext('2d')!
+    ctx.drawImage(bitmap, 0, 0)
+    texture.source.data = canvas
+    texture.needsUpdate = true
+    return texture
+  })
+  return {
+    texture,
+    promise
+  }
+
+  // MAIN
+  // const texture = new THREE.Texture()
+  // const promise = getLoadedImage(imageUrl).then(image => {
+  //   texture.image = image
+  //   texture.needsUpdate = true
+  //   return texture
+  // })
+  // return {
+  //   texture,
+  //   promise
+  // }
+}
+
+export const loadThreeJsTextureFromUrl = async (imageUrl: string) => {
+  return loadThreeJsTextureFromUrlSync(imageUrl).texture
+
+  // MAIN
+  // const loaded = new THREE.TextureLoader().loadAsync(imageUrl)
+  // return loaded
+}
+
+export const loadThreeJsTextureFromBitmap = (image: ImageBitmap) => {
+  const canvas = createCanvas(image.width, image.height)
+  const ctx = canvas.getContext('2d')!
+  ctx.drawImage(image, 0, 0)
+  const texture = new THREE.Texture(canvas)
+  texture.magFilter = THREE.NearestFilter
+  texture.minFilter = THREE.NearestFilter
+  return texture
+}
+
+export async function loadTexture (texture: string, cb: (texture: THREE.Texture) => void, onLoad?: () => void): Promise<void> {
+  const cached = textureCache[texture]
+  if (!cached) {
+    const { promise, resolve } = Promise.withResolvers<THREE.Texture>()
+    const t = loadThreeJsTextureFromUrlSync(texture)
+    textureCache[texture] = t.texture
+    void t.promise.then(resolve)
+    imagesPromises[texture] = promise
+  }
+
+  cb(textureCache[texture])
+  void imagesPromises[texture].then(() => {
+    onLoad?.()
+  })
+}
+
+export const clearTextureCache = () => {
+  textureCache = {}
+  imagesPromises = {}
+}