dejvino/music-video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: dejvino:4726b419f421ccf10eef93c7444c3cbe5f27687c
Branches Tags
dejvino:main
..
compare: dejvino:3b1421e4e7e4f03e8a717deba8ffb08e4cb612ad
Branches Tags
dejvino:main

No commits in common. "4726b419f421ccf10eef93c7444c3cbe5f27687c" and "3b1421e4e7e4f03e8a717deba8ffb08e4cb612ad" have entirely different histories.
4726b419f4 ... 3b1421e4e7

39 changed files with 3 additions and 2982 deletions
Show Stats Expand all files Collapse all files

2
magic-mirror/src/scene/fireplace.js
View File

@ -69,7 +69,7 @@ export function createFireplace(x, z, rotY) {
// Lintel (Top Frame)
const lintelWidth = openingWidth + 2 * frameThickness;
const lintelGeo = new THREE.BoxGeometry(lintelWidth, frameThickness, frameDepth+0.1);
const lintelGeo = new THREE.BoxGeometry(lintelWidth, frameThickness, frameDepth);
const lintel = new THREE.Mesh(lintelGeo, stoneMaterial);
lintel.position.set(0, hearthHeight + openingHeight + frameThickness / 2, bodyDepth / 2 + frameDepth / 2);
lintel.castShadow = true;

4
magic-mirror/src/scene/rat.js
View File

@ -58,10 +58,10 @@ export class Rat {
export function createRats(x, y, z, rotY) {
// --- 9.5 Rat Hole ---
const holeGeo = new THREE.CircleGeometry(0.05, 16);
const holeGeo = new THREE.CircleGeometry(0.15, 16);
const holeMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
const ratHole = new THREE.Mesh(holeGeo, holeMat);
ratHole.position.set(x, y + 0.02, z);
ratHole.position.set(x, y + 0.1, z);
ratHole.rotation.y = rotY;
state.scene.add(ratHole);

2
party-cathedral/.gitignore vendored
View File

@ -1,2 +0,0 @@
node_modules
dist

41
party-cathedral/index.html
View File

@ -1,41 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Party Cathedral</title>
<style>
/* Cheerful medieval aesthetic */
body {
background-color: #f5eeda; /* A light parchment color */
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
}
canvas {
display: block;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script type="module" src="/src/main.js"></script>
</head>
<body>
<!-- Hidden Video Element --><video id="video" playsinline muted class="hidden"></video>
<!-- Controls for loading video --><div id="controls" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 flex flex-col items-center space-y-2">
<!-- Hidden File Input that will be triggered by the button --><input type="file" id="fileInput" accept="video/mp4" class="hidden" multiple>
<div class="flex space-x-4">
<!-- Load Tapes Button --><button id="loadTapeButton" class="px-8 py-3 bg-[#cc3333] text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150 active:translate-y-px">
BEHOLD THE SPECTACLE
</button>
</div>
</div>
<!-- 3D Canvas will be injected here by Three.js -->
</body>
</html>
<!-- textures sourced from https://animalia-life.club/ -->

1069
party-cathedral/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
party-cathedral/package.json
View File

@ -1,17 +0,0 @@
{
"name": "tv-player",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^7.2.2"
},
"dependencies": {
"three": "^0.181.1"
}
}

3
party-cathedral/preview.sh
View File

@ -1,3 +0,0 @@
#!/usr/bin/env bash
nix-shell -p nodejs --run "npx vite build && npx vite preview"

3
party-cathedral/serve.sh
View File

@ -1,3 +0,0 @@
#!/usr/bin/env bash
nix-shell -p nodejs --run "npx vite"

100
party-cathedral/src/core/animate.js
View File

@ -1,100 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { updateScreenEffect } from '../scene/magic-mirror.js'
import sceneFeatureManager from '../scene/SceneFeatureManager.js';
function updateCamera() {
const globalTime = Date.now() * 0.0001;
const lookAtTime = Date.now() * 0.0002;
const camAmplitude = 1.0;
const lookAmplitude = 8.0;
// Base Camera Position in front of the TV
const baseX = 0;
const baseY = 1.6;
const baseZ = -10.0;
// Base LookAt target (Center of the screen)
const baseTargetX = 0;
const baseTargetY = 1.6;
const baseTargetZ = -30.0;
// Camera Position Offsets (Drift)
const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.1;
const camOffsetZ = Math.cos(globalTime * 3.2) * camAmplitude;
state.camera.position.x = baseX + camOffsetX;
state.camera.position.y = baseY + camOffsetY;
state.camera.position.z = baseZ + camOffsetZ;
// LookAt Target Offsets (Subtle Gaze Shift)
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
const lookOffsetZ = Math.cos(lookAtTime * 2.5) * lookAmplitude;
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude * 0.5;
// Apply lookAt to the subtly shifted target
state.camera.lookAt(baseTargetX + lookOffsetX, baseTargetY + lookOffsetY, baseTargetZ + lookOffsetZ);
}
function updateScreenLight() {
if (state.isVideoLoaded && state.screenLight.intensity > 0) {
const pulseTarget = state.originalScreenIntensity + (Math.random() - 0.5) * state.screenIntensityPulse;
state.screenLight.intensity = THREE.MathUtils.lerp(state.screenLight.intensity, pulseTarget, 0.1);
const lightTime = Date.now() * 0.0001;
const radius = 0.01;
const centerX = 0;
const centerY = 1.5;
state.screenLight.position.x = centerX + Math.cos(lightTime) * radius;
state.screenLight.position.y = centerY + Math.sin(lightTime * 1.5) * radius * 0.5; // Slightly different freq for Y
}
}
function updateShaderTime() {
if (state.tvScreen && state.tvScreen.material.uniforms && state.tvScreen.material.uniforms.u_time) {
state.tvScreen.material.uniforms.u_time.value = state.clock.getElapsedTime();
}
}
function updateVideo() {
if (state.videoTexture) {
state.videoTexture.needsUpdate = true;
}
}
// --- Animation Loop ---
let lastTime = -1;
export function animate() {
requestAnimationFrame(animate);
let deltaTime = 0;
if (lastTime !== -1) {
const newTime = state.clock.getElapsedTime();
deltaTime = newTime - lastTime;
lastTime = newTime;
} else {
lastTime = state.clock.getElapsedTime();
}
sceneFeatureManager.update(deltaTime);
state.effectsManager.update();
updateCamera();
updateScreenLight();
updateVideo();
updateShaderTime();
updateScreenEffect();
// RENDER!
state.renderer.render(state.scene, state.camera);
}
// --- Window Resize Handler ---
export function onWindowResize() {
state.camera.aspect = window.innerWidth / window.innerHeight;
state.camera.updateProjectionMatrix();
state.renderer.setSize(window.innerWidth, window.innerHeight);
}

62
party-cathedral/src/core/init.js
View File

@ -1,62 +0,0 @@
import * as THREE from 'three';
import { state, initState } from '../state.js';
import { EffectsManager } from '../effects/EffectsManager.js';
import { createSceneObjects } from '../scene/root.js';
import { animate, onWindowResize } from './animate.js';
import { loadVideoFile, playNextVideo } from './video-player.js';
// --- Initialization ---
export function init() {
initState();
// 1. Scene Setup (Dark, Ambient)
state.scene = new THREE.Scene();
state.scene.background = new THREE.Color(0x000000);
// 2. Camera Setup
const FOV = 95;
state.camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 1000);
state.camera.position.set(0, 1.5, 4);
// 3. Renderer Setup
state.renderer = new THREE.WebGLRenderer({ antialias: true });
state.renderer.setSize(window.innerWidth, window.innerHeight);
state.renderer.setPixelRatio(window.devicePixelRatio);
// Enable shadows on the renderer
state.renderer.shadowMap.enabled = true;
state.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
state.container.appendChild(state.renderer.domElement);
// 5. Build the entire scene with TV and surrounding objects
createSceneObjects();
// 6. Initialize all visual effects via the manager
state.effectsManager = new EffectsManager(state.scene);
// --- 8. Debug Visualization Helpers ---
// Visual aids for the light source positions
if (state.debugLight && THREE.PointLightHelper) {
const screenHelper = new THREE.PointLightHelper(state.screenLight, 0.1, 0xff0000); // Red for screen
state.scene.add(screenHelper);
// Lamp Helper will now work since lampLight is added to the scene
const lampHelperPoint = new THREE.PointLightHelper(state.lampLightPoint, 0.1, 0x00ff00); // Green for lamp
state.scene.add(lampHelperPoint);
}
// 9. Event Listeners
window.addEventListener('resize', onWindowResize, false);
state.fileInput.addEventListener('change', loadVideoFile);
// Button logic
state.loadTapeButton.addEventListener('click', () => {
state.fileInput.click();
});
// Auto-advance to the next video when the current one finishes.
state.videoElement.addEventListener('ended', playNextVideo);
// Start the animation loop
animate();
}

107
party-cathedral/src/core/video-player.js
View File

@ -1,107 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { turnTvScreenOff, turnTvScreenOn } from '../scene/magic-mirror.js';
// --- Play video by index ---
export function playVideoByIndex(index) {
state.currentVideoIndex = index;
const url = state.videoUrls[index];
// Dispose of previous texture to free resources
if (state.videoTexture) {
state.videoTexture.dispose();
state.videoTexture = null;
}
if (index < 0 || index >= state.videoUrls.length) {
console.info('End of playlist reached. Reload tapes to start again.');
turnTvScreenOff();
state.isVideoLoaded = false;
state.lastUpdateTime = -1; // force VCR to redraw
return;
}
state.videoElement.src = url;
state.videoElement.muted = true;
state.videoElement.load();
// Set loop property: only loop if it's the only video loaded
state.videoElement.loop = false; //state.videoUrls.length === 1;
state.videoElement.onloadeddata = () => {
// 1. Create the Three.js texture
state.videoTexture = new THREE.VideoTexture(state.videoElement);
state.videoTexture.minFilter = THREE.LinearFilter;
state.videoTexture.magFilter = THREE.LinearFilter;
state.videoTexture.format = THREE.RGBAFormat;
state.videoTexture.needsUpdate = true;
// 2. Apply the video texture to the screen mesh
turnTvScreenOn();
// 3. Start playback and trigger the warm-up effect simultaneously
state.videoElement.play().then(() => {
state.isVideoLoaded = true;
// Use the defined base intensity for screen glow
state.screenLight.intensity = state.originalScreenIntensity;
// Initial status message with tape count
console.info(`Playing tape ${state.currentVideoIndex + 1} of ${state.videoUrls.length}.`);
}).catch(error => {
state.screenLight.intensity = state.originalScreenIntensity * 0.5; // Dim the light if playback fails
console.error(`Playback blocked for tape ${state.currentVideoIndex + 1}. Click Next Tape to try again.`);
console.error('Playback Error: Could not start video playback.', error);
});
};
state.videoElement.onerror = (e) => {
state.screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
console.error(`Error loading tape ${state.currentVideoIndex + 1}.`);
console.error('Video Load Error:', e);
};
}
// --- Cycle to the next video ---
export function playNextVideo() {
// Determine the next index, cycling back to 0 if we reach the end
let nextIndex = state.currentVideoIndex + 1;
if (nextIndex < state.videoUrls.length) {
state.baseTime += state.videoElement.duration;
}
playVideoByIndex(nextIndex);
}
// --- Video Loading Logic (handles multiple files) ---
export function loadVideoFile(event) {
const files = event.target.files;
if (files.length === 0) {
console.info('File selection cancelled.');
return;
}
// 1. Clear previous URLs and revoke object URLs to prevent memory leaks
state.videoUrls.forEach(url => URL.revokeObjectURL(url));
state.videoUrls = [];
// 2. Populate the new videoUrls array
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.type.startsWith('video/')) {
state.videoUrls.push(URL.createObjectURL(file));
}
}
if (state.videoUrls.length === 0) {
console.info('No valid video files selected.');
return;
}
// 3. Start playback of the first video
console.info(`Loaded ${state.videoUrls.length} tapes. Starting playback...`);
state.loadTapeButton.classList.add("hidden");
const startDelay = 5;
console.info(`Video will start in ${startDelay} seconds.`);
setTimeout(() => { playVideoByIndex(0); }, startDelay * 1000);
}

