Feature: band of different musicians

party-cathedral/src/scene/medieval-musicians.js

@@ -2,7 +2,12 @@ import * as THREE from 'three';
 import { state } from '../state.js';
 import { SceneFeature } from './SceneFeature.js';
 import sceneFeatureManager from './SceneFeatureManager.js';
-import musiciansTextureUrl from '/textures/musician1.png';
+const musicianTextureUrls = [
+    '/textures/musician1.png',
+    '/textures/musician2.png',
+    '/textures/musician3.png',
+    '/textures/musician4.png',
+];
 
 // --- Stage dimensions for positioning ---
         const stageHeight = 1.5;
@@ -20,9 +25,8 @@ export class MedievalMusicians extends SceneFeature {
         sceneFeatureManager.register(this);
     }
 
-    init() {
-        // Load the texture and create the material inside the callback
-        state.loader.load(musiciansTextureUrl, (texture) => {
+    async init() {
+        const processTexture = (texture) => {
             // 1. Draw texture to canvas to process it
             const image = texture.image;
             const canvas = document.createElement('canvas');
@@ -53,18 +57,23 @@ export class MedievalMusicians extends SceneFeature {
             }
             context.putImageData(imageData, 0, 0);
 
-            // 4. Create a new texture from the modified canvas
-            const processedTexture = new THREE.CanvasTexture(canvas);
+            return new THREE.CanvasTexture(canvas);
+        };
 
-            // 5. Create a standard material with the new texture
-            const material = new THREE.MeshStandardMaterial({
+        // Load and process all textures, creating a material for each
+        const materials = await Promise.all(musicianTextureUrls.map(async (url) => {
+            const texture = await state.loader.loadAsync(url);
+            const processedTexture = processTexture(texture);
+            return new THREE.MeshStandardMaterial({
                 map: processedTexture,
                 side: THREE.DoubleSide,
                 alphaTest: 0.5, // Treat pixels with alpha < 0.5 as fully transparent
                 roughness: 0.7,
                 metalness: 0.1,
             });
+        }));
 
+        const createMusicians = () => {
             // 6. Create and position the musicians
             const geometry = new THREE.PlaneGeometry(musicianWidth, musicianHeight);
 
@@ -72,9 +81,12 @@ export class MedievalMusicians extends SceneFeature {
                 new THREE.Vector3(-2, stageHeight + musicianHeight / 2, -length / 2 + stageDepth / 2 - 1),
                 new THREE.Vector3(0, stageHeight + musicianHeight / 2, -length / 2 + stageDepth / 2 - 1.5),
                 new THREE.Vector3(2.5, stageHeight + musicianHeight / 2, -length / 2 + stageDepth / 2 - 1.2),
+                new THREE.Vector3(1.2, stageHeight + musicianHeight / 2, -length / 2 + stageDepth / 2 - 0.4),
             ];
 
-            musicianPositions.forEach(pos => {
+            musicianPositions.forEach((pos, index) => {
+                // Randomly pick one of the created materials
+                const material = materials[Math.floor(index % materials.length)];
                 const musician = new THREE.Mesh(geometry, material);
                 musician.position.copy(pos);
                 state.scene.add(musician);
@@ -97,7 +109,9 @@ export class MedievalMusicians extends SceneFeature {
                     jumpStartTime: 0,
                 });
             });
-        });
+        };
+
+        createMusicians();
     }
 
     update(deltaTime) {
@@ -131,7 +145,7 @@ export class MedievalMusicians extends SceneFeature {
                             // --- Decide to jump to the other plane ---
                             musicianObj.state = 'PREPARING_JUMP';
                             const targetX = (Math.random() - 0.5) * area.x;
-                            musicianObj.targetPosition = new THREE.Vector3(targetX, mesh.position.y, planeEdgeZ);
+                            musicianObj.targetPosition = new THREE.Vector3(targetX, area.y + musicianHeight/2, planeEdgeZ);
                         } else {
                             // --- Decide to move to a new spot on the current plane ---
                             const newTarget = new THREE.Vector3(