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

New project: Party cathedral

Browse Source
This commit is contained in:
Dejvino 2025-11-21 19:32:22 +01:00
parent c962f74067
commit 1d4e428bf9
33 changed files with 2348 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
party-cathedral/.gitignore vendored Normal file
View File

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

41
party-cathedral/index.html Normal file
View File

@ -0,0 +1,41 @@
<!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 Normal file
View File

File diff suppressed because it is too large Load Diff

17
party-cathedral/package.json Normal file
View File

@ -0,0 +1,17 @@
{
"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 Executable file
View File

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

3
party-cathedral/serve.sh Executable file
View File

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

88
party-cathedral/src/core/animate.js Normal file
View File

@ -0,0 +1,88 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { updateScreenEffect } from '../scene/magic-mirror.js'
function updateCamera() {
const globalTime = Date.now() * 0.0001;
const lookAtTime = Date.now() * 0.0002;
const camAmplitude = 4.0;
const lookAmplitude = 15.4;
// Base Camera Position in front of the TV
const baseX = 0;
const baseY = 1.6;
const baseZ = 0.0;
// Base LookAt target (Center of the screen)
const baseTargetX = 0;
const baseTargetY = 1.6;
const baseTargetZ = 5.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 * 1.2;
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 * 4;
const lookOffsetZ = Math.cos(lookAtTime * 2.5) * lookAmplitude * 4;
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
// 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 ---
export function animate() {
requestAnimationFrame(animate);
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 Normal file
View File

@ -0,0 +1,62 @@
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 Normal file
View File

@ -0,0 +1,107 @@
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 Normal file
View File

@ -0,0 +1,22 @@
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 Normal file
View File

@ -0,0 +1,47 @@
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 Normal file
View File

@ -0,0 +1,39 @@
// --- 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

5
party-cathedral/src/main.js Normal file
View File

@ -0,0 +1,5 @@
import * as THREE from 'three';
import { init } from './core/init.js';
// Start everything
init();

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

@ -0,0 +1,116 @@
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;
}
}
}

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

@ -0,0 +1,163 @@
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;
}
}

1
party-cathedral/src/scene/medieval-musicians.js Normal file
View File

@ -0,0 +1 @@
// This file will contain the Three.js code for creating and animating the medieval musicians on the stage.

1
party-cathedral/src/scene/pews.js Normal file
View File

@ -0,0 +1 @@
// This file will contain the Three.js code for creating rows of pews (seats) on the sides of the cathedral.

142
party-cathedral/src/scene/room-walls.js Normal file
View File

@ -0,0 +1,142 @@
import * as THREE from 'three';
import { state } from '../state.js';
import wallTextureUrl from '/textures/stone_wall.png';
export function createRoomWalls() {
// --- Cathedral Dimensions ---
const length = 40;
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.MeshPhongMaterial({
map: wallTexture,
side: THREE.DoubleSide,
shininess: 5,
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.
}

34
party-cathedral/src/scene/root.js Normal file
View File

@ -0,0 +1,34 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { createRoomWalls } from './room-walls.js';
import floorTextureUrl from '/textures/stone_floor.png';
// --- Scene Modeling Function ---
export function createSceneObjects() {
// --- 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);
createRoomWalls(); // This will need to be updated to create cathedral walls.
// 3. Lighting (Minimal and focused)
const ambientLight = new THREE.AmbientLight(0x606060, 1.5); // 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.7);
state.scene.add(hemisphereLight);
}

1
party-cathedral/src/scene/stage.js Normal file
View File

@ -0,0 +1 @@
// This file will contain the Three.js code for creating the stage at the front of the cathedral.

1
party-cathedral/src/scene/stained-glass-window.js Normal file
View File

@ -0,0 +1 @@
// This file will contain the Three.js code for creating colorful stained glass windows with light effects.

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

@ -0,0 +1,47 @@
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 Normal file
View File

@ -0,0 +1,63 @@
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 Normal file
View File

@ -0,0 +1,94 @@
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 Normal file
View File

@ -0,0 +1,54 @@
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 Normal file
View File

@ -0,0 +1,37 @@
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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long