22
party-cathedral/src/effects/EffectsManager.js
View File

@ -1,22 +0,0 @@
import { DustEffect } from './dust.js';
export class EffectsManager {
constructor(scene) {
this.effects = [];
this._initializeEffects(scene);
}
_initializeEffects(scene) {
// Add all desired effects here.
// This is now the single place to manage which effects are active.
this.addEffect(new DustEffect(scene));
}
addEffect(effect) {
this.effects.push(effect);
}
update() {
this.effects.forEach(effect => effect.update());
}
}

47
party-cathedral/src/effects/dust.js
View File

@ -1,47 +0,0 @@
import * as THREE from 'three';
export class DustEffect {
constructor(scene) {
this.dust = null;
this._create(scene);
}
_create(scene) {
const particleCount = 2000;
const particlesGeometry = new THREE.BufferGeometry();
const positions = [];
for (let i = 0; i < particleCount; i++) {
positions.push(
(Math.random() - 0.5) * 15,
Math.random() * 10,
(Math.random() - 0.5) * 15
);
}
particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
const particleMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.015,
transparent: true,
opacity: 0.08,
blending: THREE.AdditiveBlending
});
this.dust = new THREE.Points(particlesGeometry, particleMaterial);
scene.add(this.dust);
}
update() {
if (this.dust) {
const positions = this.dust.geometry.attributes.position.array;
for (let i = 1; i < positions.length; i += 3) {
positions[i] -= 0.001;
if (positions[i] < -2) {
positions[i] = 8;
}
}
this.dust.geometry.attributes.position.needsUpdate = true;
}
}
}

39
party-cathedral/src/global-variables.js
View File

@ -1,39 +0,0 @@
// --- Global Variables ---
let scene, camera, renderer, tvScreen, videoTexture, screenLight, lampLightPoint, lampLightSpot, effectsManager;
// VCR Display related variables
let simulatedPlaybackTime = 0;
let lastUpdateTime = -1;
let baseTime = 0;
let isVideoLoaded = false;
let videoUrls = []; // Array to hold all video URLs
let currentVideoIndex = -1; // Index of the currently playing video
const originalLampIntensity = 0.8; // Base intensity for the flickering lamp
const originalScreenIntensity = 0.2; // Base intensity for the screen glow
const screenIntensityPulse = 0.2;
const roomSize = 5;
const roomHeight = 3;
const container = document.body;
const videoElement = document.getElementById('video');
const fileInput = document.getElementById('fileInput');
const loadTapeButton = document.getElementById('loadTapeButton');
const loader = new THREE.TextureLoader();
const debugLight = false;
let landingSurfaces = []; // Array to hold floor and table for fly landings
const raycaster = new THREE.Raycaster();
// --- Configuration ---
const ROOM_SIZE = roomSize;
const FLIGHT_HEIGHT_MIN = 0.5; // Min height for flying
const FLIGHT_HEIGHT_MAX = roomHeight * 0.9; // Max height for flying
const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
const DAMPING_FACTOR = 0.05;
const FLY_WAIT_BASE = 1000;
const FLY_LAND_CHANCE = 0.3;
// --- Seedable Random Number Generator (Mulberry32) ---
let seed = 12345; // Default seed, will be overridden per shelf

6
party-cathedral/src/main.js
View File

@ -1,6 +0,0 @@
import * as THREE from 'three';
import { init } from './core/init.js';
import { StainedGlass } from './scene/stained-glass-window.js';
// Start everything
init();

116
party-cathedral/src/scene/PictureFrame.js
View File

