minecraft-renderer 0.1.78 → 0.1.80

package/src/three/threeJsMedia.ts

@@ -11,14 +11,14 @@ type ControlModeConfig = {
 }
 
 interface MediaProperties {
-  position: { x: number, y: number, z: number }
-  size: { width: number, height: number }
+  position: { x: number; y: number; z: number }
+  size: { width: number; height: number }
   src: string
   rotation?: 0 | 1 | 2 | 3 // 0-3 for 0°, 90°, 180°, 270°
   doubleSide?: boolean
   background?: number // Hexadecimal color (e.g., 0x000000 for black)
   opacity?: number // 0-1 value for transparency
-  uvMapping?: { startU: number, endU: number, startV: number, endV: number }
+  uvMapping?: { startU: number; endU: number; startV: number; endV: number }
   allowOrigins?: string[] | boolean
   loop?: boolean
   volume?: number
@@ -34,12 +34,7 @@ interface MediaData {
   video: HTMLVideoElement | undefined
   pausedBecuaseHidden: boolean
   texture: THREE.Texture
-  updateUVMapping: (config: {
-    startU: number
-    endU: number
-    startV: number
-    endV: number
-  }) => void
+  updateUVMapping: (config: { startU: number; endU: number; startV: number; endV: number }) => void
   positionalAudio?: THREE.PositionalAudio
   hadAutoPlayError?: boolean
   ended?: boolean
@@ -95,7 +90,7 @@ export class ThreeJsMedia {
     ctx.clearRect(0, 0, canvas.width, canvas.height)
 
     // Add background color
-    ctx.fillStyle = `rgba(${background >> 16 & 255}, ${background >> 8 & 255}, ${background & 255}, 1)`
+    ctx.fillStyle = `rgba(${(background >> 16) & 255}, ${(background >> 8) & 255}, ${background & 255}, 1)`
     ctx.fillRect(0, 0, canvas.width, canvas.height)
 
     // Add red text with size relative to canvas dimensions
@@ -167,7 +162,13 @@ export class ThreeJsMedia {
 
     const originSecurityError = props.allowOrigins !== undefined && !this.validateOrigin(props.src, props.allowOrigins)
     if (originSecurityError) {
-      console.warn('Remote resource blocked due to security policy', props.src, 'allowed origins:', props.allowOrigins, 'you can control it with `remoteContentNotSameOrigin` option')
+      console.warn(
+        'Remote resource blocked due to security policy',
+        props.src,
+        'allowed origins:',
+        props.allowOrigins,
+        'you can control it with `remoteContentNotSameOrigin` option'
+      )
       props.src = ''
     }
 
@@ -247,12 +248,11 @@ export class ThreeJsMedia {
       })
     }
 
-
     // Create background texture first
     const backgroundTexture = this.createBackgroundTexture(
       props.size.width,
       props.size.height,
-      props.background,
+      props.background
       // props.opacity ?? 1
     )
 
@@ -278,30 +278,32 @@ export class ThreeJsMedia {
     if (video) {
       texture = new THREE.VideoTexture(video)
     } else if (workerVideoUnsupported) {
-      texture = this.createErrorTexture(
-        props.size.width,
-        props.size.height,
-        props.background,
-        'Video unavailable (multi-thread)',
-      )
+      texture = this.createErrorTexture(props.size.width, props.size.height, props.background, 'Video unavailable (multi-thread)')
     } else if (isWebWorker) {
       const loaded = loadThreeJsTextureFromUrlSync(props.src)
       texture = loaded.texture
       texture.minFilter = THREE.NearestFilter
       texture.magFilter = THREE.NearestFilter
-      void loaded.promise.then(() => {
-        if (this.customMedia.get(id)?.texture === texture) {
-          material.map = texture
-          material.needsUpdate = true
-        }
-      }).catch(() => handleError())
+      void loaded.promise
+        .then(() => {
+          if (this.customMedia.get(id)?.texture === texture) {
+            material.map = texture
+            material.needsUpdate = true
+          }
+        })
+        .catch(() => handleError())
     } else {
-      texture = new THREE.TextureLoader().load(props.src, () => {
-        if (this.customMedia.get(id)?.texture === texture) {
-          material.map = texture
-          material.needsUpdate = true
-        }
-      }, undefined, () => handleError()) // todo cache
+      texture = new THREE.TextureLoader().load(
+        props.src,
+        () => {
+          if (this.customMedia.get(id)?.texture === texture) {
+            material.map = texture
+            material.needsUpdate = true
+          }
+        },
+        undefined,
+        () => handleError()
+      ) // todo cache
     }
     texture.minFilter = THREE.NearestFilter
     texture.magFilter = THREE.NearestFilter
@@ -312,7 +314,13 @@ export class ThreeJsMedia {
     // Create inner mesh for offsets
     const mesh = new THREE.Mesh(geometry, material)
 
-    const { mesh: panel } = this.positionMeshExact(mesh, THREE.MathUtils.degToRad((props.rotation ?? 0) * 90), props.position, props.size.width, props.size.height)
+    const { mesh: panel } = this.positionMeshExact(
+      mesh,
+      THREE.MathUtils.degToRad((props.rotation ?? 0) * 90),
+      props.position,
+      props.size.width,
+      props.size.height
+    )
 
     scene.add(panel)
 
@@ -336,7 +344,7 @@ export class ThreeJsMedia {
     }
 
     // UV mapping configuration
-    const updateUVMapping = (config: { startU: number, endU: number, startV: number, endV: number }) => {
+    const updateUVMapping = (config: { startU: number; endU: number; startV: number; endV: number }) => {
       const uvs = geometry.attributes.uv.array as Float32Array
       uvs[0] = config.startU
       uvs[1] = config.startV
@@ -368,7 +376,7 @@ export class ThreeJsMedia {
         if (videoData.destroyed) return
         console.error(`Failed to play video ${id}:`, err)
         // TODO!
-        const t = /* translate ??  */(txt => txt)
+        const t = /* translate ??  */ txt => txt
         handleError(err.name === 'NotAllowedError' || err.name === 'AbortError' ? t('Waiting for user interaction') : t('Failed to auto play'))
       }
     }
@@ -398,14 +406,15 @@ export class ThreeJsMedia {
         return
       }
 
-      void videoData.video.play()
+      void videoData.video
+        .play()
         .then(() => {
           videoData.hadAutoPlayError = false
           console.log(`Playing video ${id}`)
         })
         .catch(err => {
           if (videoData.pausedBecuaseHidden) return
-          if (err.name === 'NotAllowedError' || err.name === 'AbortError' || err.message?.includes('not allowed') && !videoData.pausedBecuaseHidden) {
+          if (err.name === 'NotAllowedError' || err.name === 'AbortError' || (err.message?.includes('not allowed') && !videoData.pausedBecuaseHidden)) {
             videoData.hadAutoPlayError = true
           }
           videoData.handleError(err)
@@ -518,14 +527,7 @@ export class ThreeJsMedia {
    * @param depth Depth of the mesh (default: 1)
    * @returns The positioned mesh for chaining
    */
-  positionMeshExact(
-    mesh: THREE.Mesh,
-    rotation: number,
-    startPosition: { x: number, y: number, z: number },
-    width: number,
-    height: number,
-    depth = 1
-  ) {
+  positionMeshExact(mesh: THREE.Mesh, rotation: number, startPosition: { x: number; y: number; z: number }, width: number, height: number, depth = 1) {
     // avoid z-fighting with the ground plane
     if (rotation === 0) {
       startPosition.z += 0.001
@@ -536,7 +538,7 @@ export class ThreeJsMedia {
     if (rotation === Math.PI) {
       startPosition.z -= 0.001
     }
-    if (rotation === 3 * Math.PI / 2) {
+    if (rotation === (3 * Math.PI) / 2) {
       startPosition.x += 0.001
     }
 
@@ -547,12 +549,11 @@ export class ThreeJsMedia {
     if (rotation === Math.PI) {
       startPosition.x += 1
     }
-    if (rotation === 3 * Math.PI / 2) {
+    if (rotation === (3 * Math.PI) / 2) {
       startPosition.z += 1
       startPosition.x += 1
     }
 
-
     // First, clean up any previous transformations
     mesh.matrix.identity()
     mesh.position.set(0, 0, 0)
@@ -563,7 +564,7 @@ export class ThreeJsMedia {
     // We need to set up the proper orientation for our use case
     // Rotate the plane to face the correct direction based on the rotation parameter
     mesh.rotateY(rotation)
-    if (rotation === Math.PI / 2 || rotation === 3 * Math.PI / 2) {
+    if (rotation === Math.PI / 2 || rotation === (3 * Math.PI) / 2) {
       mesh.rotateZ(-Math.PI)
       mesh.rotateX(-Math.PI)
     }
@@ -585,36 +586,24 @@ export class ThreeJsMedia {
     debugGroup.add(mesh)
 
     // Add a marker at the starting position (should be exactly at pos)
-    const startMarker = new THREE.Mesh(
-      new THREE.BoxGeometry(0.1, 0.1, 0.1),
-      new THREE.MeshBasicMaterial({ color: 0xff_00_00 })
-    )
+    const startMarker = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xff_00_00 }))
     startMarker.position.set(startPosition.x, startPosition.y, startPosition.z)
     debugGroup.add(startMarker)
 
     // Add a marker at the end position (width units away in the rotated direction)
     const endX = startPosition.x + Math.cos(rotation) * width
     const endZ = startPosition.z + Math.sin(rotation) * width
-    const endYMarker = new THREE.Mesh(
-      new THREE.BoxGeometry(0.1, 0.1, 0.1),
-      new THREE.MeshBasicMaterial({ color: 0x00_00_ff })
-    )
+    const endYMarker = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0x00_00_ff }))
     endYMarker.position.set(startPosition.x, startPosition.y + height, startPosition.z)
     debugGroup.add(endYMarker)
 
     // Add a marker at the width endpoint
-    const endWidthMarker = new THREE.Mesh(
-      new THREE.BoxGeometry(0.1, 0.1, 0.1),
-      new THREE.MeshBasicMaterial({ color: 0xff_ff_00 })
-    )
+    const endWidthMarker = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xff_ff_00 }))
     endWidthMarker.position.set(endX, startPosition.y, endZ)
     debugGroup.add(endWidthMarker)
 
     // Add a marker at the corner diagonal endpoint (both width and height)
-    const endCornerMarker = new THREE.Mesh(
-      new THREE.BoxGeometry(0.1, 0.1, 0.1),
-      new THREE.MeshBasicMaterial({ color: 0xff_00_ff })
-    )
+    const endCornerMarker = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial({ color: 0xff_00_ff }))
     endCornerMarker.position.set(endX, startPosition.y + height, endZ)
     debugGroup.add(endCornerMarker)
 
@@ -624,12 +613,7 @@ export class ThreeJsMedia {
       this.worldRenderer.sceneOrigin.toSceneY(startPosition.y),
       this.worldRenderer.sceneOrigin.toSceneZ(startPosition.z)
     )
-    const directionHelper = new THREE.ArrowHelper(
-      new THREE.Vector3(Math.cos(rotation), 0, Math.sin(rotation)),
-      sceneStartPos,
-      1,
-      0xff_00_00
-    )
+    const directionHelper = new THREE.ArrowHelper(new THREE.Vector3(Math.cos(rotation), 0, Math.sin(rotation)), sceneStartPos, 1, 0xff_00_00)
     debugGroup.add(directionHelper)
 
     return {
@@ -708,8 +692,7 @@ export class ThreeJsMedia {
       // Find if this object belongs to any media
       for (const [id, videoData] of this.customMedia.entries()) {
         // Check if the intersected object is part of our media mesh
-        if (intersectedObject === videoData.mesh ||
-          videoData.mesh.children.includes(intersectedObject)) {
+        if (intersectedObject === videoData.mesh || videoData.mesh.children.includes(intersectedObject)) {
           const { uv } = intersection
           if (uv) {
             const result = {

package/src/three/threeJsParticles.ts

@@ -3,23 +3,23 @@ import * as THREE from 'three'
 import type { SceneOrigin } from './sceneOrigin'
 
 interface ParticleMesh extends THREE.Mesh {
-  velocity: THREE.Vector3;
-  worldPos: THREE.Vector3;
+  velocity: THREE.Vector3
+  worldPos: THREE.Vector3
 }
 
 interface ParticleConfig {
-  fountainHeight: number;
-  resetHeight: number;
-  xVelocityRange: number;
-  zVelocityRange: number;
-  particleCount: number;
-  particleRadiusRange: { min: number; max: number };
-  yVelocityRange: { min: number; max: number };
+  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>;
+  position?: { x: number; y: number; z: number }
+  particleConfig?: Partial<ParticleConfig>
 }
 
 export class Fountain {
@@ -29,15 +29,17 @@ export class Fountain {
   private readonly sceneOrigin: SceneOrigin | undefined
   container: THREE.Object3D | undefined
 
-  constructor (public sectionId: string, options: FountainOptions = {}, sceneOrigin?: SceneOrigin) {
+  constructor(
+    public sectionId: string,
+    options: FountainOptions = {},
+    sceneOrigin?: SceneOrigin
+  ) {
     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)
     this.sceneOrigin = sceneOrigin
   }
 
-  private createConfig (
-    particleConfigOverride?: Partial<ParticleConfig>
-  ): { particleConfig: ParticleConfig } {
+  private createConfig(particleConfigOverride?: Partial<ParticleConfig>): { particleConfig: ParticleConfig } {
     const particleConfig: ParticleConfig = {
       fountainHeight: 10,
       resetHeight: 0,
@@ -52,27 +54,26 @@ export class Fountain {
     return { particleConfig }
   }
 
-  private toSceneX (worldX: number): number {
+  private toSceneX(worldX: number): number {
     return this.sceneOrigin ? this.sceneOrigin.toSceneX(worldX) : worldX
   }
 
-  private toSceneY (worldY: number): number {
+  private toSceneY(worldY: number): number {
     return this.sceneOrigin ? this.sceneOrigin.toSceneY(worldY) : worldY
   }
 
-  private toSceneZ (worldZ: number): number {
+  private toSceneZ(worldZ: number): number {
     return this.sceneOrigin ? this.sceneOrigin.toSceneZ(worldZ) : worldZ
   }
 
-
-  createParticles (container: THREE.Object3D): void {
+  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) +
+      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({
@@ -103,7 +104,7 @@ export class Fountain {
     }
   }
 
-  render (): void {
+  render(): void {
     for (const particle of this.particles) {
       particle.velocity.y -= 0.01 + Math.random() * 0.1
       particle.worldPos.add(particle.velocity)
@@ -121,15 +122,11 @@ export class Fountain {
         )
       }
 
-      particle.position.set(
-        this.toSceneX(particle.worldPos.x),
-        this.toSceneY(particle.worldPos.y),
-        this.toSceneZ(particle.worldPos.z)
-      )
+      particle.position.set(this.toSceneX(particle.worldPos.x), this.toSceneY(particle.worldPos.y), this.toSceneZ(particle.worldPos.z))
     }
   }
 
-  private updateParticleCount (newCount: number): void {
+  private updateParticleCount(newCount: number): void {
     if (newCount !== this.config.particleConfig.particleCount) {
       this.config.particleConfig.particleCount = newCount
       const currentCount = this.particles.length
@@ -142,7 +139,7 @@ export class Fountain {
     }
   }
 
-  private addParticles (count: number): void {
+  private addParticles(count: number): void {
     const geometry = new THREE.SphereGeometry(0.1)
     const material = new THREE.MeshBasicMaterial({ color: 0x00_ff_00 })
 
@@ -150,24 +147,18 @@ export class Fountain {
       const mesh = new THREE.Mesh(geometry, material)
       const particle = mesh as unknown as ParticleMesh
       particle.worldPos = this.position.clone()
-      particle.position.set(
-        this.toSceneX(this.position.x),
-        this.toSceneY(this.position.y),
-        this.toSceneZ(this.position.z)
-      )
+      particle.position.set(this.toSceneX(this.position.x), this.toSceneY(this.position.y), this.toSceneZ(this.position.z))
       particle.velocity = new THREE.Vector3(
-        Math.random() * this.config.particleConfig.xVelocityRange -
-        this.config.particleConfig.xVelocityRange / 2,
+        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
+        Math.random() * this.config.particleConfig.zVelocityRange - this.config.particleConfig.zVelocityRange / 2
       )
       this.particles.push(particle)
       this.container!.add(particle)
     }
   }
 
-  private removeParticles (count: number): void {
+  private removeParticles(count: number): void {
     for (let i = 0; i < count; i++) {
       const particle = this.particles.pop()
       if (particle) {
@@ -176,7 +167,7 @@ export class Fountain {
     }
   }
 
-  public dispose (): void {
+  public dispose(): void {
     for (const particle of this.particles) {
       particle.geometry.dispose()
       if (Array.isArray(particle.material)) {

package/src/three/threeJsSound.ts

@@ -15,7 +15,7 @@ export class ThreeJsSound implements SoundSystem {
       this.stopAll()
     })
 
-    worldRenderer.onReactiveConfigUpdated('volume', (volume) => {
+    worldRenderer.onReactiveConfigUpdated('volume', volume => {
       this.changeVolume(volume)
     })
   }
@@ -26,7 +26,7 @@ export class ThreeJsSound implements SoundSystem {
     this.worldRenderer.camera.add(this.audioListener)
   }
 
-  playSound(position: { x: number, y: number, z: number }, path: string, volume = 1, pitch = 1, timeout = 500) {
+  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!)
@@ -35,7 +35,7 @@ export class ThreeJsSound implements SoundSystem {
 
     const audioLoader = new THREE.AudioLoader()
     const start = Date.now()
-    void audioLoader.loadAsync(path).then((buffer) => {
+    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

package/src/three/threeJsUtils.ts

@@ -70,17 +70,17 @@ export const loadThreeJsTextureFromBitmap = (image: ImageBitmap) => {
 }
 
 /** Worker-safe sync handle; image loads via fetch + OffscreenCanvas (not TextureLoader). */
-export function loadNearestFilterTexture (imageUrl: string): THREE.Texture {
+export function loadNearestFilterTexture(imageUrl: string): THREE.Texture {
   const { texture, promise } = loadThreeJsTextureFromUrlSync(imageUrl)
   texture.magFilter = THREE.NearestFilter
   texture.minFilter = THREE.NearestFilter
-  void promise.catch((err) => {
+  void promise.catch(err => {
     console.error('[texture] failed to load', imageUrl, err)
   })
   return texture
 }
 
-export async function loadTexture (texture: string, cb: (texture: THREE.Texture) => void, onLoad?: () => void): Promise<void> {
+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>()

package/src/three/threeWorker.ts

@@ -1,7 +1,7 @@
 //@ts-nocheck
 import { augmentWorkerMcData } from '../lib/buildWorkerMcDataIndexes'
 
-globalThis.structuredClone ??= (value) => JSON.parse(JSON.stringify(value))
+globalThis.structuredClone ??= value => JSON.parse(JSON.stringify(value))
 
 const applyWorkerMcData = (raw: Record<string, unknown>) => {
   augmentWorkerMcData(raw)
@@ -23,7 +23,7 @@ self.addEventListener('message', (event: MessageEvent) => {
 
   if (Array.isArray(data)) {
     // eslint-disable-next-line unicorn/no-array-for-each
-    data.forEach((msg) => {
+    data.forEach(msg => {
       if (msg.type === 'mcData') {
         applyWorkerMcData(msg.mcData)
       }