diff --git a/party-cathedral/src/scene/medieval-musicians.js b/party-cathedral/src/scene/medieval-musicians.js index 50a8706..b96f66b 100644 --- a/party-cathedral/src/scene/medieval-musicians.js +++ b/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( diff --git a/party-cathedral/textures/musician2.png b/party-cathedral/textures/musician2.png new file mode 100644 index 0000000..f821b5e Binary files /dev/null and b/party-cathedral/textures/musician2.png differ diff --git a/party-cathedral/textures/musician3.png b/party-cathedral/textures/musician3.png new file mode 100644 index 0000000..bb61236 Binary files /dev/null and b/party-cathedral/textures/musician3.png differ diff --git a/party-cathedral/textures/musician4.png b/party-cathedral/textures/musician4.png new file mode 100644 index 0000000..3f9942f Binary files /dev/null and b/party-cathedral/textures/musician4.png differ