@ -1,116 +0,0 @@
import * as THREE from 'three';
const FRAME_DEPTH = 0.05;
const TRANSITION_DURATION = 5000;
const IMAGE_CHANGE_CHANCE = 0.0001;
export class PictureFrame {
constructor(scene, { position, width, height, imageUrls, rotationY = 0 }) {
if (!imageUrls || imageUrls.length === 0) {
throw new Error('PictureFrame requires at least one image URL in the imageUrls array.');
}
this.scene = scene;
this.mesh = this._createPictureFrame(width, height, imageUrls, 0.05);
this.mesh.position.copy(position);
this.mesh.rotation.y = rotationY;
this.isTransitioning = false;
this.transitionStartTime = 0;
this.scene.add(this.mesh);
}
_createPictureFrame(width, height, imageUrls, frameThickness) {
const paintingGroup = new THREE.Group();
// 1. Create the wooden frame
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // SaddleBrown
const topFrame = new THREE.Mesh(new THREE.BoxGeometry(width + 2 * frameThickness, frameThickness, FRAME_DEPTH), frameMaterial);
topFrame.position.y = height / 2 + frameThickness / 2;
topFrame.castShadow = true;
topFrame.receiveShadow = true;
paintingGroup.add(topFrame);
const bottomFrame = new THREE.Mesh(new THREE.BoxGeometry(width + 2 * frameThickness, frameThickness, FRAME_DEPTH), frameMaterial);
bottomFrame.position.y = -height / 2 - frameThickness / 2;
bottomFrame.castShadow = true;
bottomFrame.receiveShadow = true;
paintingGroup.add(bottomFrame);
const leftFrame = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, height, FRAME_DEPTH), frameMaterial);
leftFrame.position.x = -width / 2 - frameThickness / 2;
leftFrame.castShadow = true;
leftFrame.receiveShadow = true;
paintingGroup.add(leftFrame);
const rightFrame = new THREE.Mesh(new THREE.BoxGeometry(frameThickness, height, FRAME_DEPTH), frameMaterial);
rightFrame.position.x = width / 2 + frameThickness / 2;
rightFrame.castShadow = true;
rightFrame.receiveShadow = true;
paintingGroup.add(rightFrame);
// 2. Create the picture canvases with textures
const textureLoader = new THREE.TextureLoader();
this.textures = imageUrls.map(url => textureLoader.load(url));
this.currentTextureIndex = 0;
const pictureGeometry = new THREE.PlaneGeometry(width, height);
// Create two picture planes for cross-fading
this.pictureBack = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex] }));
this.pictureBack.position.z = 0.001;
this.pictureBack.receiveShadow = true;
paintingGroup.add(this.pictureBack);
this.pictureFront = new THREE.Mesh(pictureGeometry, new THREE.MeshPhongMaterial({ map: this.textures[this.currentTextureIndex], transparent: true, opacity: 0 }));
this.pictureFront.position.z = 0.003; // Place slightly in front to avoid z-fighting
this.pictureFront.receiveShadow = true;
paintingGroup.add(this.pictureFront);
return paintingGroup;
}
setPicture(index) {
if (this.isTransitioning || index === this.currentTextureIndex || index < 0 || index >= this.textures.length) {
return;
}
this.isTransitioning = true;
this.transitionStartTime = Date.now();
// Front plane fades in with the new texture
this.pictureFront.material.map = this.textures[index];
this.pictureFront.material.opacity = 0;
this.nextTextureIndex = index;
}
nextPicture() {
this.setPicture((this.currentTextureIndex + 1) % this.textures.length);
}
update() {
if (!this.isTransitioning) {
if (Math.random() > 1.0 - IMAGE_CHANGE_CHANCE) {
this.nextPicture();
}
return;
}
const elapsedTime = Date.now() - this.transitionStartTime;
const progress = Math.min(elapsedTime / TRANSITION_DURATION, 1.0);
this.pictureFront.material.opacity = progress;
if (progress >= 1.0) {
this.isTransitioning = false;
this.currentTextureIndex = this.nextTextureIndex;
// Reset for next transition
this.pictureBack.material.map = this.textures[this.currentTextureIndex];
this.pictureFront.material.opacity = 0;
}
}
}

6
party-cathedral/src/scene/SceneFeature.js
View File

@ -1,6 +0,0 @@
// SceneFeature.js
export class SceneFeature {
init() {}
update(deltaTime) {}
}

31
party-cathedral/src/scene/SceneFeatureManager.js
View File

@ -1,31 +0,0 @@
// SceneFeatureManager.js
class SceneFeatureManager {
constructor() {
if (SceneFeatureManager.instance) {
return SceneFeatureManager.instance;
}
this.features = [];
SceneFeatureManager.instance = this;
}
register(feature) {
this.features.push(feature);
}
init() {
for (const feature of this.features) {
feature.init();
}
}
update(deltaTime) {
for (const feature of this.features) {
feature.update(deltaTime);
}
}
}
const sceneFeatureManager = new SceneFeatureManager();
export default sceneFeatureManager;

61
party-cathedral/src/scene/light-ball.js
View File

@ -1,61 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { SceneFeature } from './SceneFeature.js';
import sceneFeatureManager from './SceneFeatureManager.js';
export class LightBall extends SceneFeature {
constructor() {
super();
this.ball = null;
this.light = null;
sceneFeatureManager.register(this);
}
init() {
// --- Dimensions from room-walls.js for positioning ---
const naveWidth = 12;
const naveHeight = 15;
const length = 40;
// --- Ball Properties ---
const ballRadius = 1.0;
const ballColor = 0xffffff; // White light
const lightIntensity = 6.0;
// --- Create the Ball ---
const ballGeometry = new THREE.SphereGeometry(ballRadius, 32, 32);
const ballMaterial = new THREE.MeshBasicMaterial({ color: ballColor, emissive: ballColor, emissiveIntensity: 1.0 });
this.ball = new THREE.Mesh(ballGeometry, ballMaterial);
this.ball.castShadow = false;
this.ball.receiveShadow = false;
// --- Create the Light ---
this.light = new THREE.PointLight(ballColor, lightIntensity, length / 2); // Adjust range to cathedral size
this.light.castShadow = true;
this.light.shadow.mapSize.width = 512;
this.light.shadow.mapSize.height = 512;
this.light.shadow.camera.near = 0.1;
this.light.shadow.camera.far = length / 2;
// --- Initial Position ---
this.ball.position.set(0, naveHeight * 0.7, 0); // Near the ceiling
this.light.position.copy(this.ball.position);
state.scene.add(this.ball);
state.scene.add(this.light);
}
update(deltaTime) {
// --- Animate the Ball ---
const time = state.clock.getElapsedTime();
const driftSpeed = 0.5;
const driftAmplitude = 10.0;
this.ball.position.x = Math.sin(time * driftSpeed) * driftAmplitude;
this.ball.position.y = 10 + Math.cos(time * driftSpeed * 1.3) * driftAmplitude * 0.5; // bobbing
this.ball.position.z = Math.cos(time * driftSpeed * 0.7) * driftAmplitude;
this.light.position.copy(this.ball.position);
}
}
new LightBall();

163
party-cathedral/src/scene/magic-mirror.js
View File

