Compare commits
No commits in common. "4726b419f421ccf10eef93c7444c3cbe5f27687c" and "3b1421e4e7e4f03e8a717deba8ffb08e4cb612ad" have entirely different histories.
4726b419f4
...
3b1421e4e7
@ -69,7 +69,7 @@ export function createFireplace(x, z, rotY) {
|
|||||||
|
|
||||||
// Lintel (Top Frame)
|
// Lintel (Top Frame)
|
||||||
const lintelWidth = openingWidth + 2 * frameThickness;
|
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);
|
const lintel = new THREE.Mesh(lintelGeo, stoneMaterial);
|
||||||
lintel.position.set(0, hearthHeight + openingHeight + frameThickness / 2, bodyDepth / 2 + frameDepth / 2);
|
lintel.position.set(0, hearthHeight + openingHeight + frameThickness / 2, bodyDepth / 2 + frameDepth / 2);
|
||||||
lintel.castShadow = true;
|
lintel.castShadow = true;
|
||||||
|
|||||||
@ -58,10 +58,10 @@ export class Rat {
|
|||||||
|
|
||||||
export function createRats(x, y, z, rotY) {
|
export function createRats(x, y, z, rotY) {
|
||||||
// --- 9.5 Rat Hole ---
|
// --- 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 holeMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
|
||||||
const ratHole = new THREE.Mesh(holeGeo, holeMat);
|
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;
|
ratHole.rotation.y = rotY;
|
||||||
state.scene.add(ratHole);
|
state.scene.add(ratHole);
|
||||||
|
|
||||||
|
|||||||
2
party-cathedral/.gitignore
vendored
2
party-cathedral/.gitignore
vendored
@ -1,2 +0,0 @@
|
|||||||
node_modules
|
|
||||||
dist
|
|
||||||
@ -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
1069
party-cathedral/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
|
|
||||||
nix-shell -p nodejs --run "npx vite build && npx vite preview"
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
|
|
||||||
nix-shell -p nodejs --run "npx vite"
|
|
||||||
@ -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);
|
|
||||||
}
|
|
||||||
@ -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();
|
|
||||||
}
|
|
||||||
@ -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);
|
|
||||||
}
|
|
||||||
@ -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());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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
|
|
||||||
@ -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();
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
// SceneFeature.js
|
|
||||||
|
|
||||||
export class SceneFeature {
|
|
||||||
init() {}
|
|
||||||
update(deltaTime) {}
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
@ -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();
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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();
|
|
||||||
@ -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();
|
|
||||||
@ -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();
|
|
||||||
@ -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);
|
|
||||||
}
|
|
||||||
@ -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();
|
|
||||||
@ -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();
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -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);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
@ -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,
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -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}`;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 866 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
83
party-cathedral/vendor/tailwind-3.4.17.js
vendored
83
party-cathedral/vendor/tailwind-3.4.17.js
vendored
File diff suppressed because one or more lines are too long
6
party-cathedral/vendor/three.min.js
vendored
6
party-cathedral/vendor/three.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user