@ -1,163 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { screenVertexShader, screenFragmentShader } from '../shaders/screen-shaders.js';
export function createMagicMirror(x, z, rotY) {
// --- Materials ---
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513, shininess: 40, specular: 0x333333 });
const metalMaterial = new THREE.MeshPhongMaterial({ color: 0xd4af37, shininess: 100, specular: 0xeeeeff }); // Gold-like
const mirrorGroup = new THREE.Group();
// --- 1. Mirror Stand Base ---
const baseWidth = 1.5;
const baseHeight = 0.2;
const baseDepth = 0.6;
const baseGeo = new THREE.BoxGeometry(baseWidth, baseHeight, baseDepth);
const base = new THREE.Mesh(baseGeo, frameMaterial);
base.position.y = baseHeight / 2;
base.castShadow = true;
base.receiveShadow = true;
mirrorGroup.add(base);
// --- 2. Stand Uprights ---
const uprightHeight = 2.4;
const uprightWidth = 0.15;
const uprightGeo = new THREE.BoxGeometry(uprightWidth, uprightHeight, uprightWidth);
const createUpright = (posX) => {
const upright = new THREE.Mesh(uprightGeo, frameMaterial);
upright.position.set(posX, uprightHeight / 2, 0);
upright.castShadow = true;
upright.receiveShadow = true;
return upright;
};
const uprightOffset = baseWidth / 2 - 0.3;
mirrorGroup.add(createUpright(-uprightOffset));
mirrorGroup.add(createUpright(uprightOffset));
// --- 3. The Elliptical Mirror Surface (The "Screen") ---
const mirrorRadius = 0.8; // Adjusted radius for scaling
const mirrorGeo = new THREE.CircleGeometry(mirrorRadius, 64);
// --- 3a. The permanent reflective mirror surface ---
const mirrorBackMaterial = new THREE.MeshPhongMaterial({
color: 0x051020, // Dark blue tint
shininess: 100,
specular: 0xcccccc,
envMap: state.scene.background, // Reflect the room
reflectivity: 0.9 // Increased reflectivity
});
const mirrorBack = new THREE.Mesh(mirrorGeo, mirrorBackMaterial);
mirrorBack.position.y = 1.4; // Center height
mirrorBack.position.z = 0.1; // Slightly forward in the frame
mirrorBack.scale.set(1, 1.5, 1); // Scale Y to make it a tall ellipse
mirrorGroup.add(mirrorBack);
// --- 3b. The video surface that appears when playing ---
// This is what state.tvScreen will now refer to
state.tvScreen = new THREE.Mesh(mirrorGeo, new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 }));
state.tvScreen.position.copy(mirrorBack.position);
state.tvScreen.position.z += 0.01; // Place it just in front of the reflective surface
state.tvScreen.scale.copy(mirrorBack.scale);
state.tvScreen.visible = false; // Start invisible
mirrorGroup.add(state.tvScreen);
// --- 4. Ornate Elliptical Mirror Frame (Torus) ---
const frameRadius = mirrorRadius;
const frameTubeRadius = 0.04; // Made the rim thinner
const frameRingGeo = new THREE.TorusGeometry(frameRadius, frameTubeRadius, 16, 100);
const frameRing = new THREE.Mesh(frameRingGeo, metalMaterial);
frameRing.position.copy(state.tvScreen.position);
frameRing.scale.copy(state.tvScreen.scale); // Apply the same scale to the frame
frameRing.castShadow = true;
mirrorGroup.add(frameRing);
// --- 5. Light from the Mirror ---
state.screenLight = new THREE.PointLight(0xffffff, 0, 10);
state.screenLight.position.copy(state.tvScreen.position);
state.screenLight.position.z += 0.3; // Position light in front of the mirror
state.screenLight.castShadow = true;
state.screenLight.shadow.mapSize.width = 1024;
state.screenLight.shadow.mapSize.height = 1024;
state.screenLight.shadow.camera.near = 0.2;
state.screenLight.shadow.camera.far = 5;
//mirrorGroup.add(state.screenLight);
// Position and rotate the entire group
mirrorGroup.position.set(x, 0, z);
mirrorGroup.rotation.y = rotY;
state.scene.add(mirrorGroup);
}
export function turnTvScreenOff() {
if (state.tvScreenPowered) {
state.tvScreenPowered = false;
setScreenEffect(2, () => {
state.tvScreen.visible = false; // Hide the video surface on completion
state.screenLight.intensity = 0.0;
}); // Trigger power down effect
}
}
export function turnTvScreenOn() {
if (state.tvScreen.material) {
state.tvScreen.material.dispose();
}
state.tvScreen.visible = true; // Make the video surface visible
// Use the shader material for video playback
state.tvScreen.material = new THREE.ShaderMaterial({
uniforms: {
videoTexture: { value: state.videoTexture },
u_effect_type: { value: 0.0 },
u_effect_strength: { value: 0.0 },
u_time: { value: 0.0 },
},
vertexShader: screenVertexShader,
fragmentShader: screenFragmentShader,
transparent: true,
});
state.tvScreen.material.needsUpdate = true;
if (!state.tvScreenPowered) {
state.tvScreenPowered = true;
setScreenEffect(1); // Trigger power on effect
}
}
export function setScreenEffect(effectType, onComplete) {
const material = state.tvScreen.material;
if (!material.uniforms) return;
state.screenEffect.active = true;
state.screenEffect.type = effectType;
state.screenEffect.startTime = state.clock.getElapsedTime() * 1000;
state.screenEffect.onComplete = onComplete;
}
export function updateScreenEffect() {
if (!state.screenEffect.active) return;
const material = state.tvScreen.material;
if (!material.uniforms) return;
const elapsedTime = (state.clock.getElapsedTime() * 1000) - state.screenEffect.startTime;
const progress = Math.min(elapsedTime / state.screenEffect.duration, 1.0);
const easedProgress = state.screenEffect.easing(progress);
material.uniforms.u_effect_type.value = state.screenEffect.type;
material.uniforms.u_effect_strength.value = easedProgress;
if (progress >= 1.0) {
state.screenEffect.active = false;
material.uniforms.u_effect_strength.value = (state.screenEffect.type === 2) ? 1.0 : 0.0;
if (state.screenEffect.onComplete) {
state.screenEffect.onComplete();
}
material.uniforms.u_effect_type.value = 0.0;
}
}

220
party-cathedral/src/scene/medieval-musicians.js
View File

@ -1,220 +0,0 @@
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';
// --- Stage dimensions for positioning ---
const stageHeight = 1.5;
const stageDepth = 5;
const length = 40;
// --- Billboard Properties ---
const musicianHeight = 2.5;
const musicianWidth = 2.5;
export class MedievalMusicians extends SceneFeature {
constructor() {
super();
this.musicians = [];
sceneFeatureManager.register(this);
}
init() {
// Load the texture and create the material inside the callback
state.loader.load(musiciansTextureUrl, (texture) => {
// 1. Draw texture to canvas to process it
const image = texture.image;
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
// 2. Get the key color from the top-left pixel
const keyPixelData = context.getImageData(0, 0, 1, 1).data;
const keyColor = { r: keyPixelData[0], g: keyPixelData[1], b: keyPixelData[2] };
// 3. Process the entire canvas to make background transparent
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const threshold = 20; // Adjust this for more/less color tolerance
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const distance = Math.sqrt(Math.pow(r - keyColor.r, 2) + Math.pow(g - keyColor.g, 2) + Math.pow(b - keyColor.b, 2));
if (distance < threshold) {
data[i + 3] = 0; // Set alpha to 0 (transparent)
}
}
context.putImageData(imageData, 0, 0);
// 4. Create a new texture from the modified canvas
const processedTexture = new THREE.CanvasTexture(canvas);
// 5. Create a standard material with the new texture
const material = 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,
});
// 6. Create and position the musicians
const geometry = new THREE.PlaneGeometry(musicianWidth, musicianHeight);
const musicianPositions = [
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),
];
musicianPositions.forEach(pos => {
const musician = new THREE.Mesh(geometry, material);
musician.position.copy(pos);
state.scene.add(musician);
// Store musician object with state for animation
this.musicians.push({
mesh: musician,
// --- State for complex movement ---
currentPlane: 'stage', // 'stage' or 'floor'
state: 'WAITING',
targetPosition: pos.clone(),
waitStartTime: 0,
waitTime: 1 + Math.random() * 2, // Wait 1-3 seconds
jumpStartPos: null,
jumpEndPos: null,
jumpProgress: 0,
// --- State for jumping in place ---
isJumping: false,
jumpStartTime: 0,
});
});
});
}
update(deltaTime) {
// Billboard effect: make each musician face the camera
if (this.musicians.length > 0) {
const cameraPosition = new THREE.Vector3();
state.camera.getWorldPosition(cameraPosition);
const time = state.clock.getElapsedTime();
const moveSpeed = 2.0;
const stageArea = { x: 10, z: 4, y: stageHeight, centerZ: -length / 2 + stageDepth / 2 };
const floorArea = { x: 10, z: 4, y: 0, centerZ: -length / 2 + stageDepth + 2 };
const planeEdgeZ = -length / 2 + stageDepth;
const planeJumpChance = 0.1;
const jumpChance = 0.005;
const jumpDuration = 0.5;
const jumpHeight = 2.0;
this.musicians.forEach(musicianObj => {
const { mesh } = musicianObj;
// We only want to rotate on the Y axis to keep them upright
mesh.lookAt(cameraPosition.x, mesh.position.y, cameraPosition.z);
// --- Main State Machine ---
const area = musicianObj.currentPlane === 'stage' ? stageArea : floorArea;
const otherArea = musicianObj.currentPlane === 'stage' ? floorArea : stageArea;
if (musicianObj.state === 'WAITING') {
if (time > musicianObj.waitStartTime + musicianObj.waitTime) {
if (Math.random() < planeJumpChance) {
// --- 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);
} else {
// --- Decide to move to a new spot on the current plane ---
const newTarget = new THREE.Vector3(
(Math.random() - 0.5) * area.x,
area.y + musicianHeight/2,
area.centerZ + (Math.random() - 0.5) * area.z
);
musicianObj.targetPosition = newTarget;
musicianObj.state = 'MOVING';
}
}
} else if (musicianObj.state === 'MOVING') {
const distance = mesh.position.distanceTo(musicianObj.targetPosition);
if (distance > 0.1) {
const direction = musicianObj.targetPosition.clone().sub(mesh.position).normalize();
mesh.position.add(direction.multiplyScalar(moveSpeed * deltaTime));
} else {
musicianObj.state = 'WAITING';
musicianObj.waitStartTime = time;
musicianObj.waitTime = 1 + Math.random() * 2;
}
} else if (musicianObj.state === 'PREPARING_JUMP') {
const distance = mesh.position.distanceTo(musicianObj.targetPosition);
if (distance > 0.1) {
const direction = musicianObj.targetPosition.clone().sub(mesh.position).normalize();
mesh.position.add(direction.multiplyScalar(moveSpeed * deltaTime));
} else {
// --- Arrived at edge, start the plane jump ---
musicianObj.state = 'JUMPING_PLANE';
musicianObj.jumpStartPos = mesh.position.clone();
const targetPlane = musicianObj.currentPlane === 'stage' ? 'floor' : 'stage';
const targetArea = targetPlane === 'stage' ? stageArea : floorArea;
musicianObj.jumpEndPos = new THREE.Vector3(
mesh.position.x,
targetArea.y + musicianHeight/2,
planeEdgeZ + (targetPlane === 'stage' ? -1 : 1)
);
musicianObj.targetPosition = musicianObj.jumpEndPos.clone();
musicianObj.currentPlane = targetPlane;
musicianObj.jumpProgress = 0;
}
} else if (musicianObj.state === 'JUMPING_PLANE') {
musicianObj.jumpProgress += deltaTime / jumpDuration;
if (musicianObj.jumpProgress < 1) {
// Determine base height based on which half of the jump we're in
const baseHeight = musicianObj.jumpProgress < 0.5 ? musicianObj.jumpStartPos.y : musicianObj.jumpEndPos.y;
const arcHeight = Math.sin(musicianObj.jumpProgress * Math.PI) * jumpHeight;
// Interpolate horizontal position
const horizontalProgress = musicianObj.jumpProgress;
mesh.position.x = THREE.MathUtils.lerp(musicianObj.jumpStartPos.x, musicianObj.jumpEndPos.x, horizontalProgress);
mesh.position.z = THREE.MathUtils.lerp(musicianObj.jumpStartPos.z, musicianObj.jumpEndPos.z, horizontalProgress);
// Apply vertical arc
mesh.position.y = baseHeight + arcHeight;
} else {
// Landed
mesh.position.copy(musicianObj.jumpEndPos);
musicianObj.state = 'WAITING';
musicianObj.waitStartTime = time;
musicianObj.waitTime = 1 + Math.random() * 2;
}
}
// --- Jumping in place (can happen in any state except during a plane jump) ---
if (musicianObj.isJumping) {
const jumpProgress = (time - musicianObj.jumpStartTime) / jumpDuration;
if (jumpProgress < 1) {
const baseHeight = area.y + musicianHeight/2;
mesh.position.y = baseHeight + Math.sin(jumpProgress * Math.PI) * jumpHeight;
} else {
musicianObj.isJumping = false;
mesh.position.y = area.y + musicianHeight / 2;
}
} else {
if (Math.random() < jumpChance && musicianObj.state !== 'JUMPING_PLANE' && musicianObj.state !== 'PREPARING_JUMP') {
musicianObj.isJumping = true;
musicianObj.jumpStartTime = time;
}
}
});
}
}
}
new MedievalMusicians();

91
party-cathedral/src/scene/pews.js
View File

@ -1,91 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { SceneFeature } from './SceneFeature.js';
import sceneFeatureManager from './SceneFeatureManager.js';
import woodTextureUrl from '/textures/wood.png';
export class Pews extends SceneFeature {
constructor() {
super();
sceneFeatureManager.register(this);
}
init() {
// --- Dimensions from room-walls.js for positioning ---
const length = 40;
const naveWidth = 12;
const aisleWidth = 6;
// --- Pew Properties ---
const pewLength = aisleWidth - 2.5; // A bit shorter than the aisle is wide
const seatDepth = 0.5;
const seatHeight = 0.5;
const backHeight = 1.0;
const numPewsPerSide = 15;
const pewSpacing = (length - 10) / numPewsPerSide; // Leave space at the front and back
// --- Material ---
const woodTexture = state.loader.load(woodTextureUrl);
const woodMaterial = new THREE.MeshStandardMaterial({
map: woodTexture,
roughness: 0.8,
metalness: 0.1,
});
// --- Reusable Pew Model ---
const createPew = () => {
const pewGroup = new THREE.Group();
// Seat
const seatGeo = new THREE.BoxGeometry(pewLength, seatDepth, 0.1);
const seat = new THREE.Mesh(seatGeo, woodMaterial);
seat.rotation.x = Math.PI / 2;
seat.position.set(0, seatHeight, 0);
pewGroup.add(seat);
// Backrest
const backGeo = new THREE.BoxGeometry(pewLength, backHeight, 0.1);
const backrest = new THREE.Mesh(backGeo, woodMaterial);
backrest.position.set(0, seatHeight + backHeight / 2, -seatDepth / 2);
pewGroup.add(backrest);
// Side Supports
const supportHeight = seatHeight + backHeight;
const supportDepth = seatDepth + 0.1;
const supportGeo = new THREE.BoxGeometry(0.1, supportHeight, supportDepth);
const leftSupport = new THREE.Mesh(supportGeo, woodMaterial);
leftSupport.position.set(-pewLength / 2, supportHeight / 2, -supportDepth / 2 + 0.1);
const rightSupport = new THREE.Mesh(supportGeo, woodMaterial);
rightSupport.position.set(pewLength / 2, supportHeight / 2, -supportDepth / 2 + 0.1);
pewGroup.add(leftSupport, rightSupport);
pewGroup.traverse(child => {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
return pewGroup;
};
// --- Place Pews in Aisles ---
for (let i = 0; i < numPewsPerSide; i++) {
const z = -length / 2 + 8 + (i * pewSpacing);
// Left Aisle
const pewLeft = createPew();
pewLeft.position.set(-naveWidth / 2 - aisleWidth / 2, 0, z);
pewLeft.rotation.y = Math.PI; // Turn around 180 degrees
state.scene.add(pewLeft);
// Right Aisle
const pewRight = createPew();
pewRight.position.set(naveWidth / 2 + aisleWidth / 2, 0, z);
pewRight.rotation.y = Math.PI; // Turn around 180 degrees
state.scene.add(pewRight);
}
}
}
new Pews();

156
party-cathedral/src/scene/room-walls.js
View File

@ -1,156 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import wallTextureUrl from '/textures/stone_wall.png';
import sceneFeatureManager from './SceneFeatureManager.js';
import { SceneFeature } from './SceneFeature.js';
const length = 40;
export class RoomWalls extends SceneFeature {
constructor() {
super();
sceneFeatureManager.register(this);
}
init() {
const naveWidth = 12;
const aisleWidth = 6;
const totalWidth = naveWidth + 2 * aisleWidth;
const aisleHeight = 8;
const naveHeight = 15;
const roofPeakHeight = 6; // Additional height for the nave's vaulted roof peak
// --- Pillar and Arch Dimensions ---
const pillarSize = 1.0;
const pillarHeight = aisleHeight;
const numPillars = 5; // Number of pillars along each side
const pillarSpacing = length / (numPillars + 1);
// --- Materials and Textures ---
const wallTexture = state.loader.load(wallTextureUrl);
wallTexture.wrapS = THREE.RepeatWrapping;
wallTexture.wrapT = THREE.RepeatWrapping;
const wallMaterial = new THREE.MeshStandardMaterial({
map: wallTexture,
side: THREE.DoubleSide,
shininess: 5,
roughness: 0.2,
metalness: 0.1,
specular: 0x111111
});
// --- Geometry Definitions ---
const pillarGeo = new THREE.BoxGeometry(pillarSize, pillarHeight, pillarSize);
// --- Object Creation Functions ---
const createMesh = (geometry, material, position, rotation = new THREE.Euler()) => {
const mesh = new THREE.Mesh(geometry, material);
mesh.position.copy(position);
mesh.rotation.copy(rotation);
mesh.castShadow = true;
mesh.receiveShadow = true;
state.scene.add(mesh);
return mesh;
};
// --- Build the Cathedral ---
// 1. Back Wall
const backWallGeo = new THREE.PlaneGeometry(totalWidth, aisleHeight);
const backWallMat = wallMaterial.clone();
backWallMat.map = wallTexture.clone();
backWallMat.map.repeat.set(totalWidth / 4, aisleHeight / 4);
createMesh(backWallGeo, backWallMat, new THREE.Vector3(0, aisleHeight / 2, -length / 2));
// 2. Outer Aisle Walls
const outerWallGeo = new THREE.PlaneGeometry(length, aisleHeight);
const outerWallMat = wallMaterial.clone();
outerWallMat.map = wallTexture.clone();
outerWallMat.map.repeat.set(length / 4, aisleHeight / 4);
createMesh(outerWallGeo, outerWallMat, new THREE.Vector3(-totalWidth / 2, aisleHeight / 2, 0), new THREE.Euler(0, Math.PI / 2, 0));
createMesh(outerWallGeo, outerWallMat, new THREE.Vector3(totalWidth / 2, aisleHeight / 2, 0), new THREE.Euler(0, -Math.PI / 2, 0));
// 3. Aisle Roofs (Flat)
const aisleRoofGeo = new THREE.PlaneGeometry(aisleWidth, length);
const aisleRoofMat = wallMaterial.clone();
aisleRoofMat.map = wallTexture.clone();
aisleRoofMat.map.repeat.set(aisleWidth / 4, length / 4);
createMesh(aisleRoofGeo, aisleRoofMat, new THREE.Vector3(-naveWidth / 2 - aisleWidth / 2, aisleHeight, 0), new THREE.Euler(-Math.PI / 2, 0, 0));
createMesh(aisleRoofGeo, aisleRoofMat, new THREE.Vector3(naveWidth / 2 + aisleWidth / 2, aisleHeight, 0), new THREE.Euler(-Math.PI / 2, 0, 0));
// 4. Pillars and Arcades
const arcadeWallHeight = aisleHeight - pillarHeight;
const arcadeWallGeo = new THREE.PlaneGeometry(pillarSpacing - pillarSize, arcadeWallHeight);
const arcadeWallMat = wallMaterial.clone();
arcadeWallMat.map = wallTexture.clone();
arcadeWallMat.map.repeat.set((pillarSpacing - pillarSize) / 4, arcadeWallHeight / 4);
for (let i = 0; i <= numPillars; i++) {
const z = -length / 2 + pillarSpacing * (i + 0.5);
// Add wall sections between pillars
if (i <= numPillars) {
createMesh(arcadeWallGeo, arcadeWallMat, new THREE.Vector3(-naveWidth / 2, pillarHeight + arcadeWallHeight / 2, z));
createMesh(arcadeWallGeo, arcadeWallMat, new THREE.Vector3(naveWidth / 2, pillarHeight + arcadeWallHeight / 2, z));
}
const pillarZ = -length / 2 + pillarSpacing * (i + 1) - pillarSize / 2;
// Left side pillars
createMesh(pillarGeo, wallMaterial, new THREE.Vector3(-naveWidth / 2 - pillarSize, pillarHeight / 2, pillarZ));
// Right side pillars
createMesh(pillarGeo, wallMaterial, new THREE.Vector3(naveWidth / 2 + pillarSize, pillarHeight / 2, pillarZ));
}
// 5. Clerestory (Upper Nave Walls)
const clerestoryHeight = naveHeight - aisleHeight;
const clerestoryGeo = new THREE.PlaneGeometry(length, clerestoryHeight);
const clerestoryMat = wallMaterial.clone();
clerestoryMat.map = wallTexture.clone();
clerestoryMat.map.repeat.set(length / 4, clerestoryHeight / 4);
// Left and Right Clerestory walls
createMesh(clerestoryGeo, clerestoryMat, new THREE.Vector3(-naveWidth / 2, aisleHeight + clerestoryHeight / 2, 0), new THREE.Euler(0, - Math.PI / 2, 0));
createMesh(clerestoryGeo, clerestoryMat, new THREE.Vector3(naveWidth / 2, aisleHeight + clerestoryHeight / 2, 0), new THREE.Euler(0, Math.PI/2, 0));
// Upper part of the back wall (for the nave)
const backClerestoryGeo = new THREE.PlaneGeometry(naveWidth, clerestoryHeight);
const backClerestoryMat = wallMaterial.clone();
backClerestoryMat.map = wallTexture.clone();
backClerestoryMat.map.repeat.set(naveWidth / 4, clerestoryHeight / 4);
createMesh(backClerestoryGeo, backClerestoryMat, new THREE.Vector3(0, aisleHeight + clerestoryHeight / 2, -length / 2));
// 6. Nave's Vaulted Roof
const roofPanelWidth = Math.sqrt(Math.pow(naveWidth / 2, 2) + Math.pow(roofPeakHeight, 2));
const roofAngle = Math.atan2(roofPeakHeight, naveWidth / 2);
const roofGeo = new THREE.PlaneGeometry(roofPanelWidth, length); // Swapped width and length
const roofMat = wallMaterial.clone();
roofMat.map = wallTexture.clone();
roofMat.map.repeat.set(roofPanelWidth / 4, length / 4);
// Left and Right roof panels
createMesh(roofGeo, roofMat,
new THREE.Vector3(-naveWidth / 4, naveHeight + roofPeakHeight / 2, 0),
new THREE.Euler(Math.PI / 2, roofAngle, 0) // Flipped the roof right side up
);
createMesh(roofGeo, roofMat,
new THREE.Vector3(naveWidth / 4, naveHeight + roofPeakHeight / 2, 0),
new THREE.Euler(Math.PI / 2, -roofAngle, 0) // Flipped the roof right side up
);
// 7. Back gable wall (triangle part)
const gableShape = new THREE.Shape();
gableShape.moveTo(-naveWidth / 2, naveHeight);
gableShape.lineTo(naveWidth / 2, naveHeight);
gableShape.lineTo(0, naveHeight + roofPeakHeight);
const gableGeo = new THREE.ShapeGeometry(gableShape);
const gableMat = wallMaterial.clone();
gableMat.map = wallTexture.clone();
gableMat.map.repeat.set(naveWidth / 8, roofPeakHeight / 8);
createMesh(gableGeo, gableMat, new THREE.Vector3(0, 0, -length / 2));
// Note: crawlSurfaces and landingSurfaces might need to be updated if spiders/rats are used.
}
update(deltaTime) {
// Add any per-frame update logic here, if needed
}
}
new RoomWalls();

42
party-cathedral/src/scene/root.js
View File

@ -1,42 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import floorTextureUrl from '/textures/stone_floor.png';
import sceneFeatureManager from './SceneFeatureManager.js';
// Scene Features registered here:
import { RoomWalls } from './room-walls.js';
import { LightBall } from './light-ball.js';
import { Pews } from './pews.js';
import { Stage } from './stage.js';
import { MedievalMusicians } from './medieval-musicians.js';
// Scene Features ^^^
// --- Scene Modeling Function ---
export function createSceneObjects() {
sceneFeatureManager.init();
// --- Materials (MeshPhongMaterial) ---
// --- 1. Floor --- (Resized to match the new cathedral dimensions)
const floorWidth = 24;
const floorLength = 40;
const floorGeometry = new THREE.PlaneGeometry(floorWidth, floorLength);
const floorTexture = state.loader.load(floorTextureUrl);
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(floorWidth / 2, floorLength / 2); // Adjust texture repeat for new size
const floorMaterial = new THREE.MeshPhongMaterial({ map: floorTexture, color: 0xaaaaaa, shininess: 5 });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = 0;
floor.receiveShadow = true;
state.scene.add(floor);
// 3. Lighting (Minimal and focused)
const ambientLight = new THREE.AmbientLight(0x606060, 0.1); // Increased ambient light for a larger space
state.scene.add(ambientLight);
// Add a HemisphereLight for more natural, general illumination in a large space.
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.2);
state.scene.add(hemisphereLight);
}

44
party-cathedral/src/scene/stage.js
View File

@ -1,44 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { SceneFeature } from './SceneFeature.js';
import sceneFeatureManager from './SceneFeatureManager.js';
import woodTextureUrl from '/textures/wood.png';
export class Stage extends SceneFeature {
constructor() {
super();
sceneFeatureManager.register(this);
}
init() {
// --- Dimensions from room-walls.js for positioning ---
const length = 40;
const naveWidth = 12;
// --- Stage Properties ---
const stageWidth = naveWidth - 1; // Slightly narrower than the nave
const stageHeight = 1.5;
const stageDepth = 5;
// --- Material ---
const woodTexture = state.loader.load(woodTextureUrl);
woodTexture.wrapS = THREE.RepeatWrapping;
woodTexture.wrapT = THREE.RepeatWrapping;
woodTexture.repeat.set(stageWidth / 2, stageDepth / 2);
const woodMaterial = new THREE.MeshStandardMaterial({
map: woodTexture,
roughness: 0.8,
metalness: 0.1,
});
// --- Create Stage Mesh ---
const stageGeo = new THREE.BoxGeometry(stageWidth, stageHeight, stageDepth);
const stageMesh = new THREE.Mesh(stageGeo, woodMaterial);
stageMesh.castShadow = true;
stageMesh.receiveShadow = true;
stageMesh.position.set(0, stageHeight / 2, -length / 2 + stageDepth / 2);
state.scene.add(stageMesh);
}
}
new Stage();

147
party-cathedral/src/scene/stained-glass-window.js
View File

@ -1,147 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { SceneFeature } from './SceneFeature.js';
import sceneFeatureManager from './SceneFeatureManager.js';
export class StainedGlass extends SceneFeature {
constructor() {
super();
this.windows = [];
sceneFeatureManager.register(this);
}
init() {
// --- Dimensions from room-walls.js for positioning ---
const length = 40;
const naveWidth = 12;
const aisleWidth = 6;
const totalWidth = naveWidth + 2 * aisleWidth;
const aisleHeight = 8;
// --- Window Properties ---
const windowWidth = 3;
const windowBaseHeight = 5;
const windowArchHeight = 1.5;
const numWindowsPerSide = 4;
const windowSpacing = length / numWindowsPerSide;
// --- Procedural Material ---
const material = new THREE.MeshStandardMaterial({
vertexColors: true, // Use colors assigned to vertices
side: THREE.DoubleSide,
metalness: 0.1, // Glass is not very metallic
roughness: 0.3, // Glass is smooth
clearcoat: 1.0,
emissive: 0x000000, // We will control emissiveness via update
});
// --- Procedural Geometry Generation ---
const createProceduralWindowGeometry = () => {
const segmentsX = 8;
const segmentsY = 12;
const vertices = [];
const colors = [];
const normals = [];
const colorPalette = [
new THREE.Color(0x6A0DAD), // Purple
new THREE.Color(0x00008B), // Dark Blue
new THREE.Color(0xB22222), // Firebrick Red
new THREE.Color(0xFFD700), // Gold
new THREE.Color(0x006400), // Dark Green
new THREE.Color(0x8B0000), // Dark Red
new THREE.Color(0x4B0082), // Indigo
];
const randomnessFactor = 0.4; // How much to vary the normals
const addTriangle = (v1, v2, v3) => {
const color = colorPalette[Math.floor(Math.random() * colorPalette.length)];
vertices.push(v1.x, v1.y, v1.z, v2.x, v2.y, v2.z, v3.x, v3.y, v3.z);
colors.push(color.r, color.g, color.b, color.r, color.g, color.b, color.r, color.g, color.b);
// Calculate the base normal for the flat triangle face
const edge1 = new THREE.Vector3().subVectors(v2, v1);
const edge2 = new THREE.Vector3().subVectors(v3, v1);
const faceNormal = new THREE.Vector3().crossVectors(edge1, edge2).normalize();
// Introduce a random vector to alter the normal
const randomVec = new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
faceNormal.add(randomVec.multiplyScalar(randomnessFactor)).normalize();
// Apply the same randomized normal to all 3 vertices for a faceted look
normals.push(faceNormal.x, faceNormal.y, faceNormal.z, faceNormal.x, faceNormal.y, faceNormal.z, faceNormal.x, faceNormal.y, faceNormal.z);
};
// Create rectangular part
for (let i = 0; i < segmentsX; i++) {
for (let j = 0; j < segmentsY; j++) {
const x = -windowWidth / 2 + (i * windowWidth) / segmentsX;
const y = (j * windowBaseHeight) / segmentsY;
const x2 = x + windowWidth / segmentsX;
const y2 = y + windowBaseHeight / segmentsY;
const v1 = new THREE.Vector3(x, y, 0);
const v2 = new THREE.Vector3(x2, y, 0);
const v3 = new THREE.Vector3(x, y2, 0);
const v4 = new THREE.Vector3(x2, y2, 0);
addTriangle(v1, v2, v3);
addTriangle(v2, v4, v3);
}
}
// Create arch part
const archCenter = new THREE.Vector3(0, windowBaseHeight, 0);
for (let i = 0; i < segmentsX * 2; i++) {
const angle1 = (i / (segmentsX * 2)) * Math.PI;
const angle2 = ((i + 1) / (segmentsX * 2)) * Math.PI;
const v1 = archCenter;
const v2 = new THREE.Vector3(Math.cos(angle1) * -windowWidth / 2, Math.sin(angle1) * windowArchHeight + windowBaseHeight, 0);
const v3 = new THREE.Vector3(Math.cos(angle2) * -windowWidth / 2, Math.sin(angle2) * windowArchHeight + windowBaseHeight, 0);
addTriangle(v1, v2, v3);
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
return geometry;
};
// --- Create and Place Windows ---
const createAndPlaceWindow = (position, rotationY) => {
const geometry = createProceduralWindowGeometry(); // Generate unique geometry for each window
const windowMesh = new THREE.Mesh(geometry, material);
windowMesh.position.copy(position);
windowMesh.rotation.y = rotationY;
state.scene.add(windowMesh);
this.windows.push(windowMesh);
};
for (let i = 0; i < numWindowsPerSide; i++) {
const z = -length / 2 + windowSpacing * (i + 0.5);
const y = 0; // Place them starting from the floor
// Left side
createAndPlaceWindow(new THREE.Vector3(-totalWidth / 2 + 0.01, y, z), Math.PI / 2);
// Right side
createAndPlaceWindow(new THREE.Vector3(totalWidth / 2 - 0.01, y, z), -Math.PI / 2);
}
}
update(deltaTime) {
// Add a subtle pulsing glow to the windows
const pulseSpeed = 0.5;
const minIntensity = 0.5;
const maxIntensity = 0.9;
const intensity = minIntensity + (maxIntensity - minIntensity) * (0.5 * (1 + Math.sin(state.clock.getElapsedTime() * pulseSpeed)));
// To make the glow match the vertex colors, we set the emissive color to white
// and modulate its intensity. The final glow color will be vertexColor * emissive * emissiveIntensity.
this.windows.forEach(w => {
w.material.emissiveIntensity = intensity;
});
}
}
new StainedGlass();

47
party-cathedral/src/scene/table.js
View File

@ -1,47 +0,0 @@
import * as THREE from 'three';
import { state } from '../state.js';
import tableTextureUrl from '/textures/wood.png';
export function createTable(x, y, z, rotY) {
const woodMaterial = new THREE.MeshPhongMaterial({
map: state.loader.load(tableTextureUrl),
shininess: 10,
specular: 0x222222
});
const tableTopGeo = new THREE.BoxGeometry(1.5, 0.1, 0.8);
const tableTop = new THREE.Mesh(tableTopGeo, woodMaterial);
tableTop.position.y = 0.5;
tableTop.castShadow = true;
tableTop.receiveShadow = true;
// Table Legs
const legThickness = 0.1;
const legHeight = 0.5; // Same height as tableTop.position.y
const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
const legOffset = (1.5 / 2) - (legThickness * 1.5); // Half table width - some margin
const depthOffset = (0.8 / 2) - (legThickness * 1.5); // Half table depth - some margin
const createLeg = (lx, lz) => {
const leg = new THREE.Mesh(legGeometry, woodMaterial);
leg.position.set(lx, legHeight / 2, lz);
leg.castShadow = true;
leg.receiveShadow = true;
return leg;
};
const table = new THREE.Group();
table.add(tableTop);
// Add the four legs
table.add(createLeg(-legOffset, depthOffset));
table.add(createLeg(legOffset, depthOffset));
table.add(createLeg(-legOffset, -depthOffset));
table.add(createLeg(legOffset, -depthOffset));
table.position.set(x, y, z);
table.rotation.y = rotY;
state.scene.add(table);
return table;
}

63
party-cathedral/src/shaders/fire-shaders.js
View File

@ -1,63 +0,0 @@
export const fireVertexShader = `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
export const fireFragmentShader = `
varying vec2 vUv;
uniform float u_time;
// 2D Random function
float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}
// 2D Noise function
float noise (in vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));
vec2 u = f*f*(3.0-2.0*f);
return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}
// Fractional Brownian Motion to create more complex noise
float fbm(in vec2 st) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 0.0;
for (int i = 0; i < 4; i++) {
value += amplitude * noise(st);
st *= 2.0;
amplitude *= 0.5;
}
return value;
}
void main() {
vec2 uv = vUv;
float q = fbm(uv * 2.0 - vec2(0.0, u_time * 1.2));
float r = fbm(uv * 2.0 + q + vec2(1.7, 9.2) + vec2(0.0, u_time * -0.3));
float fireAmount = fbm(uv * 2.0 + r + vec2(0.0, u_time * 0.15));
// Shape the fire to rise from the bottom
fireAmount *= (1.0 - uv.y);
vec3 fireColor = mix(vec3(0.9, 0.3, 0.1), vec3(1.0, 0.9, 0.3), fireAmount);
gl_FragColor = vec4(fireColor, fireAmount * 2.0);
}
`;

94
party-cathedral/src/shaders/screen-shaders.js
View File

@ -1,94 +0,0 @@
export const screenVertexShader = `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
export const screenFragmentShader = `
varying vec2 vUv;
uniform sampler2D videoTexture;
uniform float u_effect_type; // 0: none, 1: warmup, 2: powerdown
uniform float u_effect_strength; // 0.0 to 1.0
uniform float u_time;
// 2D Random function
float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}
// 2D Noise function
float noise (vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));
vec2 u = f*f*(3.0-2.0*f);
return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}
void main() {
vec4 finalColor;
// Shimmering edge effect - ALWAYS ON
vec4 videoColor = texture2D(videoTexture, vUv);
// Shimmering edge effect
float dist = distance(vUv, vec2(0.5));
float shimmer = noise(vUv * 20.0 + vec2(u_time * 2.0, 0.0));
float edgeFactor = smoothstep(0.3, 0.5, dist);
vec3 shimmerColor = vec3(0.7, 0.8, 1.0) * shimmer * edgeFactor * 0.5;
vec4 baseColor = vec4(videoColor.rgb + shimmerColor, videoColor.a);
if (u_effect_type < 0.9) {
// normal video
finalColor = baseColor;
} else if (u_effect_type < 1.9) { // "Summon Vision" (Warm-up) effect
// This is now a multi-stage effect controlled by u_effect_strength (0.0 -> 1.0)
float noiseVal = noise(vUv * 50.0 + vec2(0.0, u_time * -125.0));
vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
vec4 videoColor = texture2D(videoTexture, vUv);
// Stage 1: Fade in the mist (u_effect_strength: 0.0 -> 0.5)
// The overall opacity of the surface fades from 0 to 1.
float fadeInOpacity = smoothstep(0.0, 0.5, u_effect_strength);
// Stage 2: Fade out the mist to reveal the video (u_effect_strength: 0.5 -> 1.0)
// The mix factor between mist and video goes from 0 (all mist) to 1 (all video).
float revealMix = smoothstep(0.5, 1.0, u_effect_strength);
vec3 mixedColor = mix(mistColor, baseColor.rgb, revealMix);
finalColor = vec4(mixedColor, fadeInOpacity);
} else { // "Vision Fades" (Power-down) effect
// Multi-stage effect: Last frame -> fade to mist -> fade to transparent
float noiseVal = noise(vUv * 50.0 + vec2(0.0, u_time * 123.0));
vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
vec4 videoColor = texture2D(videoTexture, vUv);
// Stage 1: Fade in the mist over the last frame (u_effect_strength: 0.0 -> 0.5)
float mistMix = smoothstep(0.0, 0.5, u_effect_strength);
vec3 mixedColor = mix(baseColor.rgb, mistColor, mistMix);
// Stage 2: Fade out the entire surface to transparent (u_effect_strength: 0.5 -> 1.0)
float fadeOutOpacity = smoothstep(1.0, 0.5, u_effect_strength);
finalColor = vec4(mixedColor, fadeOutOpacity);
}
gl_FragColor = finalColor;
}
`;

54
party-cathedral/src/state.js
View File

@ -1,54 +0,0 @@
import * as THREE from 'three';
export let state = undefined;
export function initState() {
state = {
// Core Three.js components
scene: null,
camera: null,
renderer: null,
clock: new THREE.Clock(),
tvScreen: null,
tvScreenPowered: false,
videoTexture: null,
screenLight: null, // Light from the crystal ball
candleLight: null, // Light from the candle
effectsManager: null,
screenEffect: {
active: false,
type: 0,
startTime: 0,
duration: 1000, // in ms
onComplete: null,
easing: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t, // easeInOutQuad
},
// Video Playback
isVideoLoaded: false,
videoUrls: [],
currentVideoIndex: -1,
// Scene constants
originalLampIntensity: 0.3,
originalScreenIntensity: 0.2,
screenIntensityPulse: 0.2,
roomSize: 5,
roomHeight: 3,
debugLight: false,
// DOM Elements
container: document.body,
videoElement: document.getElementById('video'),
fileInput: document.getElementById('fileInput'),
loadTapeButton: document.getElementById('loadTapeButton'),
// Utilities
loader: new THREE.TextureLoader(),
pictureFrames: [],
raycaster: new THREE.Raycaster(),
seed: 12345,
};
}

37
party-cathedral/src/utils.js
View File

@ -1,37 +0,0 @@
import * as THREE from 'three';
import { state } from './state.js';
// --- Utility: Random Color (seeded) ---
export function getRandomColor() {
const hue = seededRandom();
const saturation = 0.6 + seededRandom() * 0.4;
const lightness = 0.3 + seededRandom() * 0.4;
return new THREE.Color().setHSL(hue, saturation, lightness).getHex();
}
/**
* Converts degrees to radians.
* @param {number} degrees
* @returns {number}
*/
export function degToRad(degrees) {
return degrees * (Math.PI / 180);
}
// --- Seedable Random Number Generator (Mulberry32) ---
export function seededRandom() {
let t = state.seed += 0x6D2B79F5;
t = Math.imul(t ^ t >>> 15, t | 1);
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
return ((t ^ t >>> 14) >>> 0) / 4294967296;
}
// --- Helper function to format seconds into MM:SS ---
export function formatTime(seconds) {
if (isNaN(seconds) || seconds === Infinity || seconds < 0) return '--:--';
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
const paddedMinutes = String(minutes).padStart(2, '0');
const paddedSeconds = String(remainingSeconds).padStart(2, '0');
return `${paddedMinutes}:${paddedSeconds}`;
}

BIN
party-cathedral/textures/floor.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 MiB

BIN
party-cathedral/textures/musician1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 866 KiB

BIN
party-cathedral/textures/stone_floor.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 MiB

BIN
party-cathedral/textures/stone_wall.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 MiB

BIN
party-cathedral/textures/wall.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 MiB

BIN
party-cathedral/textures/wood.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 MiB

83
party-cathedral/vendor/tailwind-3.4.17.js vendored
View File

File diff suppressed because one or more lines are too long

6
party-cathedral/vendor/three.min.js vendored
View File

File diff suppressed because one or more lines are too long