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

Initial commit.

Browse Source
This commit is contained in:
Dejvino 2025-11-08 16:05:55 +01:00
commit 9f91635569
21 changed files with 5287 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md Normal file
View File

@ -0,0 +1,5 @@
# Music Video Generator
After I'm done producing a music track, I still need to create a music video for it. Otherwise, I can't upload it to a video sharing site.
This is a library of music video "generators", anything that can be recorded along with a music file to produce a music video. Usually, this means a dynamic HTML page with some kind of dynamic visuals.

BIN
sparkles/img1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
sparkles/img2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
sparkles/img3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
sparkles/img4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
sparkles/img5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

22
sparkles/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Beat Canvas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="beatCanvas"></canvas>
<div id="imageAssets" style="display: none;">
<img id="img1" src="img1.png">
<img id="img2" src="img2.png">
<img id="img3" src="img3.png">
<img id="img4" src="img4.png">
<img id="img5" src="img5.png">
</div>
<script src="script.js"></script>
</body>
</html>

211
sparkles/script.js Normal file
View File

@ -0,0 +1,211 @@
// --- Setup ---
const canvas = document.getElementById('beatCanvas'); // Ensure this ID matches your HTML
const ctx = canvas.getContext('2d');
// --- Configuration ---
const FADE_DURATION = 2000; // 1.5 seconds for fade in/out of background images
const DISPLAY_DURATION = 10000; // 4 seconds of full display time for background images
const TRANSITION_CYCLE = FADE_DURATION + DISPLAY_DURATION; // Total background image cycle length
const NUM_SPARKLES = 100; // How many sparkles to have on screen
const SPARKLE_SIZE_MIN = 5; // Min radius for a sparkle
const SPARKLE_SIZE_MAX = 20; // Max radius for a sparkle
const SPARKLE_SPEED_MIN = 0.1; // Min speed for sparkle movement
const SPARKLE_SPEED_MAX = 0.5; // Max speed for sparkle movement
const SPARKLE_FADE_SPEED = 0.002; // How quickly sparkles fade in/out per frame (adjust for desired effect)
// --- Global Pulse Configuration ---
const BEAT_INTERVAL = 500; // 120 BPM = 500ms per beat
let lastBeatTime = 0;
let beatPulse = 0; // 0 to 1, indicates how far into the current beat we are
const PULSE_DECAY = 0.03; // How quickly the pulse effect fades after the beat hits
const PULSE_STRENGTH = 0.3; // Maximum scale increase (e.g., 30% larger)
let images = []; // Array to hold loaded Image objects for background
let currentImageIndex = 0;
let nextImageIndex = 1;
let cycleStartTime = 0; // Tracks the start time of the current background image display/fade cycle
let sparkles = []; // Array to hold all sparkle objects
// --- Sparkle Class (Pulsating) ---
class Sparkle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
// Store the base radius, which will be scaled in draw()
this.baseRadius = SPARKLE_SIZE_MIN + Math.random() * (SPARKLE_SIZE_MAX - SPARKLE_SIZE_MIN);
this.speedX = (Math.random() - 0.5) * (SPARKLE_SPEED_MAX - SPARKLE_SPEED_MIN) + SPARKLE_SPEED_MIN;
this.speedY = (Math.random() - 0.5) * (SPARKLE_SPEED_MAX - SPARKLE_SPEED_MIN) + SPARKLE_SPEED_MIN;
this.alpha = Math.random();
this.alphaDirection = Math.random() > 0.5 ? 1 : -1;
this.hue = Math.random() * 360;
}
update() {
// Movement
this.x += this.speedX;
this.y += this.speedY;
// Bounce off edges
if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
// Fade in/out
this.alpha += this.alphaDirection * SPARKLE_FADE_SPEED;
if (this.alpha > 1) {
this.alpha = 1;
this.alphaDirection = -1;
} else if (this.alpha < 0) {
this.alpha = 0;
this.alphaDirection = 1;
}
}
draw() {
// Calculate the current pulsating radius based on global beatPulse
const currentRadius = this.baseRadius * (1 + beatPulse * PULSE_STRENGTH);
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.fillStyle = `hsl(${this.hue}, 100%, 75%)`;
ctx.arc(this.x, this.y, currentRadius, 0, Math.PI * 2);
ctx.fill();
ctx.globalAlpha = 1;
}
}
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// When canvas resizes, re-initialize sparkles to match new dimensions
sparkles = []; // Clear existing sparkles
for (let i = 0; i < NUM_SPARKLES; i++) {
sparkles.push(new Sparkle());
}
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas(); // Initial call to set canvas size and create initial sparkles
// Load background images from the hidden div
const imageElements = Array.from(document.querySelectorAll('#imageAssets img'));
let imagesLoadedCount = 0;
imageElements.forEach(imgEl => {
const img = new Image();
img.src = imgEl.src;
img.onload = () => {
images.push(img);
imagesLoadedCount++;
if (imagesLoadedCount === imageElements.length) {
if (images.length < 2) {
console.error("Need at least two images for a fade transition.");
return;
}
nextImageIndex = (currentImageIndex + 1) % images.length;
requestAnimationFrame(animate); // Start animation once backgrounds are ready
}
};
img.onerror = () => {
console.error("Failed to load image:", imgEl.src);
};
});
if (imageElements.length === 0) {
console.error("No images found in the #imageAssets div. Please check your HTML and paths.");
}
// Function to draw an image to cover the entire canvas without stretching.
function drawImageCover(image, alpha = 1) {
if (!image) return;
ctx.globalAlpha = alpha;
const imgAspectRatio = image.width / image.height;
const canvasAspectRatio = canvas.width / canvas.height;
let sx, sy, sWidth, sHeight;
let dx, dy, dWidth, dHeight;
if (imgAspectRatio > canvasAspectRatio) {
sHeight = image.height;
sWidth = image.height * canvasAspectRatio;
sx = (image.width - sWidth) / 2;
sy = 0;
} else {
sWidth = image.width;
sHeight = image.width / canvasAspectRatio;
sx = 0;
sy = (image.height - sHeight) / 2;
}
dx = 0;
dy = 0;
dWidth = canvas.width;
dHeight = canvas.height;
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.globalAlpha = 1; // Reset alpha
}
// --- Main Animation Loop (Updated) ---
function animate(currentTime) {
requestAnimationFrame(animate);
// 1. Clear the canvas for a fresh frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
// --- Background Image Fading Logic ---
if (images.length >= 2) {
if (cycleStartTime === 0) {
cycleStartTime = currentTime;
}
const elapsedTimeInCycle = currentTime - cycleStartTime;
if (elapsedTimeInCycle < DISPLAY_DURATION) {
drawImageCover(images[currentImageIndex], 1);
} else if (elapsedTimeInCycle < TRANSITION_CYCLE) {
const fadeTime = elapsedTimeInCycle - DISPLAY_DURATION;
const fadeProgress = fadeTime / FADE_DURATION;
const alphaCurrent = 1 - fadeProgress;
const alphaNext = fadeProgress;
drawImageCover(images[nextImageIndex], alphaNext);
drawImageCover(images[currentImageIndex], alphaCurrent);
} else {
currentImageIndex = nextImageIndex;
nextImageIndex = (currentImageIndex + 1) % images.length;
cycleStartTime = currentTime;
drawImageCover(images[currentImageIndex], 1);
}
} else if (images.length === 1) {
// If only one image, just display it
drawImageCover(images[0], 1);
}
// 3. Beat Pulse Logic (Controls sparkle pulsation)
if (currentTime - lastBeatTime >= BEAT_INTERVAL) {
lastBeatTime = currentTime;
beatPulse = 1; // Beat hits!
}
beatPulse = Math.max(0, beatPulse - PULSE_DECAY); // Decay the pulse
// --- Sparkle Animation Logic (on top of background) ---
sparkles.forEach(sparkle => {
sparkle.update();
sparkle.draw();
});
}
window.onload = () => {
// Animation starts after background images are loaded
};

11
sparkles/style.css Normal file
View File

@ -0,0 +1,11 @@
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
#beatCanvas {
display: block;
width: 100vw;
height: 100vh;
}

310
tv-player/bugs.html Normal file
View File

@ -0,0 +1,310 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gloomy Room Shadow Scene</title>
<!-- Load Tailwind CSS for utility styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Load Three.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
/* Custom styles for the 3D canvas */
body {
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
background-color: #0d0d10; /* Very dark background */
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="info" class="absolute top-4 left-1/2 transform -translate-x-1/2 p-2 bg-gray-900 bg-opacity-70 text-white rounded-lg shadow-xl text-xs sm:text-sm z-10">
Bugs scattering in a gloomy, shadow-casting room. (Use mouse to look around)
</div>
<script>
// --- Global Variables ---
let scene, camera, renderer;
let ambientLight, lampLight, lampMesh;
let pointer = new THREE.Vector2();
let targetRotation = { x: 0, y: 0 };
const BUGS_COUNT = 30;
const bugs = [];
const floorHeight = 0;
// --- Configuration ---
const ROOM_SIZE = 15;
const LAMP_HEIGHT = 4;
const BUG_SPEED = 0.005;
const DAMPING_FACTOR = 0.05;
// --- Utility Functions ---
/**
* Converts degrees to radians.
* @param {number} degrees
* @returns {number}
*/
function degToRad(degrees) {
return degrees * (Math.PI / 180);
}
/**
* Initializes the Three.js scene, camera, and renderer.
*/
function init() {
// 1. Scene Setup
scene = new THREE.Scene();
scene.background = new THREE.Color(0x101015);
// 2. Renderer Setup (Enable Shadows)
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
document.body.appendChild(renderer.domElement);
// 3. Camera Setup (First-person perspective near the floor)
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.5, 5); // Stand a bit above the floor, facing into the room
camera.lookAt(0, 1.5, 0);
// 4. Lighting Setup
setupLighting();
// 5. Environment Setup
setupRoom();
setupTable();
// 6. Bugs Setup
setupBugs();
// 7. Event Listeners
window.addEventListener('resize', onWindowResize);
document.addEventListener('mousemove', onMouseMove);
console.log("Three.js Scene Initialized.");
animate();
}
/**
* Sets up the lighting: Ambient and the central PointLight (lamp).
*/
function setupLighting() {
// Very dim ambient light for general visibility
ambientLight = new THREE.AmbientLight(0x444444, 0.5);
scene.add(ambientLight);
// Point Light (The Lamp)
const lampColor = 0xffe9a0; // Warm, dim color
const lampIntensity = 1.8;
const lampDistance = 15;
lampLight = new THREE.PointLight(lampColor, lampIntensity, lampDistance);
lampLight.position.set(0, LAMP_HEIGHT, 0);
// Enable shadow casting for the lamp
lampLight.castShadow = true;
// Configure shadow camera properties for better shadow quality
lampLight.shadow.mapSize.width = 1024;
lampLight.shadow.mapSize.height = 1024;
lampLight.shadow.camera.near = 0.5;
lampLight.shadow.camera.far = 10;
lampLight.shadow.bias = -0.0001; // Tiny bias to prevent shadow artifacts
scene.add(lampLight);
// Visual mesh for the light source (the bulb)
const bulbGeometry = new THREE.SphereGeometry(0.1, 8, 8);
const bulbMaterial = new THREE.MeshBasicMaterial({ color: lampColor });
lampMesh = new THREE.Mesh(bulbGeometry, bulbMaterial);
lampMesh.position.copy(lampLight.position);
scene.add(lampMesh);
}
/**
* Sets up the room (walls and floor).
*/
function setupRoom() {
const wallMaterial = new THREE.MeshPhongMaterial({
color: 0x333333,
side: THREE.BackSide, // Render walls from the inside
shininess: 5,
});
// Floor
const floorGeometry = new THREE.PlaneGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2);
const floorMesh = new THREE.Mesh(floorGeometry, wallMaterial);
floorMesh.rotation.x = degToRad(-90);
floorMesh.position.y = floorHeight;
floorMesh.receiveShadow = true;
scene.add(floorMesh);
// Walls (Simple box around the camera position)
const wallGeometry = new THREE.BoxGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2, ROOM_SIZE * 2);
const wallsMesh = new THREE.Mesh(wallGeometry, wallMaterial);
wallsMesh.position.y = ROOM_SIZE; // Center the box vertically
wallsMesh.receiveShadow = true;
scene.add(wallsMesh);
}
/**
* Adds a simple table object for more complex shadows.
*/
function setupTable() {
const tableMaterial = new THREE.MeshPhongMaterial({
color: 0x5a3d2b, // Dark wood color
shininess: 10,
});
// Table top
const tableTop = new THREE.Mesh(
new THREE.BoxGeometry(3, 0.1, 1.5),
tableMaterial
);
tableTop.position.set(2, 1.5 + 0.05, 0);
tableTop.castShadow = true;
tableTop.receiveShadow = true;
scene.add(tableTop);
// Table legs (using a loop for simplicity)
const legGeometry = new THREE.BoxGeometry(0.1, 1.5, 0.1);
const positions = [
[3.4, 0.75, 0.65], [-0.4, 0.75, 0.65],
[3.4, 0.75, -0.65], [-0.4, 0.75, -0.65]
];
positions.forEach(pos => {
const leg = new THREE.Mesh(legGeometry, tableMaterial);
leg.position.set(pos[0], pos[1], pos[2]);
leg.castShadow = true;
leg.receiveShadow = true;
scene.add(leg);
});
}
/**
* Creates and places the 'bugs' meshes.
*/
function setupBugs() {
const bugGeometry = new THREE.BoxGeometry(0.1, 0.05, 0.15); // Simple block bug
const bugMaterial = new THREE.MeshPhongMaterial({
color: 0x0a0a0a, // Almost black
shininess: 20,
});
for (let i = 0; i < BUGS_COUNT; i++) {
const bug = new THREE.Mesh(bugGeometry, bugMaterial);
// Random position within the room limits
bug.position.x = (Math.random() - 0.5) * (ROOM_SIZE - 2);
bug.position.z = (Math.random() - 0.5) * (ROOM_SIZE - 2);
bug.position.y = floorHeight + 0.025; // Resting on the floor
// Random initial rotation
bug.rotation.y = Math.random() * Math.PI * 2;
// Enable shadow casting
bug.castShadow = true;
bug.receiveShadow = true;
// Add velocity/state data to the bug object
bug.velocity = new THREE.Vector3(
(Math.random() - 0.5) * BUG_SPEED,
0,
(Math.random() - 0.5) * BUG_SPEED
);
scene.add(bug);
bugs.push(bug);
}
}
/**
* Main animation loop.
*/
function animate() {
requestAnimationFrame(animate);
// Update bug positions and rotation
bugs.forEach(bug => {
// Apply current velocity
bug.position.add(bug.velocity);
// Simple collision detection with room boundaries (bounce back)
const limit = ROOM_SIZE / 2 - 0.2;
if (bug.position.x > limit || bug.position.x < -limit) {
bug.velocity.x *= -1;
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
}
if (bug.position.z > limit || bug.position.z < -limit) {
bug.velocity.z *= -1;
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
}
// Small random change in direction for erratic movement (like a real bug)
bug.velocity.x += (Math.random() - 0.5) * 0.0005;
bug.velocity.z += (Math.random() - 0.5) * 0.0005;
// Clamp velocity to prevent running too fast
bug.velocity.clampLength(0, BUG_SPEED * 1.5);
// Smooth rotation towards the direction of travel
const targetYRotation = Math.atan2(bug.velocity.x, bug.velocity.z);
bug.rotation.y += (targetYRotation - bug.rotation.y) * 0.1;
});
// Camera Look Around (Dampened rotation)
camera.rotation.y += (targetRotation.y - camera.rotation.y) * DAMPING_FACTOR;
renderer.render(scene, camera);
}
// --- Event Handlers ---
/**
* Handles window resize to maintain aspect ratio and prevent distortion.
*/
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
/**
* Handles mouse movement to control the camera's rotation (look around).
* @param {MouseEvent} event
*/
function onMouseMove(event) {
// Calculate normalized device coordinates (-1 to +1)
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
// Simple map of mouse position to target rotation angles
targetRotation.y = -pointer.x * degToRad(30);
// targetRotation.x = -pointer.y * degToRad(10); // Disabled X rotation for a simpler floor-view
}
// Wait for the window to load before initializing the 3D scene
window.onload = function() {
try {
init();
} catch (e) {
console.error("Three.js initialization failed:", e);
document.body.innerHTML = `
<div class="flex items-center justify-center h-screen bg-gray-900 text-white">
<p class="text-xl p-4 bg-red-700 rounded-lg">Error loading 3D scene. Console has more details.</p>
</div>
`;
}
};
</script>
</body>
</html>

381
tv-player/bugs_v2.html Normal file
View File

@ -0,0 +1,381 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gloomy Room Shadow Scene</title>
<!-- Load Tailwind CSS for utility styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Load Three.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
/* Custom styles for the 3D canvas */
body {
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
background-color: #0d0d10; /* Very dark background */
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="info" class="absolute top-4 left-1/2 transform -translate-x-1/2 p-2 bg-gray-900 bg-opacity-70 text-white rounded-lg shadow-xl text-xs sm:text-sm z-10">
Spiders scattering in a gloomy, shadow-casting room. (Use mouse to look around)
</div>
<script>
// --- Global Variables ---
let scene, camera, renderer;
let ambientLight, lampLight, lampMesh;
let pointer = new THREE.Vector2();
let targetRotation = { x: 0, y: 0 };
const BUGS_COUNT = 30;
const bugs = [];
const floorHeight = 0;
// --- Configuration ---
const ROOM_SIZE = 15;
const LAMP_HEIGHT = 4;
const BUG_SPEED = 0.007; // Slightly faster for the larger bugs
const DAMPING_FACTOR = 0.05;
// --- Utility Functions ---
/**
* Converts degrees to radians.
* @param {number} degrees
* @returns {number}
*/
function degToRad(degrees) {
return degrees * (Math.PI / 180);
}
/**
* Initializes the Three.js scene, camera, and renderer.
*/
function init() {
// 1. Scene Setup
scene = new THREE.Scene();
scene.background = new THREE.Color(0x101015);
// 2. Renderer Setup (Enable Shadows)
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
document.body.appendChild(renderer.domElement);
// 3. Camera Setup (First-person perspective near the floor)
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.5, 5); // Stand a bit above the floor, facing into the room
camera.lookAt(0, 1.5, 0);
// 4. Lighting Setup
setupLighting();
// 5. Environment Setup
setupRoom();
setupTable();
// 6. Bugs Setup
setupBugs();
// 7. Event Listeners
window.addEventListener('resize', onWindowResize);
document.addEventListener('mousemove', onMouseMove);
console.log("Three.js Scene Initialized.");
animate();
}
/**
* Sets up the lighting: Ambient and the central PointLight (lamp).
*/
function setupLighting() {
// Very dim ambient light for general visibility
ambientLight = new THREE.AmbientLight(0x444444, 0.5);
scene.add(ambientLight);
// Point Light (The Lamp)
const lampColor = 0xffe9a0; // Warm, dim color
const lampIntensity = 1.8;
const lampDistance = 15;
lampLight = new THREE.PointLight(lampColor, lampIntensity, lampDistance);
lampLight.position.set(0, LAMP_HEIGHT, 0);
// Enable shadow casting for the lamp
lampLight.castShadow = true;
// Configure shadow camera properties for better shadow quality
lampLight.shadow.mapSize.width = 1024;
lampLight.shadow.mapSize.height = 1024;
lampLight.shadow.camera.near = 0.5;
lampLight.shadow.camera.far = 10;
lampLight.shadow.bias = -0.0001; // Tiny bias to prevent shadow artifacts
scene.add(lampLight);
// Visual mesh for the light source (the bulb)
const bulbGeometry = new THREE.SphereGeometry(0.1, 8, 8);
const bulbMaterial = new THREE.MeshBasicMaterial({ color: lampColor });
lampMesh = new THREE.Mesh(bulbGeometry, bulbMaterial);
lampMesh.position.copy(lampLight.position);
scene.add(lampMesh);
}
/**
* Sets up the room (walls and floor).
*/
function setupRoom() {
const wallMaterial = new THREE.MeshPhongMaterial({
color: 0x333333,
side: THREE.BackSide, // Render walls from the inside
shininess: 5,
});
// Floor
const floorGeometry = new THREE.PlaneGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2);
const floorMesh = new THREE.Mesh(floorGeometry, wallMaterial);
floorMesh.rotation.x = degToRad(-90);
floorMesh.position.y = floorHeight;
floorMesh.receiveShadow = true;
scene.add(floorMesh);
// Walls (Simple box around the camera position)
const wallGeometry = new THREE.BoxGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2, ROOM_SIZE * 2);
const wallsMesh = new THREE.Mesh(wallGeometry, wallMaterial);
wallsMesh.position.y = ROOM_SIZE; // Center the box vertically
wallsMesh.receiveShadow = true;
scene.add(wallsMesh);
}
/**
* Adds a simple table object for more complex shadows.
*/
function setupTable() {
const tableMaterial = new THREE.MeshPhongMaterial({
color: 0x5a3d2b, // Dark wood color
shininess: 10,
});
// Table top
const tableTop = new THREE.Mesh(
new THREE.BoxGeometry(3, 0.1, 1.5),
tableMaterial
);
tableTop.position.set(2, 1.5 + 0.05, 0);
tableTop.castShadow = true;
tableTop.receiveShadow = true;
scene.add(tableTop);
// Table legs (using a loop for simplicity)
const legGeometry = new THREE.BoxGeometry(0.1, 1.5, 0.1);
const positions = [
[3.4, 0.75, 0.65], [-0.4, 0.75, 0.65],
[3.4, 0.75, -0.65], [-0.4, 0.75, -0.65]
];
positions.forEach(pos => {
const leg = new THREE.Mesh(legGeometry, tableMaterial);
leg.position.set(pos[0], pos[1], pos[2]);
leg.castShadow = true;
leg.receiveShadow = true;
scene.add(leg);
});
}
/**
* Creates a single, more detailed spider mesh (sphere body and 8 legs).
* @returns {THREE.Group}
*/
function createBugMesh() {
const bugGroup = new THREE.Group();
// Material for all parts
const bugMaterial = new THREE.MeshPhongMaterial({
color: 0x0a0a0a, // Almost black
shininess: 30,
});
// --- 1. Body (Sphere) ---
const bodyRadius = 0.15;
const bodyGeometry = new THREE.SphereGeometry(bodyRadius, 16, 16);
const body = new THREE.Mesh(bodyGeometry, bugMaterial);
// Center the sphere body vertically (half its height)
body.position.y = bodyRadius;
body.castShadow = true;
body.receiveShadow = true;
bugGroup.add(body);
// --- 2. Legs (8 thin cylinders) ---
const legLength = 0.3; // Made longer for spider look
const legWidth = 0.005;
const legGeometry = new THREE.CylinderGeometry(legWidth, legWidth, legLength, 4);
const numLegs = 8;
// Slightly offset starting angle so legs aren't perfectly aligned with world axes
const legAngleStart = degToRad(45 / 2);
// Radial distance from the center (0, 0) where the legs pivot on the sphere's base
const legRadialPivot = 0.08;
const legTiltDown = degToRad(15); // Tilt angle for a natural spider stance
for (let i = 0; i < numLegs; i++) {
const leg = new THREE.Mesh(legGeometry, bugMaterial);
// Calculate the angle for this leg
const angle = legAngleStart + (i * degToRad(360 / numLegs));
// 1. Calculate the pivot point on the sphere's base surface (X/Z plane)
const pivotX = legRadialPivot * Math.sin(angle);
const pivotZ = legRadialPivot * Math.cos(angle);
// 2. Set the initial position to the attachment point near the base of the sphere
leg.position.set(pivotX, bodyRadius - 0.03, pivotZ);
// 3. Offset the leg center so the end point (pivot point) rests at the calculated position
const halfLength = legLength / 2;
// Move the center of the leg (halfLength distance) along its rotation angle
leg.position.x += halfLength * Math.sin(angle);
leg.position.z += halfLength * Math.cos(angle);
// --- Rotation Calculation ---
// Rotation 1: Align the vertical cylinder horizontally
leg.rotation.x = degToRad(90);
// Rotation 2: Orient the leg outward (around Y axis)
leg.rotation.y = angle;
// Rotation 3: Tilt the leg downwards on its local axis (Z) for a crawling look
if (i % 2 === 0) {
leg.rotation.z = legTiltDown; // Inward tilt
} else {
leg.rotation.z = -legTiltDown; // Outward tilt
}
leg.castShadow = true;
leg.receiveShadow = true;
bugGroup.add(leg);
}
bugGroup.position.y = floorHeight; // Group origin is on the floor
return bugGroup;
}
/**
* Creates and places the 'bugs' meshes.
*/
function setupBugs() {
for (let i = 0; i < BUGS_COUNT; i++) {
// Use the new detailed bug mesh
const bug = createBugMesh();
// Random position within the room limits
bug.position.x = (Math.random() - 0.5) * (ROOM_SIZE - 2);
bug.position.z = (Math.random() - 0.5) * (ROOM_SIZE - 2);
// Random initial rotation
bug.rotation.y = Math.random() * Math.PI * 2;
// Add velocity/state data to the bug object
bug.velocity = new THREE.Vector3(
(Math.random() - 0.5) * BUG_SPEED,
0,
(Math.random() - 0.5) * BUG_SPEED
);
scene.add(bug);
bugs.push(bug);
}
}
/**
* Main animation loop.
*/
function animate() {
requestAnimationFrame(animate);
// Update bug positions and rotation
bugs.forEach(bug => {
// Apply current velocity
bug.position.add(bug.velocity);
// Simple collision detection with room boundaries (bounce back)
const limit = ROOM_SIZE / 2 - 0.2;
if (bug.position.x > limit || bug.position.x < -limit) {
bug.velocity.x *= -1;
// Adjust bug rotation to face the new direction
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
}
if (bug.position.z > limit || bug.position.z < -limit) {
bug.velocity.z *= -1;
// Adjust bug rotation to face the new direction
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
}
// Small random change in direction for erratic movement (like a real bug)
bug.velocity.x += (Math.random() - 0.5) * 0.0005;
bug.velocity.z += (Math.random() - 0.5) * 0.0005;
// Clamp velocity to prevent running too fast
bug.velocity.clampLength(0, BUG_SPEED * 1.5);
// Smooth rotation towards the direction of travel
const targetYRotation = Math.atan2(bug.velocity.x, bug.velocity.z);
bug.rotation.y += (targetYRotation - bug.rotation.y) * 0.1;
});
// Camera Look Around (Dampened rotation)
camera.rotation.y += (targetRotation.y - camera.rotation.y) * DAMPING_FACTOR;
renderer.render(scene, camera);
}
// --- Event Handlers ---
/**
* Handles window resize to maintain aspect ratio and prevent distortion.
*/
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
/**
* Handles mouse movement to control the camera's rotation (look around).
* @param {MouseEvent} event
*/
function onMouseMove(event) {
// Calculate normalized device coordinates (-1 to +1)
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
// Simple map of mouse position to target rotation angles
targetRotation.y = -pointer.x * degToRad(30);
// targetRotation.x = -pointer.y * degToRad(10); // Disabled X rotation for a simpler floor-view
}
// Wait for the window to load before initializing the 3D scene
window.onload = function() {
try {
init();
} catch (e) {
console.error("Three.js initialization failed:", e);
document.body.innerHTML = `
<div class="flex items-center justify-center h-screen bg-gray-900 text-white">
<p class="text-xl p-4 bg-red-700 rounded-lg">Error loading 3D scene. Console has more details.</p>
</div>
`;
}
};
</script>
</body>
</html>

538
tv-player/flies.html Normal file
View File

@ -0,0 +1,538 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gloomy Room Shadow Scene</title>
<!-- Load Tailwind CSS for utility styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Load Three.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
/* Custom styles for the 3D canvas */
body {
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
background-color: #0d0d10; /* Very dark background */
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="info" class="absolute top-4 left-1/2 transform -translate-x-1/2 p-2 bg-gray-900 bg-opacity-70 text-white rounded-lg shadow-xl text-xs sm:text-sm z-10">
Spiders and flies scattering in a gloomy, shadow-casting room. (Use mouse to look around)
</div>
<script>
// --- Global Variables ---
let scene, camera, renderer;
let ambientLight, lampLight, lampMesh;
let pointer = new THREE.Vector2();
let targetRotation = { x: 0, y: 0 };
const BUGS_COUNT = 30; // Spiders
const FLIES_COUNT = 20; // Flies
const bugs = [];
const flies = [];
const floorHeight = 0;
let landingSurfaces = []; // Array to hold floor and table for fly landings
const raycaster = new THREE.Raycaster();
// --- Configuration ---
const ROOM_SIZE = 15;
const LAMP_HEIGHT = 4;
const BUG_SPEED = 0.007;
const FLIGHT_HEIGHT_MIN = 1.0; // Min height for flying
const FLIGHT_HEIGHT_MAX = 3.0; // Max height for flying
const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
const DAMPING_FACTOR = 0.05;
// --- Utility Functions ---
/**
* Converts degrees to radians.
* @param {number} degrees
* @returns {number}
*/
function degToRad(degrees) {
return degrees * (Math.PI / 180);
}
/**
* Initializes the Three.js scene, camera, and renderer.
*/
function init() {
// 1. Scene Setup
scene = new THREE.Scene();
scene.background = new THREE.Color(0x101015);
// 2. Renderer Setup (Enable Shadows)
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
document.body.appendChild(renderer.domElement);
// 3. Camera Setup (First-person perspective near the floor)
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.5, 5); // Stand a bit above the floor, facing into the room
camera.lookAt(0, 1.5, 0);
// 4. Lighting Setup
setupLighting();
// 5. Environment Setup (Sets up landingSurfaces array)
setupRoom();
setupTable();
// 6. Creatures Setup
setupBugs(); // Spiders
setupFlies(); // Flies
// 7. Event Listeners
window.addEventListener('resize', onWindowResize);
document.addEventListener('mousemove', onMouseMove);
console.log("Three.js Scene Initialized.");
animate();
}
/**
* Sets up the lighting: Ambient and the central PointLight (lamp).
*/
function setupLighting() {
// Very dim ambient light for general visibility
ambientLight = new THREE.AmbientLight(0x444444, 0.5);
scene.add(ambientLight);
// Point Light (The Lamp)
const lampColor = 0xffe9a0; // Warm, dim color
const lampIntensity = 1.8;
const lampDistance = 15;
lampLight = new THREE.PointLight(lampColor, lampIntensity, lampDistance);
lampLight.position.set(0, LAMP_HEIGHT, 0);
// Enable shadow casting for the lamp
lampLight.castShadow = true;
// Configure shadow camera properties for better shadow quality
lampLight.shadow.mapSize.width = 1024;
lampLight.shadow.mapSize.height = 1024;
lampLight.shadow.camera.near = 0.5;
lampLight.shadow.camera.far = 10;
lampLight.shadow.bias = -0.0001; // Tiny bias to prevent shadow artifacts
scene.add(lampLight);
// Visual mesh for the light source (the bulb)
const bulbGeometry = new THREE.SphereGeometry(0.1, 8, 8);
const bulbMaterial = new THREE.MeshBasicMaterial({ color: lampColor });
lampMesh = new THREE.Mesh(bulbGeometry, bulbMaterial);
lampMesh.position.copy(lampLight.position);
scene.add(lampMesh);
}
/**
* Sets up the room (walls and floor).
*/
function setupRoom() {
const wallMaterial = new THREE.MeshPhongMaterial({
color: 0x333333,
side: THREE.BackSide, // Render walls from the inside
shininess: 5,
});
// Floor
const floorGeometry = new THREE.PlaneGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2);
const floorMesh = new THREE.Mesh(floorGeometry, wallMaterial);
floorMesh.rotation.x = degToRad(-90);
floorMesh.position.y = floorHeight;
floorMesh.receiveShadow = true;
floorMesh.name = 'landingSurface'; // Tag for fly landing
scene.add(floorMesh);
landingSurfaces.push(floorMesh); // Add to list of landing spots
// Walls (Simple box around the camera position)
const wallGeometry = new THREE.BoxGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2, ROOM_SIZE * 2);
const wallsMesh = new THREE.Mesh(wallGeometry, wallMaterial);
wallsMesh.position.y = ROOM_SIZE; // Center the box vertically
wallsMesh.receiveShadow = true;
scene.add(wallsMesh);
}
/**
* Adds a simple table object for more complex shadows.
*/
function setupTable() {
const tableMaterial = new THREE.MeshPhongMaterial({
color: 0x5a3d2b, // Dark wood color
shininess: 10,
});
// Table top
const tableTop = new THREE.Mesh(
new THREE.BoxGeometry(3, 0.1, 1.5),
tableMaterial
);
tableTop.position.set(2, 1.5 + 0.05, 0);
tableTop.castShadow = true;
tableTop.receiveShadow = true;
tableTop.name = 'landingSurface'; // Tag for fly landing
scene.add(tableTop);
landingSurfaces.push(tableTop); // Add to list of landing spots
// Table legs (using a loop for simplicity)
const legGeometry = new THREE.BoxGeometry(0.1, 1.5, 0.1);
const positions = [
[3.4, 0.75, 0.65], [-0.4, 0.75, 0.65],
[3.4, 0.75, -0.65], [-0.4, 0.75, -0.65]
];
positions.forEach(pos => {
const leg = new THREE.Mesh(legGeometry, tableMaterial);
leg.position.set(pos[0], pos[1], pos[2]);
leg.castShadow = true;
leg.receiveShadow = true;
scene.add(leg);
});
}
/**
* Creates a single, more detailed spider mesh (sphere body and 8 legs).
* @returns {THREE.Group}
*/
function createBugMesh() {
const bugGroup = new THREE.Group();
// Material for all parts
const bugMaterial = new THREE.MeshPhongMaterial({
color: 0x0a0a0a, // Almost black
shininess: 30,
});
// --- 1. Body (Sphere) ---
const bodyRadius = 0.15;
const bodyGeometry = new THREE.SphereGeometry(bodyRadius, 16, 16);
const body = new THREE.Mesh(bodyGeometry, bugMaterial);
body.position.y = bodyRadius;
body.castShadow = true;
body.receiveShadow = true;
bugGroup.add(body);
// --- 2. Legs (8 thin cylinders) ---
const legLength = 0.3;
const legWidth = 0.005;
const legGeometry = new THREE.CylinderGeometry(legWidth, legWidth, legLength, 4);
const numLegs = 8;
const legAngleStart = degToRad(45 / 2);
const legRadialPivot = 0.08;
const legTiltDown = degToRad(15);
for (let i = 0; i < numLegs; i++) {
const leg = new THREE.Mesh(legGeometry, bugMaterial);
const angle = legAngleStart + (i * degToRad(360 / numLegs));
const pivotX = legRadialPivot * Math.sin(angle);
const pivotZ = legRadialPivot * Math.cos(angle);
leg.position.set(pivotX, bodyRadius - 0.03, pivotZ);
const halfLength = legLength / 2;
leg.position.x += halfLength * Math.sin(angle);
leg.position.z += halfLength * Math.cos(angle);
leg.rotation.x = degToRad(90);
leg.rotation.y = angle;
leg.rotation.z = (i % 2 === 0) ? legTiltDown : -legTiltDown;
leg.castShadow = true;
leg.receiveShadow = true;
bugGroup.add(leg);
}
bugGroup.position.y = floorHeight;
return bugGroup;
}
/**
* Creates a single fly mesh (small cone/tetrahedron).
* @returns {THREE.Group}
*/
function createFlyMesh() {
const flyGroup = new THREE.Group();
const flyMaterial = new THREE.MeshPhongMaterial({
color: 0x111111, // Dark fly color
shininess: 50,
});
// Small Cone/Tetrahedron for a simple shape
const bodyGeometry = new THREE.ConeGeometry(0.05, 0.1, 4);
const body = new THREE.Mesh(bodyGeometry, flyMaterial);
body.rotation.x = degToRad(90); // Point nose in Z direction
body.castShadow = true;
body.receiveShadow = true;
flyGroup.add(body);
// Initial state and parameters for the fly
flyGroup.userData = {
state: 'flying', // 'flying' or 'landed'
landTimer: 0,
t: 0, // Curve progression t parameter (0 to 1)
curve: null,
landCheckTimer: 0,
oscillationTime: Math.random() * 100, // For smooth y-axis buzzing
};
// Initial random position
flyGroup.position.set(
(Math.random() - 0.5) * (ROOM_SIZE - 4),
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
(Math.random() - 0.5) * (ROOM_SIZE - 4)
);
return flyGroup;
}
/**
* Creates a new Quadratic Bezier curve for a fly's flight path.
* @param {THREE.Group} fly - The fly mesh group.
* @param {THREE.Vector3} endPoint - The target position for the end of the curve.
*/
function createFlyCurve(fly, endPoint) {
const startPoint = fly.position.clone();
// Calculate the midpoint
const midPoint = new THREE.Vector3().lerpVectors(startPoint, endPoint, 0.5);
// Calculate a random offset for the control point to create curvature
const offsetMagnitude = startPoint.distanceTo(endPoint) * 0.5;
const offsetAngle = Math.random() * Math.PI * 2;
// Displace the control point randomly to create a swooping path.
// Control point y is usually higher than start/end for a nice arc.
const controlPoint = new THREE.Vector3(
midPoint.x + Math.cos(offsetAngle) * offsetMagnitude * 0.5,
midPoint.y + Math.random() * 0.5 + 0.5,
midPoint.z + Math.sin(offsetAngle) * offsetMagnitude * 0.5
);
fly.userData.curve = new THREE.QuadraticBezierCurve3(
startPoint,
controlPoint,
endPoint
);
fly.userData.t = 0; // Reset progression
fly.userData.landCheckTimer = 50 + Math.random() * 50; // New landing decision window
}
/**
* Creates and places the 'bugs' (spiders) meshes.
*/
function setupBugs() {
for (let i = 0; i < BUGS_COUNT; i++) {
const bug = createBugMesh();
bug.position.x = (Math.random() - 0.5) * (ROOM_SIZE - 2);
bug.position.z = (Math.random() - 0.5) * (ROOM_SIZE - 2);
bug.rotation.y = Math.random() * Math.PI * 2;
bug.velocity = new THREE.Vector3(
(Math.random() - 0.5) * BUG_SPEED,
0,
(Math.random() - 0.5) * BUG_SPEED
);
scene.add(bug);
bugs.push(bug);
}
}
/**
* Creates and places the 'flies' meshes.
*/
function setupFlies() {
for (let i = 0; i < FLIES_COUNT; i++) {
const fly = createFlyMesh();
scene.add(fly);
flies.push(fly);
}
}
/**
* Updates the position and state of the flies using Bezier curves.
*/
function updateFlies() {
const boundaryLimit = ROOM_SIZE / 2 - 0.1;
flies.forEach(fly => {
const data = fly.userData;
if (data.state === 'flying') {
if (!data.curve) {
// Initialize the first curve
const newTargetPos = new THREE.Vector3(
(Math.random() - 0.5) * (ROOM_SIZE - 4),
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
(Math.random() - 0.5) * (ROOM_SIZE - 4)
);
createFlyCurve(fly, newTargetPos);
}
// Advance curve progression
data.t += FLY_FLIGHT_SPEED_FACTOR;
// Check for landing readiness during the flight path
data.landCheckTimer--;
if (data.t >= 1) {
// Path finished
// 1. Check for landing decision
if (data.landCheckTimer <= 0 && Math.random() < 0.8) {
// Raycast down from the current position to find a landing spot
raycaster.set(fly.position, new THREE.Vector3(0, -1, 0));
const intersects = raycaster.intersectObjects(landingSurfaces, false);
if (intersects.length > 0) {
const intersect = intersects[0];
data.state = 'landed';
// Land slightly above the surface
fly.position.y = intersect.point.y + 0.05;
data.landTimer = 50 + Math.random() * 200; // Land for a random duration
return; // Stop updates for this fly
}
}
// 2. If not landing, generate a new random flight path
const newTargetPos = new THREE.Vector3(
(Math.random() - 0.5) * (ROOM_SIZE - 4),
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
(Math.random() - 0.5) * (ROOM_SIZE - 4)
);
createFlyCurve(fly, newTargetPos);
data.t = 0; // Reset T for the new curve
}
// Set position along the curve
fly.position.copy(data.curve.getPoint(Math.min(data.t, 1)));
// Set rotation tangent to the curve
const tangent = data.curve.getTangent(Math.min(data.t, 1)).normalize();
fly.rotation.y = Math.atan2(tangent.x, tangent.z);
// Add slight Y oscillation for buzzing feel (on top of curve)
data.oscillationTime += 0.1;
fly.position.y += Math.sin(data.oscillationTime * 4) * 0.01;
} else if (data.state === 'landed') {
// --- Landed State ---
data.landTimer--;
if (data.landTimer <= 0) {
// Take off: Generate new flight curve from current landed position
data.state = 'flying';
const newTargetPos = new THREE.Vector3(
(Math.random() - 0.5) * (ROOM_SIZE - 4),
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
(Math.random() - 0.5) * (ROOM_SIZE - 4)
);
createFlyCurve(fly, newTargetPos);
}
}
});
}
/**
* Main animation loop.
*/
function animate() {
requestAnimationFrame(animate);
// Update bug positions and rotation
bugs.forEach(bug => {
// Apply current velocity
bug.position.add(bug.velocity);
// Simple collision detection with room boundaries (bounce back)
const limit = ROOM_SIZE / 2 - 0.2;
if (bug.position.x > limit || bug.position.x < -limit) {
bug.velocity.x *= -1;
// Adjust bug rotation to face the new direction
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
}
if (bug.position.z > limit || bug.position.z < -limit) {
bug.velocity.z *= -1;
// Adjust bug rotation to face the new direction
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
}
// Small random change in direction for erratic movement (like a real bug)
bug.velocity.x += (Math.random() - 0.5) * 0.0005;
bug.velocity.z += (Math.random() - 0.5) * 0.0005;
// Clamp velocity to prevent running too fast
bug.velocity.clampLength(0, BUG_SPEED * 1.5);
// Smooth rotation towards the direction of travel
const targetYRotation = Math.atan2(bug.velocity.x, bug.velocity.z);
bug.rotation.y += (targetYRotation - bug.rotation.y) * 0.1;
});
// Update fly positions and state
updateFlies();
// Camera Look Around (Dampened rotation)
camera.rotation.y += (targetRotation.y - camera.rotation.y) * DAMPING_FACTOR;
renderer.render(scene, camera);
}
// --- Event Handlers ---
/**
* Handles window resize to maintain aspect ratio and prevent distortion.
*/
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
/**
* Handles mouse movement to control the camera's rotation (look around).
* @param {MouseEvent} event
*/
function onMouseMove(event) {
// Calculate normalized device coordinates (-1 to +1)
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
// Simple map of mouse position to target rotation angles
targetRotation.y = -pointer.x * degToRad(30);
}
// Wait for the window to load before initializing the 3D scene
window.onload = function() {
try {
init();
} catch (e) {
console.error("Three.js initialization failed:", e);
document.body.innerHTML = `
<div class="flex items-center justify-center h-screen bg-gray-900 text-white">
<p class="text-xl p-4 bg-red-700 rounded-lg">Error loading 3D scene. Console has more details.</p>
</div>
`;
}
};
</script>
</body>
</html>

582
tv-player/flies_v2.html Normal file
View File

@ -0,0 +1,582 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gloomy Room Shadow Scene with Bloom</title>
<!-- Load Tailwind CSS for utility styling --><script src="https://cdn.tailwindcss.com"></script>
<!-- Load Three.js library --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- Load Three.js Post-processing modules --><script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
<!-- FIX: Added missing dependency for UnrealBloomPass -->
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/FXAAShader.js"></script>
<style>
/* Custom styles for the 3D canvas */
body {
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
background-color: #0d0d10; /* Very dark background */
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="info" class="absolute top-4 left-1/2 transform -translate-x-1/2 p-2 bg-gray-900 bg-opacity-70 text-white rounded-lg shadow-xl text-xs sm:text-sm z-10">
Spiders and flies scattering in a gloomy, shadow-casting room with bloom. (Use mouse to look around)
</div>
<script>
// --- Global Variables ---
let scene, camera, renderer, composer;
let ambientLight, lampLight, lampMesh;
let pointer = new THREE.Vector2();
let targetRotation = { x: 0, y: 0 };
const BUGS_COUNT = 30; // Spiders
const FLIES_COUNT = 20; // Flies
const bugs = [];
const flies = [];
const floorHeight = 0;
let landingSurfaces = []; // Array to hold floor and table for fly landings
const raycaster = new THREE.Raycaster();
// --- Configuration ---
const ROOM_SIZE = 15;
const LAMP_HEIGHT = 4;
const BUG_SPEED = 0.007;
const FLIGHT_HEIGHT_MIN = 1.0; // Min height for flying
const FLIGHT_HEIGHT_MAX = 3.0; // Max height for flying
const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
const DAMPING_FACTOR = 0.05;
// Bloom parameters
const bloomParams = {
exposure: 1,
bloomStrength: 1.5, // How intense the bloom is
bloomThreshold: 0.8, // Only pixels brighter than this will bloom
bloomRadius: 0.5 // How far the bloom spreads
};
// --- Utility Functions ---
/**
* Converts degrees to radians.
* @param {number} degrees
* @returns {number}
*/
function degToRad(degrees) {
return degrees * (Math.PI / 180);
}
/**
* Initializes the Three.js scene, camera, and renderer.
*/
function init() {
// 1. Scene Setup
scene = new THREE.Scene();
scene.background = new THREE.Color(0x101015);
// 2. Renderer Setup (Enable Shadows)
renderer = new THREE.WebGLRenderer({ antialias: true }); // Antialiasing is handled by FXAA now
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
document.body.appendChild(renderer.domElement);
// 3. Camera Setup (First-person perspective near the floor)
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.5, 5); // Stand a bit above the floor, facing into the room
camera.lookAt(0, 1.5, 0);
// 4. Lighting Setup
setupLighting();
// 5. Environment Setup (Sets up landingSurfaces array)
setupRoom();
setupTable();
// 6. Creatures Setup
setupBugs(); // Spiders
setupFlies(); // Flies
// 7. Post-processing (Bloom) Setup
setupPostProcessing();
// 8. Event Listeners
window.addEventListener('resize', onWindowResize);
document.addEventListener('mousemove', onMouseMove);
console.log("Three.js Scene Initialized.");
animate();
}
/**
* Sets up the lighting: Ambient and the central PointLight (lamp).
*/
function setupLighting() {
// Very dim ambient light for general visibility
ambientLight = new THREE.AmbientLight(0x444444, 0.5);
scene.add(ambientLight);
// Point Light (The Lamp)
const lampColor = 0xffe9a0; // Warm, dim color
const lampIntensity = 1.8;
const lampDistance = 15;
lampLight = new THREE.PointLight(lampColor, lampIntensity, lampDistance);
lampLight.position.set(0, LAMP_HEIGHT, 0);
// Enable shadow casting for the lamp
lampLight.castShadow = true;
// Configure shadow camera properties for better shadow quality
lampLight.shadow.mapSize.width = 1024;
lampLight.shadow.mapSize.height = 1024;
lampLight.shadow.camera.near = 0.5;
lampLight.shadow.camera.far = 10;
lampLight.shadow.bias = -0.0001; // Tiny bias to prevent shadow artifacts
scene.add(lampLight);
// Visual mesh for the light source (the bulb)
const bulbGeometry = new THREE.SphereGeometry(0.1, 8, 8);
const bulbMaterial = new THREE.MeshBasicMaterial({ color: lampColor });
lampMesh = new THREE.Mesh(bulbGeometry, bulbMaterial);
lampMesh.position.copy(lampLight.position);
scene.add(lampMesh);
}
/**
* Sets up the room (walls and floor).
*/
function setupRoom() {
const wallMaterial = new THREE.MeshPhongMaterial({
color: 0x333333,
side: THREE.BackSide, // Render walls from the inside
shininess: 5,
});
// Floor
const floorGeometry = new THREE.PlaneGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2);
const floorMesh = new THREE.Mesh(floorGeometry, wallMaterial);
floorMesh.rotation.x = degToRad(-90);
floorMesh.position.y = floorHeight;
floorMesh.receiveShadow = true;
floorMesh.name = 'landingSurface'; // Tag for fly landing
scene.add(floorMesh);
landingSurfaces.push(floorMesh); // Add to list of landing spots
// Walls (Simple box around the camera position)
const wallGeometry = new THREE.BoxGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2, ROOM_SIZE * 2);
const wallsMesh = new THREE.Mesh(wallGeometry, wallMaterial);
wallsMesh.position.y = ROOM_SIZE; // Center the box vertically
wallsMesh.receiveShadow = true;
scene.add(wallsMesh);
}
/**
* Adds a simple table object for more complex shadows.
*/
function setupTable() {
const tableMaterial = new THREE.MeshPhongMaterial({
color: 0x5a3d2b, // Dark wood color
shininess: 10,
});
// Table top
const tableTop = new THREE.Mesh(
new THREE.BoxGeometry(3, 0.1, 1.5),
tableMaterial
);
tableTop.position.set(2, 1.5 + 0.05, 0);
tableTop.castShadow = true;
tableTop.receiveShadow = true;
tableTop.name = 'landingSurface'; // Tag for fly landing
scene.add(tableTop);
landingSurfaces.push(tableTop); // Add to list of landing spots
// Table legs (using a loop for simplicity)
const legGeometry = new THREE.BoxGeometry(0.1, 1.5, 0.1);
const positions = [
[3.4, 0.75, 0.65], [-0.4, 0.75, 0.65],
[3.4, 0.75, -0.65], [-0.4, 0.75, -0.65]
];
positions.forEach(pos => {
const leg = new THREE.Mesh(legGeometry, tableMaterial);
leg.position.set(pos[0], pos[1], pos[2]);
leg.castShadow = true;
leg.receiveShadow = true;
scene.add(leg);
});
}
/**
* Creates a single, more detailed spider mesh (sphere body and 8 legs).
* @returns {THREE.Group}
*/
function createBugMesh() {
const bugGroup = new THREE.Group();
// Material for all parts
const bugMaterial = new THREE.MeshPhongMaterial({
color: 0x0a0a0a, // Almost black
shininess: 30,
});
// --- 1. Body (Sphere) ---
const bodyRadius = 0.15;
const bodyGeometry = new THREE.SphereGeometry(bodyRadius, 16, 16);
const body = new THREE.Mesh(bodyGeometry, bugMaterial);
body.position.y = bodyRadius;
body.castShadow = true;
body.receiveShadow = true;
bugGroup.add(body);
// --- 2. Legs (8 thin cylinders) ---
const legLength = 0.3;
const legWidth = 0.005;
const legGeometry = new THREE.CylinderGeometry(legWidth, legWidth, legLength, 4);
const numLegs = 8;
const legAngleStart = degToRad(45 / 2);
const legRadialPivot = 0.08;
const legTiltDown = degToRad(15);
for (let i = 0; i < numLegs; i++) {
const leg = new THREE.Mesh(legGeometry, bugMaterial);
const angle = legAngleStart + (i * degToRad(360 / numLegs));
const pivotX = legRadialPivot * Math.sin(angle);
const pivotZ = legRadialPivot * Math.cos(angle);
leg.position.set(pivotX, bodyRadius - 0.03, pivotZ);
const halfLength = legLength / 2;
leg.position.x += halfLength * Math.sin(angle);
leg.position.z += halfLength * Math.cos(angle);
leg.rotation.x = degToRad(90);
leg.rotation.y = angle;
leg.rotation.z = (i % 2 === 0) ? legTiltDown : -legTiltDown;
leg.castShadow = true;
leg.receiveShadow = true;
bugGroup.add(leg);
}
bugGroup.position.y = floorHeight;
return bugGroup;
}
/**
* Creates a single fly mesh (small cone/tetrahedron).
* @returns {THREE.Group}
*/
function createFlyMesh() {
const flyGroup = new THREE.Group();
const flyMaterial = new THREE.MeshPhongMaterial({
color: 0x111111, // Dark fly color
shininess: 50,
});
// Small Cone/Tetrahedron for a simple shape
const bodyGeometry = new THREE.ConeGeometry(0.05, 0.1, 4);
const body = new THREE.Mesh(bodyGeometry, flyMaterial);
body.rotation.x = degToRad(90); // Point nose in Z direction
body.castShadow = true;
body.receiveShadow = true;
flyGroup.add(body);
// Initial state and parameters for the fly
flyGroup.userData = {
state: 'flying', // 'flying' or 'landed'
landTimer: 0,
t: 0, // Curve progression t parameter (0 to 1)
curve: null,
landCheckTimer: 0,
oscillationTime: Math.random() * 100, // For smooth y-axis buzzing
};
// Initial random position
flyGroup.position.set(
(Math.random() - 0.5) * (ROOM_SIZE - 4),
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
(Math.random() - 0.5) * (ROOM_SIZE - 4)
);
return flyGroup;
}
/**
* Creates a new Quadratic Bezier curve for a fly's flight path.
* @param {THREE.Group} fly - The fly mesh group.
* @param {THREE.Vector3} endPoint - The target position for the end of the curve.
*/
function createFlyCurve(fly, endPoint) {
const startPoint = fly.position.clone();
// Calculate the midpoint
const midPoint = new THREE.Vector3().lerpVectors(startPoint, endPoint, 0.5);
// Calculate a random offset for the control point to create curvature
const offsetMagnitude = startPoint.distanceTo(endPoint) * 0.5;
const offsetAngle = Math.random() * Math.PI * 2;
// Displace the control point randomly to create a swooping path.
// Control point y is usually higher than start/end for a nice arc.
const controlPoint = new THREE.Vector3(
midPoint.x + Math.cos(offsetAngle) * offsetMagnitude * 0.5,
midPoint.y + Math.random() * 0.5 + 0.5,
midPoint.z + Math.sin(offsetAngle) * offsetMagnitude * 0.5
);
fly.userData.curve = new THREE.QuadraticBezierCurve3(
startPoint,
controlPoint,
endPoint
);
fly.userData.t = 0; // Reset progression
fly.userData.landCheckTimer = 50 + Math.random() * 50; // New landing decision window
}
/**
* Creates and places the 'bugs' (spiders) meshes.
*/
function setupBugs() {
for (let i = 0; i < BUGS_COUNT; i++) {
const bug = createBugMesh();
bug.position.x = (Math.random() - 0.5) * (ROOM_SIZE - 2);
bug.position.z = (Math.random() - 0.5) * (ROOM_SIZE - 2);
bug.rotation.y = Math.random() * Math.PI * 2;
bug.velocity = new THREE.Vector3(
(Math.random() - 0.5) * BUG_SPEED,
0,
(Math.random() - 0.5) * BUG_SPEED
);
scene.add(bug);
bugs.push(bug);
}
}
/**
* Creates and places the 'flies' meshes.
*/
function setupFlies() {
for (let i = 0; i < FLIES_COUNT; i++) {
const fly = createFlyMesh();
scene.add(fly);
flies.push(fly);
}
}
/**
* Updates the position and state of the flies using Bezier curves.
*/
function updateFlies() {
const boundaryLimit = ROOM_SIZE / 2 - 0.1;
flies.forEach(fly => {
const data = fly.userData;
if (data.state === 'flying') {
if (!data.curve) {
// Initialize the first curve
const newTargetPos = new THREE.Vector3(
(Math.random() - 0.5) * (ROOM_SIZE - 4),
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
(Math.random() - 0.5) * (ROOM_SIZE - 4)
);
createFlyCurve(fly, newTargetPos);
}
// Advance curve progression
data.t += FLY_FLIGHT_SPEED_FACTOR;
// Check for landing readiness during the flight path
data.landCheckTimer--;
if (data.t >= 1) {
// Path finished
// 1. Check for landing decision
if (data.landCheckTimer <= 0 && Math.random() < 0.8) {
// Raycast down from the current position to find a landing spot
raycaster.set(fly.position, new THREE.Vector3(0, -1, 0));
const intersects = raycaster.intersectObjects(landingSurfaces, false);
if (intersects.length > 0) {
const intersect = intersects[0];
data.state = 'landed';
// Land slightly above the surface
fly.position.y = intersect.point.y + 0.05;
data.landTimer = 50 + Math.random() * 200; // Land for a random duration
return; // Stop updates for this fly
}
}
// 2. If not landing, generate a new random flight path
const newTargetPos = new THREE.Vector3(
(Math.random() - 0.5) * (ROOM_SIZE - 4),
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
(Math.random() - 0.5) * (ROOM_SIZE - 4)
);
createFlyCurve(fly, newTargetPos);
data.t = 0; // Reset T for the new curve
}
// Set position along the curve
fly.position.copy(data.curve.getPoint(Math.min(data.t, 1)));
// Set rotation tangent to the curve
const tangent = data.curve.getTangent(Math.min(data.t, 1)).normalize();
fly.rotation.y = Math.atan2(tangent.x, tangent.z);
// Add slight Y oscillation for buzzing feel (on top of curve)
data.oscillationTime += 0.1;
fly.position.y += Math.sin(data.oscillationTime * 4) * 0.01;
} else if (data.state === 'landed') {
// --- Landed State ---
data.landTimer--;
if (data.landTimer <= 0) {
// Take off: Generate new flight curve from current landed position
data.state = 'flying';
const newTargetPos = new THREE.Vector3(
(Math.random() - 0.5) * (ROOM_SIZE - 4),
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
(Math.random() - 0.5) * (ROOM_SIZE - 4)
);
createFlyCurve(fly, newTargetPos);
}
}
});
}
/**
* Sets up the post-processing effects (Bloom).
*/
function setupPostProcessing() {
composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
const bloomPass = new THREE.UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
bloomParams.bloomStrength,
bloomParams.bloomRadius,
bloomParams.bloomThreshold
);
composer.addPass(bloomPass);
// FXAA Pass for anti-aliasing after post-processing
const fxaaPass = new THREE.ShaderPass(THREE.FXAAShader);
fxaaPass.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
composer.addPass(fxaaPass);
}
/**
* Main animation loop.
*/
function animate() {
requestAnimationFrame(animate);
// Update bug positions and rotation
bugs.forEach(bug => {
// Apply current velocity
bug.position.add(bug.velocity);
// Simple collision detection with room boundaries (bounce back)
const limit = ROOM_SIZE / 2 - 0.2;
if (bug.position.x > limit || bug.position.x < -limit) {
bug.velocity.x *= -1;
// Adjust bug rotation to face the new direction
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
}
if (bug.position.z > limit || bug.position.z < -limit) {
bug.velocity.z *= -1;
// Adjust bug rotation to face the new direction
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
}
// Small random change in direction for erratic movement (like a real bug)
bug.velocity.x += (Math.random() - 0.5) * 0.0005;
bug.velocity.z += (Math.random() - 0.5) * 0.0005;
// Clamp velocity to prevent running too fast
bug.velocity.clampLength(0, BUG_SPEED * 1.5);
// Smooth rotation towards the direction of travel
const targetYRotation = Math.atan2(bug.velocity.x, bug.velocity.z);
bug.rotation.y += (targetYRotation - bug.rotation.y) * 0.1;
});
// Update fly positions and state
updateFlies();
// Camera Look Around (Dampened rotation)
camera.rotation.y += (targetRotation.y - camera.rotation.y) * DAMPING_FACTOR;
// Render the scene with post-processing effects
composer.render();
}
// --- Event Handlers ---
/**
* Handles window resize to maintain aspect ratio and prevent distortion.
*/
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
composer.setSize(window.innerWidth, window.innerHeight); // Update composer size too
// Also update FXAA resolution uniform
if (composer && composer.passes && composer.passes.length > 2) { // Check if FXAA pass exists
composer.passes[2].uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
}
}
/**
* Handles mouse movement to control the camera's rotation (look around).
* @param {MouseEvent} event
*/
function onMouseMove(event) {
// Calculate normalized device coordinates (-1 to +1)
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
// Simple map of mouse position to target rotation angles
targetRotation.y = -pointer.x * degToRad(30);
}
// Wait for the window to load before initializing the 3D scene
window.onload = function() {
try {
init();
} catch (e) {
console.error("Three.js initialization failed:", e);
document.body.innerHTML = `
<div class="flex items-center justify-center h-screen bg-gray-900 text-white">
<p class="text-xl p-4 bg-red-700 rounded-lg">Error loading 3D scene. Console has more details.</p>
</div>
`;
}
};
</script>
</body>
</html>

691
tv-player/index.html Normal file
View File

@ -0,0 +1,691 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro TV Player</title>
<!-- Load Tailwind CSS for styling --><script src="https://cdn.tailwindcss.com"></script>
<script>
// Configure Tailwind for the button
tailwind.config = {
theme: {
extend: {
colors: {
'tape-red': '#cc3333',
},
}
}
}
</script>
<!-- Load Three.js for 3D rendering --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
/* Dark room aesthetic */
body {
background-color: #0d0d10;
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
}
canvas {
display: block;
}
/* Custom styles for the Load Tape button */
.tape-button {
transition: all 0.2s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tape-button:active {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
</style>
</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="tape-button px-8 py-3 bg-tape-red text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150">
Load tapes
</button>
<!-- Next Tape Button (still allows manual skip) --><button id="nextTapeButton" class="tape-button px-6 py-3 bg-gray-600 text-white font-bold text-lg uppercase tracking-wider rounded-lg opacity-50 cursor-not-allowed" disabled>
Next (0/0)
</button>
</div>
<!-- Status message area --><p id="status" class="text-sm text-yellow-300 text-center font-mono opacity-80">Ready.</p>
</div>
<!-- 3D Canvas will be injected here by Three.js --><script>
// --- Global Variables ---
let scene, camera, renderer, tvScreen, videoTexture, dust, screenLight, lampLight;
let isVideoLoaded = false;
let videoUrls = []; // Array to hold all video URLs
let currentVideoIndex = -1; // Index of the currently playing video
const originalLampIntensity = 1.5; // Base intensity for the flickering lamp
const originalScreenIntensity = 1.5; // Base intensity for the screen glow
const container = document.body;
const videoElement = document.getElementById('video');
const fileInput = document.getElementById('fileInput');
const statusText = document.getElementById('status');
const loadTapeButton = document.getElementById('loadTapeButton');
const nextTapeButton = document.getElementById('nextTapeButton');
const loader = new THREE.TextureLoader();
const debugLight = false;
// --- Initialization ---
function init() {
// 1. Scene Setup (Dark, Ambient)
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
// 2. Camera Setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.5, 4);
// 3. Renderer Setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// Enable shadows on the renderer
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
container.appendChild(renderer.domElement);
// 4. Lighting (Minimal and focused)
const ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
// Light from the screen (initially low intensity, will increase when video loads)
screenLight = new THREE.PointLight(0xffffff, 0.1, 10);
screenLight.position.set(0, 1.7, 1.2);
// Screen light casts shadows
screenLight.castShadow = true;
screenLight.shadow.mapSize.width = 1024;
screenLight.shadow.mapSize.height = 1024;
screenLight.shadow.camera.near = 0.2;
screenLight.shadow.camera.far = 10;
scene.add(screenLight);
// 5. Build the entire scene with TV and surrounding objects
createSceneObjects();
// 6. Create the Dust Particle System
createDust();
// 7. Create the Room Walls and Ceiling
createRoomWalls();
// --- 8. Debug Visualization Helpers ---
// Visual aids for the light source positions
if (debugLight && THREE.PointLightHelper) {
const screenHelper = new THREE.PointLightHelper(screenLight, 0.1, 0xff0000); // Red for screen
scene.add(screenHelper);
// Lamp Helper will now work since lampLight is added to the scene
const lampHelper = new THREE.PointLightHelper(lampLight, 0.1, 0x00ff00); // Green for lamp
scene.add(lampHelper);
}
// 9. Event Listeners
window.addEventListener('resize', onWindowResize, false);
fileInput.addEventListener('change', loadVideoFile);
// Button logic
loadTapeButton.addEventListener('click', () => {
fileInput.click();
});
nextTapeButton.addEventListener('click', playNextVideo);
// Auto-advance to the next video when the current one finishes.
videoElement.addEventListener('ended', playNextVideo);
// Start the animation loop
animate();
}
// --- Room Walls Function ---
function createRoomWalls() {
const wallTexture = loader.load('./textures/wall.jpg');
wallTexture.wrapS = THREE.RepeatWrapping;
wallTexture.wrapT = THREE.RepeatWrapping;
// USING MeshPhongMaterial for specular highlights on walls
const wallMaterial = new THREE.MeshPhongMaterial({
map: wallTexture,
side: THREE.FrontSide,
shininess: 5,
specular: 0x111111 // Subtle reflection
});
const roomSize = 15;
const roomHeight = 8;
// 1. Back Wall (behind the TV)
const backWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
backWall.position.set(0, roomHeight / 2, -roomSize / 2);
backWall.receiveShadow = true;
scene.add(backWall);
// 2. Front Wall (behind the camera)
const frontWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
frontWall.position.set(0, roomHeight / 2, roomSize / 2);
frontWall.rotation.y = Math.PI;
frontWall.receiveShadow = true;
scene.add(frontWall);
// 3. Left Wall
const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
leftWall.rotation.y = Math.PI / 2;
leftWall.position.set(-roomSize / 2, roomHeight / 2, 0);
leftWall.receiveShadow = true;
scene.add(leftWall);
// 4. Right Wall
const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
rightWall.rotation.y = -Math.PI / 2;
rightWall.position.set(roomSize / 2, roomHeight / 2, 0);
rightWall.receiveShadow = true;
scene.add(rightWall);
// 5. Ceiling
const ceilingGeometry = new THREE.PlaneGeometry(roomSize, roomSize);
const ceilingTexture = wallTexture;
ceilingTexture.repeat.set(4, 4);
// USING MeshPhongMaterial
const ceilingMaterial = new THREE.MeshPhongMaterial({
map: ceilingTexture,
side: THREE.FrontSide,
shininess: 5,
specular: 0x111111
});
const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial);
ceiling.rotation.x = Math.PI / 2;
ceiling.position.set(0, roomHeight, 0);
ceiling.receiveShadow = true;
scene.add(ceiling);
// --- 6. Add a Window to the Back Wall ---
const windowWidth = 1.5;
const windowHeight = 1.2;
const windowGeometry = new THREE.PlaneGeometry(windowWidth, windowHeight);
const nightSkyMaterial = new THREE.MeshBasicMaterial({
color: 0x0a1a3a,
emissive: 0x0a1a3a,
emissiveIntensity: 0.5,
side: THREE.FrontSide
});
const windowPane = new THREE.Mesh(windowGeometry, nightSkyMaterial);
const windowZ = -roomSize / 2 + 0.001;
windowPane.position.set(-3.5, roomHeight * 0.5 + 1.5, windowZ);
scene.add(windowPane);
// USING MeshPhongMaterial for the frame
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x4d3934, shininess: 10 });
// Horizontal bar
const hBarGeometry = new THREE.BoxGeometry(windowWidth + 0.1, 0.05, 0.05);
const hBar = new THREE.Mesh(hBarGeometry, frameMaterial);
hBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
hBar.castShadow = true;
scene.add(hBar);
// Vertical bar
const vBarGeometry = new THREE.BoxGeometry(0.05, windowHeight + 0.1, 0.05);
const vBar = new THREE.Mesh(vBarGeometry, frameMaterial);
vBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
vBar.castShadow = true;
scene.add(vBar);
}
// --- Scene Modeling Function ---
function createSceneObjects() {
// --- Materials (MeshPhongMaterial) ---
const darkWood = new THREE.MeshPhongMaterial({ color: 0x3d352e, shininess: 10 });
const darkMetal = new THREE.MeshPhongMaterial({
color: 0x6b6b6b,
shininess: 80,
specular: 0x888888
});
const tvPlastic = new THREE.MeshPhongMaterial({ color: 0x2d251e, shininess: 10 });
// --- 1. Floor ---
const floorGeometry = new THREE.PlaneGeometry(20, 20);
const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a, shininess: 5 });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = 0;
floor.receiveShadow = true;
scene.add(floor);
// --- 2. Table (TV stand) ---
const tableGeometry = new THREE.BoxGeometry(4.0, 0.7, 2.5);
const table = new THREE.Mesh(tableGeometry, darkWood);
table.position.y = 0.35;
table.castShadow = true;
table.receiveShadow = true;
scene.add(table);
// --- 3. The TV Set ---
const cabinetGeometry = new THREE.BoxGeometry(2.8, 2, 1.5);
const cabinet = new THREE.Mesh(cabinetGeometry, tvPlastic);
cabinet.position.y = 1.7;
cabinet.castShadow = true;
cabinet.receiveShadow = true;
scene.add(cabinet);
// Screen Frame
const frameGeometry = new THREE.BoxGeometry(2.3, 1.6, 0.2);
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 20 });
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
frame.position.set(0, 1.7, 0.68);
frame.castShadow = true;
frame.receiveShadow = true;
scene.add(frame);
// --- 4. Curved Screen (CRT Effect) ---
const screenRadius = 3.0; // Radius for the subtle curve
const screenWidth = 2.3;
const screenHeight = 1.5;
const thetaLength = screenWidth / screenRadius; // Calculate angle needed for the arc
// Use CylinderGeometry as a segment
const screenGeometry = new THREE.CylinderGeometry(
screenRadius, screenRadius,
screenHeight, // Cylinder height is the vertical dimension of the screen
32,
1,
true,
(Math.PI / 2) - (thetaLength / 2), // Start angle to center the arc
thetaLength // Arc length (width)
);
// Rotate the cylinder segment:
// 1. Rotate around X-axis by 90 degrees to lay the height (Y) along Z (depth).
//screenGeometry.rotateX(Math.PI / 2);
// 2. Rotate around Y-axis by 90 degrees to align the segment's arc across the X-axis (width).
screenGeometry.rotateY(-Math.PI/2);
const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
// Position the curved screen
tvScreen.position.set(0, 1.7, -2);
scene.add(tvScreen);
// --- 5. Lamp (On the table, right side) ---
const lampBase = new THREE.CylinderGeometry(0.1, 0.2, 0.1, 12);
const lampPole = new THREE.CylinderGeometry(0.05, 0.05, 0.6, 8);
const lampShade = new THREE.ConeGeometry(0.3, 0.4, 16);
const baseMesh = new THREE.Mesh(lampBase, darkMetal);
const poleMesh = new THREE.Mesh(lampPole, darkMetal);
const shadeMesh = new THREE.Mesh(lampShade, darkMetal);
// Ensure lamp parts cast shadows
baseMesh.castShadow = true; baseMesh.receiveShadow = true;
poleMesh.castShadow = true; poleMesh.receiveShadow = true;
shadeMesh.castShadow = true; shadeMesh.receiveShadow = true;
poleMesh.position.y = 0.3;
shadeMesh.position.y = 0.8 + 0.1;
shadeMesh.rotation.x = Math.PI;
const lampGroup = new THREE.Group();
lampGroup.add(baseMesh, poleMesh, shadeMesh);
lampGroup.position.set(2.5, 0.7, -0.6);
// Lamp Light (Warm Glow) - Configured to cast shadows
lampLight = new THREE.PointLight(0xffaa00, originalLampIntensity, 4);
lampLight.position.set(2.5, 1.35, -0.6);
lampLight.castShadow = true;
// Optimization: Reduced map size and far plane to ease resource burden
lampLight.shadow.mapSize.width = 512;
lampLight.shadow.mapSize.height = 512;
lampLight.shadow.camera.near = 0.1;
lampLight.shadow.camera.far = 4; // Matches the light's attenuation distance (4)
// Crucially, add the lamp group and its light to the scene
scene.add(lampGroup, lampLight);
// --- 6. Vase with a Flower (On the table, left side) ---
const vaseGeometry = new THREE.CylinderGeometry(0.2, 0.15, 0.4, 12);
const vaseMaterial = new THREE.MeshPhongMaterial({ color: 0x356644, shininess: 15 });
const vase = new THREE.Mesh(vaseGeometry, vaseMaterial);
vase.position.set(0, -0.2, 0);
vase.castShadow = true; vase.receiveShadow = true;
// Flower
const flowerStem = new THREE.CylinderGeometry(0.01, 0.01, 0.3, 8);
const flowerHead = new THREE.SphereGeometry(0.08, 10, 10);
const stemMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22, shininess: 10 });
const headMaterial = new THREE.MeshPhongMaterial({ color: 0xdd2222, shininess: 30 });
const stem = new THREE.Mesh(flowerStem, stemMaterial);
stem.position.y = 0.1;
const head = new THREE.Mesh(flowerHead, headMaterial);
head.position.y = 0.3;
stem.castShadow = true; head.castShadow = true;
stem.receiveShadow = true; head.receiveShadow = true;
const flowerGroup = new THREE.Group();
flowerGroup.add(stem, head, vase);
flowerGroup.position.set(-1.65, 1.1, 1);
scene.add(flowerGroup);
// --- 7. Old Camera (On the table) ---
const cameraBody = new THREE.BoxGeometry(0.4, 0.3, 0.2);
const cameraLens = new THREE.CylinderGeometry(0.08, 0.08, 0.05, 12);
const cameraMaterial = new THREE.MeshPhongMaterial({
color: 0x333333,
shininess: 50,
specular: 0x444444
});
const cameraMesh = new THREE.Mesh(cameraBody, cameraMaterial);
const lensMesh = new THREE.Mesh(cameraLens, cameraMaterial);
lensMesh.position.z = 0.15;
cameraMesh.add(lensMesh);
cameraMesh.position.set(-2.0, 0.7 + 0.15, -0.4);
cameraMesh.rotation.y = -Math.PI / 10;
cameraMesh.castShadow = true; cameraMesh.receiveShadow = true;
scene.add(cameraMesh);
// --- 8. Pizza Box (On the table) ---
const boxGeometry = new THREE.BoxGeometry(0.5, 0.05, 0.5);
const boxMaterial = new THREE.MeshPhongMaterial({ color: 0xe0c896, shininess: 5 });
const pizzaBox = new THREE.Mesh(boxGeometry, boxMaterial);
pizzaBox.position.set(1.8, 0.7 + 0.025, 0.8);
pizzaBox.rotation.y = Math.PI / 5;
pizzaBox.castShadow = true; pizzaBox.receiveShadow = true;
scene.add(pizzaBox);
}
// --- Dust Particle System Function ---
function createDust() {
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
);
}
// Use THREE.Float32BufferAttribute to correctly set the position attribute
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
});
dust = new THREE.Points(particlesGeometry, particleMaterial);
// Dust particles generally don't cast or receive shadows in this context
scene.add(dust);
}
// --- Helper function to format seconds into MM:SS ---
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}`;
}
// --- Helper function to update the control buttons' state and text ---
function updateControls() {
const total = videoUrls.length;
const current = currentVideoIndex + 1;
if (total > 1) {
nextTapeButton.disabled = false;
nextTapeButton.classList.remove('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
nextTapeButton.classList.add('bg-tape-red', 'hover:bg-red-700');
} else {
nextTapeButton.disabled = true;
nextTapeButton.classList.add('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
nextTapeButton.classList.remove('bg-tape-red', 'hover:bg-red-700');
}
// Always show the current tape count
nextTapeButton.textContent = `Next (${current}/${total})`;
}
// --- Play video by index ---
function playVideoByIndex(index) {
if (index < 0 || index >= videoUrls.length) {
statusText.textContent = 'End of playlist reached. Reload tapes to start again.';
screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
return;
}
currentVideoIndex = index;
const url = videoUrls[index];
// Dispose of previous texture to free resources
if (videoTexture) {
videoTexture.dispose();
videoTexture = null;
}
videoElement.src = url;
videoElement.muted = true;
videoElement.load();
// Set loop property: only loop if it's the only video loaded
videoElement.loop = videoUrls.length === 1;
videoElement.onloadeddata = () => {
// 1. Create the Three.js texture
videoTexture = new THREE.VideoTexture(videoElement);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBAFormat;
videoTexture.needsUpdate = true;
// 2. Apply the video texture to the screen mesh
tvScreen.material.dispose();
tvScreen.material = new THREE.MeshBasicMaterial({ map: videoTexture });
tvScreen.material.needsUpdate = true;
// 3. Start playback
videoElement.play().then(() => {
isVideoLoaded = true;
// Use the defined base intensity for screen glow
screenLight.intensity = originalScreenIntensity;
// Initial status message with tape count
statusText.textContent = `Playing tape ${currentVideoIndex + 1} of ${videoUrls.length}.`;
updateControls();
}).catch(error => {
screenLight.intensity = 0.5; // Dim the light if playback fails
statusText.textContent = `Playback blocked for tape ${currentVideoIndex + 1}. Click Next Tape to try again.`;
console.error('Playback Error: Could not start video playback.', error);
});
};
videoElement.onerror = (e) => {
screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
statusText.textContent = `Error loading tape ${currentVideoIndex + 1}.`;
console.error('Video Load Error:', e);
};
}
// --- Cycle to the next video ---
function playNextVideo() {
if (videoUrls.length > 0) {
// Determine the next index, cycling back to 0 if we reach the end
let nextIndex = (currentVideoIndex + 1) % videoUrls.length;
playVideoByIndex(nextIndex);
}
}
// --- Video Loading Logic (handles multiple files) ---
function loadVideoFile(event) {
const files = event.target.files;
if (files.length === 0) {
statusText.textContent = 'File selection cancelled.';
return;
}
// 1. Clear previous URLs and revoke object URLs to prevent memory leaks
videoUrls.forEach(url => URL.revokeObjectURL(url));
videoUrls = [];
// 2. Populate the new videoUrls array
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.type.startsWith('video/')) {
videoUrls.push(URL.createObjectURL(file));
}
}
if (videoUrls.length === 0) {
statusText.textContent = 'No valid video files selected.';
updateControls();
return;
}
// 3. Start playback of the first video
statusText.textContent = `Loaded ${videoUrls.length} tapes. Starting playback...`;
playVideoByIndex(0);
}
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
// 1. Dust animation: slow downward drift
if (dust) {
const positions = 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;
}
}
dust.geometry.attributes.position.needsUpdate = true;
}
// 2. Camera movement (Gentle, random hovering)
const globalTime = Date.now() * 0.00005;
const lookAtTime = Date.now() * 0.00003;
const camAmplitude = 0.6;
const lookAmplitude = 0.05;
// Base Camera Position in front of the TV
const baseX = 0;
const baseY = 1.5;
const baseZ = 4;
// Base LookAt target (Center of the screen)
const baseTargetX = 0;
const baseTargetY = 1.7;
const baseTargetZ = 0.96;
// Camera Position Offsets (Drift)
const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.4;
camera.position.x = baseX + camOffsetX;
camera.position.y = baseY + camOffsetY;
camera.position.z = baseZ;
// LookAt Target Offsets (Subtle Gaze Shift)
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
// Apply lookAt to the subtly shifted target
camera.lookAt(
baseTargetX + lookOffsetX,
baseTargetY + lookOffsetY,
baseTargetZ
);
// 3. Lamp Flicker Effect
const flickerChance = 0.995;
const restoreRate = 0.15;
if (Math.random() > flickerChance) {
// Flickers quickly to a dimmer random value (between 0.3 and 1.05)
lampLight.intensity = originalLampIntensity * (0.3 + Math.random() * 0.7);
} else if (lampLight.intensity < originalLampIntensity) {
// Smoothly restore original intensity
lampLight.intensity = THREE.MathUtils.lerp(lampLight.intensity, originalLampIntensity, restoreRate);
}
// 4. Screen Light Pulse and Movement Effect (Updated)
if (isVideoLoaded && screenLight.intensity > 0) {
// A. Pulse Effect (Intensity Fluctuation)
// Generate a small random fluctuation for the pulse (Range: 1.35 to 1.65 around base 1.5)
const pulseTarget = originalScreenIntensity + (Math.random() - 0.5) * 0.7;
// Smoothly interpolate towards the new target fluctuation
screenLight.intensity = THREE.MathUtils.lerp(screenLight.intensity, pulseTarget, 0.1);
// B. Movement Effect (Subtle circle around the screen center - circling the room area)
const lightTime = Date.now() * 0.002;
const radius = 0.05; // Small circle radius (5 cm)
const centerX = 0;
const centerY = 1.7;
const centerZ = 1.2; // Use the updated Z position of the light source
// Move the light in a subtle, erratic circle
screenLight.position.x = centerX + Math.cos(lightTime) * radius;
screenLight.position.y = centerY + Math.sin(lightTime * 1.5) * radius * 0.5; // Slightly different freq for Y
screenLight.position.z = centerZ; // Keep Z constant at the screen light plane
}
// 5. Update video texture (essential to grab the next frame)
if (videoTexture) {
videoTexture.needsUpdate = true;
// Update time display in the animation loop
if (isVideoLoaded && videoElement.readyState >= 3) {
const currentTime = formatTime(videoElement.currentTime);
const duration = formatTime(videoElement.duration);
statusText.textContent =
`Tape ${currentVideoIndex + 1} of ${videoUrls.length}. Time: ${currentTime} / ${duration}`;
}
}
// RENDER!
renderer.render(scene, camera);
}
// --- Window Resize Handler ---
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Start everything on window load
window.onload = init;
</script>
</body>
</html>

436
tv-player/index_v0.html Normal file
View File

@ -0,0 +1,436 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D CRT Television Model (Video Player)</title>
<!-- Load Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Load Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
/* Apply Inter font and ensure full viewport size */
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Inter', sans-serif;
overflow: hidden; /* Prevent scrolling */
}
/* Style for the canvas container */
#tv-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* The canvas itself will be appended here by three.js */
}
/* Custom styling for the file input button */
#controls input[type="file"] {
display: none;
}
#controls label {
cursor: pointer;
padding: 0.5rem 1rem;
background-color: #ef4444; /* red-500 */
color: white;
border-radius: 0.375rem; /* rounded-md */
font-weight: 600;
transition: background-color 0.2s;
box-shadow: 0 4px #b91c1c; /* darker red for 3D press effect */
user-select: none;
}
#controls label:hover {
background-color: #dc2626; /* red-600 */
}
#controls label:active {
box-shadow: 0 1px #b91c1c;
transform: translateY(3px);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 antialiased">
<!-- Header -->
<header class="absolute top-0 left-0 right-0 p-4 text-center z-10">
<h1 class="text-3xl font-extrabold text-red-500">Nostalgic CRT Display (Video Player)</h1>
<p class="text-sm text-gray-400 mt-1">Click and drag to rotate the bulky set. Load a video to replace the static!</p>
</header>
<!-- Controls (Load Button) -->
<div id="controls" class="absolute bottom-4 left-0 right-0 p-4 flex justify-center z-10">
<input type="file" id="videoFileInput" accept="video/*">
<label for="videoFileInput" id="loadVideoLabel">
Load Video File
</label>
</div>
<!-- Hidden Video Element for decoding the video file -->
<video id="videoElement" class="hidden" loop muted playsinline></video>
<!-- 3D Canvas Container -->
<div id="tv-container">
<!-- Three.js will inject the canvas here -->
</div>
<script>
// --- Global Variables ---
let scene, camera, renderer;
let tvModel;
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let screenMesh; // Reference to the screen mesh for texture updates
// Dimensions for a bulky CRT
const TV_WIDTH = 12;
const TV_HEIGHT = 9;
const TV_DEPTH = 10;
// Variables for textures
let staticTexture;
let videoTexture;
let isStaticActive = true; // Flag to control rendering loop
// --- Utility Functions (Kept for environment compatibility) ---
function pcmToWav(pcm16, sampleRate) { /* ... omitted for brevity ... */ }
function base64ToArrayBuffer(base64) { /* ... omitted for brevity ... */ }
// --- Core 3D Functions ---
function init() {
const container = document.getElementById('tv-container');
// 1. Scene Setup
scene = new THREE.Scene();
scene.background = new THREE.Color(0x111827); // Dark background matching Tailwind bg-gray-900
// 2. Camera Setup
camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 100);
camera.position.z = 25;
camera.position.y = 0;
// 3. Renderer Setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
// 4. Create TV Model
tvModel = createTV();
scene.add(tvModel);
// 5. Setup controls
setupVideoControls();
// 6. Add Lighting
addLights();
// 7. Event Listeners for Interaction and Resizing
window.addEventListener('resize', onWindowResize, false);
renderer.domElement.addEventListener('mousedown', onMouseDown, false);
renderer.domElement.addEventListener('mousemove', onMouseMove, false);
renderer.domElement.addEventListener('mouseup', onMouseUp, false);
renderer.domElement.addEventListener('touchstart', onTouchStart, false);
renderer.domElement.addEventListener('touchmove', onTouchMove, false);
renderer.domElement.addEventListener('touchend', onMouseUp, false);
// Initial view rotation
tvModel.rotation.y = Math.PI / 4;
tvModel.rotation.x = -Math.PI / 16;
}
function createTV() {
const tvGroup = new THREE.Group();
// --- 1. CRT Body Casing (Bulky Box) ---
const bodyGeometry = new THREE.BoxGeometry(TV_WIDTH, TV_HEIGHT, TV_DEPTH);
const bodyMaterial = new THREE.MeshPhongMaterial({
color: 0x554433, // Brown/Beige plastic casing
specular: 0x111111,
shininess: 10
});
const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial);
tvGroup.add(bodyMesh);
// --- 2. Screen (Dynamic Canvas Texture for initial static) ---
// Create the initial dynamic static canvas (512x512 resolution for texture)
const screenCanvas = document.createElement('canvas');
screenCanvas.width = 512;
screenCanvas.height = 512;
const screenContext = screenCanvas.getContext('2d');
staticTexture = new THREE.CanvasTexture(screenCanvas); // Store global reference to static texture
// Parameters for CRT screen curvature
const screenRadius = 25; // Large radius for a subtle curve
const screenWidth = TV_WIDTH - 1.5;
const screenHeight = TV_HEIGHT - 1.5;
const screenOffset = TV_DEPTH / 2 + 0.01;
// Calculate the angle needed to span the screen width on the curved surface
const screenArcAngle = screenWidth / screenRadius;
// Geometry: Segment of a cylinder to create a concave screen
const screenGeometry = new THREE.CylinderGeometry(
screenRadius, screenRadius,
screenHeight, // Cylinder height corresponds to screen height (Y axis)
32, // Radial segments (for smoothness)
1,
true, // Open ended
-screenArcAngle / 2, // Start angle
screenArcAngle // Total angle (arc length)
);
// Use a Basic Material with the static texture initially
const screenMaterial = new THREE.MeshBasicMaterial({
map: staticTexture,
// Setting DoubleSide ensures the concave side of the geometry renders.
side: THREE.DoubleSide
});
screenMesh = new THREE.Mesh(screenGeometry, screenMaterial); // Store global reference
screenMesh.userData.context = screenContext; // Store context for static update
screenMesh.name = 'crtScreen'; // Give it a name for easy lookup
// Rotation and Positioning:
// Rotate 180 degrees around Y to flip the mesh so the CONCAVE side faces the camera (+Z).
screenMesh.rotation.y = Math.PI;
// Position: Move back by the radius so the front-center aligns with the front of the TV
screenMesh.position.z = screenOffset - screenRadius;
tvGroup.add(screenMesh);
// --- 3. Knobs/Dials on the side ---
const knobGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.5, 16);
const knobMaterial = new THREE.MeshPhongMaterial({ color: 0x333333, shininess: 30 });
// Channel Knob
const channelKnob = new THREE.Mesh(knobGeometry, knobMaterial);
channelKnob.rotation.z = Math.PI / 2; // Rotate to stick out from the side
channelKnob.position.set(TV_WIDTH / 2 + 0.25, TV_HEIGHT / 2 - 2, 0);
tvGroup.add(channelKnob);
// Volume Knob
const volumeKnob = new THREE.Mesh(knobGeometry, knobMaterial);
volumeKnob.rotation.z = Math.PI / 2;
volumeKnob.position.set(TV_WIDTH / 2 + 0.25, TV_HEIGHT / 2 - 3.5, 0);
tvGroup.add(volumeKnob);
// --- 4. Antenna (Rabbit Ears) ---
const antennaMaterial = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, shininess: 80 });
const antennaGeometry = new THREE.CylinderGeometry(0.05, 0.05, 5, 8);
// Base connection point
const antennaBase = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.3, 16), knobMaterial);
antennaBase.position.set(0, TV_HEIGHT / 2 + 0.15 + TV_HEIGHT / 2, 0);
tvGroup.add(antennaBase);
// Left Ear
const leftEar = new THREE.Mesh(antennaGeometry, antennaMaterial);
leftEar.rotation.z = Math.PI / 4;
leftEar.position.set(-1.5, TV_HEIGHT / 2 + 2.5 + TV_HEIGHT / 2, 0);
tvGroup.add(leftEar);
// Right Ear
const rightEar = new THREE.Mesh(antennaGeometry, antennaMaterial);
rightEar.rotation.z = -Math.PI / 4;
rightEar.position.set(1.5, TV_HEIGHT / 2 + 2.5 + TV_HEIGHT / 2, 0);
tvGroup.add(rightEar);
return tvGroup;
}
function setupVideoControls() {
const input = document.getElementById('videoFileInput');
const video = document.getElementById('videoElement');
const label = document.getElementById('loadVideoLabel');
input.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
label.textContent = "Loading...";
loadVideoTexture(file, video);
}
});
}
function loadVideoTexture(file, video) {
// Stop any existing video playback and revoke old URL
if (video.src) {
video.pause();
URL.revokeObjectURL(video.src);
}
// Create new blob URL for the selected file
const videoUrl = URL.createObjectURL(file);
video.src = videoUrl;
// When video metadata is loaded, create the texture and assign it
video.onloadeddata = () => {
isStaticActive = false; // Stop static rendering
// Dispose of previous video texture if it exists
if (videoTexture) {
videoTexture.dispose();
}
// Create new VideoTexture
videoTexture = new THREE.VideoTexture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBAFormat;
// Update the screen mesh material map
if (screenMesh) {
screenMesh.material.map = videoTexture;
screenMesh.material.needsUpdate = true;
document.getElementById('loadVideoLabel').textContent = "Video Playing (Click to change)";
// Attempt to play the video (it must be muted/playsinline for auto-play in most browsers)
video.play().catch(e => {
console.error("Video playback failed (User interaction required):", e);
document.getElementById('loadVideoLabel').textContent = "Playback blocked (Click screen to play)";
// Handle browsers blocking auto-play by waiting for user interaction
renderer.domElement.addEventListener('click', () => {
video.play().then(() => {
document.getElementById('loadVideoLabel').textContent = "Video Playing (Click to change)";
}).catch(err => console.error("Manual playback failed:", err));
}, { once: true });
});
}
};
}
function updateStaticTexture() {
if (!screenMesh || !isStaticActive) return;
const screenContext = screenMesh.userData.context;
const screenCanvas = staticTexture.image;
const w = screenCanvas.width;
const h = screenCanvas.height;
const imageData = screenContext.getImageData(0, 0, w, h);
const data = imageData.data;
const numPixels = w * h;
// Time-based shift for "color bloom/misalignment" effect
const time = Date.now() * 0.005;
const rShift = Math.sin(time * 0.5) * 5;
const gShift = Math.sin(time * 0.5 + 2) * 5;
const bShift = Math.sin(time * 0.5 + 4) * 5;
// Generate random noise
for (let i = 0; i < numPixels; i++) {
const noise = Math.random() * 200 + 55;
const dataIndex = i * 4;
// Apply color shift
data[dataIndex] = Math.min(255, noise + rShift + Math.random() * 10);
data[dataIndex + 1] = Math.min(255, noise + gShift + Math.random() * 10);
data[dataIndex + 2] = Math.min(255, noise + bShift + Math.random() * 10);
data[dataIndex + 3] = 255; // Alpha
}
screenContext.putImageData(imageData, 0, 0);
staticTexture.needsUpdate = true; // Update the static texture
}
function addLights() {
// Ambient light for general scene illumination
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);
// Directional light from the front-top-right
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight1.position.set(5, 10, 10);
scene.add(directionalLight1);
}
function animate() {
requestAnimationFrame(animate);
if (isStaticActive) {
updateStaticTexture();
} else if (videoTexture) {
// Ensure video texture updates when playing
videoTexture.needsUpdate = true;
}
renderer.render(scene, camera);
}
// --- Event Handlers (Drag/Resize Logic) ---
function onWindowResize() {
const container = document.getElementById('tv-container');
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
}
function onMouseDown(event) {
isDragging = true;
previousMousePosition.x = event.clientX;
previousMousePosition.y = event.clientY;
}
function onTouchStart(event) {
if (event.touches.length === 1) {
isDragging = true;
previousMousePosition.x = event.touches[0].clientX;
previousMousePosition.y = event.touches[0].clientY;
}
}
function onMouseMove(event) {
if (!isDragging) return;
const deltaX = event.clientX - previousMousePosition.x;
const deltaY = event.clientY - previousMousePosition.y;
const rotationSpeed = 0.005;
tvModel.rotation.y += deltaX * rotationSpeed;
tvModel.rotation.x += deltaY * rotationSpeed;
tvModel.rotation.x = Math.max(-Math.PI / 4, Math.min(Math.PI / 4, tvModel.rotation.x));
previousMousePosition.x = event.clientX;
previousMousePosition.y = event.clientY;
}
function onTouchMove(event) {
if (!isDragging || event.touches.length !== 1) return;
const touch = event.touches[0];
const deltaX = touch.clientX - previousMousePosition.x;
const deltaY = touch.clientY - previousMousePosition.y;
const rotationSpeed = 0.007;
tvModel.rotation.y += deltaX * rotationSpeed;
tvModel.rotation.x += deltaY * rotationSpeed;
tvModel.rotation.x = Math.max(-Math.PI / 4, Math.min(Math.PI / 4, tvModel.rotation.x));
previousMousePosition.x = touch.clientX;
previousMousePosition.y = touch.clientY;
event.preventDefault();
}
function onMouseUp(event) {
isDragging = false;
}
// Start the application when the window loads
window.onload = function () {
init();
animate();
};
</script>
</body>
</html>

267
tv-player/index_v2.html Normal file
View File

@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro TV Video Player (3D)</title>
<!-- Load Tailwind CSS for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Load Three.js for 3D rendering -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
/* Dark room aesthetic */
body {
background-color: #0d0d10;
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
}
canvas {
display: block;
}
#info-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 10;
transition: opacity 0.5s;
}
.container {
max-width: 90%;
width: 400px;
}
</style>
</head>
<body>
<!-- Hidden Video Element -->
<!-- FIX: Changed hiding strategy from display:none to opacity:0 to ensure decoding still runs -->
<video id="video" loop playsinline muted class="hidden"></video>
<!-- Overlay for User Interaction (File Picker) -->
<div id="info-overlay" class="text-white opacity-100">
<div class="container bg-gray-800 p-8 rounded-xl shadow-2xl border border-gray-700">
<h1 class="text-3xl font-bold mb-4 text-gray-100">Retro TV Scene</h1>
<p class="mb-6 text-gray-400">
Load a local MP4 file to play it on the 3D TV screen. The room is dark and dusty.
</p>
<input
type="file"
id="fileInput"
accept="video/mp4"
class="block w-full text-sm text-gray-300
file:mr-4 file:py-2 file:px-4
file:rounded-lg file:border-0
file:text-sm file:font-semibold
file:bg-indigo-600 file:text-white
hover:file:bg-indigo-700 cursor-pointer"
>
<p id="status" class="mt-4 text-sm text-yellow-400">Awaiting video file...</p>
</div>
</div>
<!-- 3D Canvas will be injected here by Three.js -->
<script>
// --- Global Variables ---
let scene, camera, renderer, tvScreen, video, videoTexture, dust, screenLight;
let isVideoLoaded = false;
const container = document.body;
const videoElement = document.getElementById('video');
const fileInput = document.getElementById('fileInput');
const overlay = document.getElementById('info-overlay');
const statusText = document.getElementById('status');
// --- Initialization ---
function init() {
// 1. Scene Setup (Dark, Ambient)
scene = new THREE.Scene();
scene.background = new THREE.Color(0x050508); // Deep blue-black
// 2. Camera Setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.5, 4);
// 3. Renderer Setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
// 4. Lighting (Minimal and focused)
const ambientLight = new THREE.AmbientLight(0x444444);
scene.add(ambientLight);
// Light from the screen
screenLight = new THREE.PointLight(0xffffff, 0, 10);
screenLight.position.set(0, 1.3, 0.5);
scene.add(screenLight);
// 5. Build the TV Set
createTV(screenLight);
// 6. Create the Dust Particle System
createDust();
// 7. Event Listeners
window.addEventListener('resize', onWindowResize, false);
fileInput.addEventListener('change', loadVideoFile);
// Start the animation loop
animate();
}
// --- TV Modeling Function ---
function createTV(light) {
// --- The main TV cabinet (bulky) ---
const cabinetGeometry = new THREE.BoxGeometry(2.8, 2, 1.5);
const cabinetMaterial = new THREE.MeshLambertMaterial({
color: 0x242429, // Dark gray/black
flatShading: true
});
const cabinet = new THREE.Mesh(cabinetGeometry, cabinetMaterial);
cabinet.position.y = 1.3; // Centered vertically
// --- Screen Frame (Recessed) ---
const frameGeometry = new THREE.BoxGeometry(2.3, 1.6, 0.2);
const frameMaterial = new THREE.MeshLambertMaterial({ color: 0x111111 });
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
frame.position.set(0, 1.3, 0.8); // Positioned slightly forward and covering the screen
// --- Screen Placeholder ---
const screenGeometry = new THREE.PlaneGeometry(2.0, 1.3);
const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); // Initially black
tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
tvScreen.position.set(0, 1.3, 0.96); // Just slightly in front of the frame
scene.add(cabinet, frame, tvScreen);
}
// --- Dust Particle System Function ---
function createDust() {
const particleCount = 2000;
const particlesGeometry = new THREE.BufferGeometry();
const positions = [];
for (let i = 0; i < particleCount; i++) {
positions.push(
(Math.random() - 0.5) * 15, // X
Math.random() * 10, // Y (height)
(Math.random() - 0.5) * 15 // Z
);
}
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
});
dust = new THREE.Points(particlesGeometry, particleMaterial);
scene.add(dust);
}
// --- Video Loading Logic ---
function loadVideoFile(event) {
const file = event.target.files[0];
if (!file) return;
statusText.textContent = 'Loading video...';
const fileURL = URL.createObjectURL(file);
videoElement.src = fileURL;
// Ensure video is muted for reliable playback
videoElement.muted = true;
videoElement.load();
videoElement.onloadeddata = () => {
// 1. Create the Three.js texture
videoTexture = new THREE.VideoTexture(videoElement);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBAFormat;
// FIX: Explicitly flag the texture for update immediately
videoTexture.needsUpdate = true;
// 2. Apply the video texture to the screen mesh
tvScreen.material.dispose();
tvScreen.material = new THREE.MeshBasicMaterial({ map: videoTexture });
tvScreen.material.needsUpdate = true;
// 3. Start playback and fade out the overlay
videoElement.play().then(() => {
isVideoLoaded = true;
screenLight.intensity = 1.5; // Turn on screen light
overlay.style.opacity = 0;
setTimeout(() => overlay.style.display = 'none', 500);
statusText.textContent = 'Video playing.';
}).catch(error => {
statusText.textContent = 'Playback blocked by browser (Check console).';
console.error('Playback Error: Could not start video playback.', error);
});
};
videoElement.onerror = (e) => {
statusText.textContent = 'Error loading video file.';
console.error('Video Load Error:', e);
};
}
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
// 1. Dust animation: slow downward drift
if (dust) {
const positions = dust.geometry.attributes.position.array;
for (let i = 1; i < positions.length; i += 3) {
positions[i] -= 0.005;
if (positions[i] < -2) {
positions[i] = 8;
}
}
dust.geometry.attributes.position.needsUpdate = true;
}
// 2. Camera movement (subtle orbit for depth perception)
const time = Date.now() * 0.001;
camera.position.x = Math.cos(time) * 4;
camera.position.z = Math.sin(time) * 4 + 2;
camera.lookAt(0, 1.3, 0);
// 3. Update video texture (essential to grab the next frame)
if (videoTexture) {
videoTexture.needsUpdate = true;
}
renderer.render(scene, camera);
}
// --- Window Resize Handler ---
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Start everything on window load
window.onload = init;
</script>
</body>
</html>

719
tv-player/index_v3.html Normal file
View File

@ -0,0 +1,719 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro TV Video Player (3D)</title>
<!-- Load Tailwind CSS for styling --><script src="https://cdn.tailwindcss.com"></script>
<script>
// Configure Tailwind for the button
tailwind.config = {
theme: {
extend: {
colors: {
'tape-red': '#cc3333',
},
}
}
}
</script>
<!-- Load Three.js for 3D rendering --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
/* Dark room aesthetic */
body {
background-color: #0d0d10;
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
}
canvas {
display: block;
}
/* Custom styles for the Load Tape button */
.tape-button {
transition: all 0.2s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tape-button:active {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
</style>
</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="tape-button px-8 py-3 bg-tape-red text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150">
Load tapes
</button>
<!-- Next Tape Button (still allows manual skip) --><button id="nextTapeButton" class="tape-button px-6 py-3 bg-gray-600 text-white font-bold text-lg uppercase tracking-wider rounded-lg opacity-50 cursor-not-allowed" disabled>
Next (0/0)
</button>
</div>
<!-- Status message area --><p id="status" class="text-sm text-yellow-300 text-center font-mono opacity-80">Ready.</p>
</div>
<!-- 3D Canvas will be injected here by Three.js --><script>
// --- Global Variables ---
let scene, camera, renderer, tvScreen, videoTexture, dust, screenLight, lampLight;
let isVideoLoaded = false;
let videoUrls = []; // Array to hold all video URLs
let currentVideoIndex = -1; // Index of the currently playing video
const originalLampIntensity = 1.5; // Base intensity for the flickering lamp
const originalScreenIntensity = 1.5; // Base intensity for the screen glow
const container = document.body;
const videoElement = document.getElementById('video');
const fileInput = document.getElementById('fileInput');
const statusText = document.getElementById('status');
const loadTapeButton = document.getElementById('loadTapeButton');
const nextTapeButton = document.getElementById('nextTapeButton');
// --- Initialization ---
function init() {
// 1. Scene Setup (Dark, Ambient)
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
// 2. Camera Setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.5, 4);
// 3. Renderer Setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// Enable shadows on the renderer
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
container.appendChild(renderer.domElement);
// 4. Lighting (Minimal and focused)
const ambientLight = new THREE.AmbientLight(0x444444);
scene.add(ambientLight);
// Light from the screen (initially low intensity, will increase when video loads)
screenLight = new THREE.PointLight(0xffffff, 0.1, 10);
// UPDATED POSITION: Moved further forward (Z=1.2) to make the screen glow more directional
screenLight.position.set(0, 1.7, 1.2);
// Screen light casts shadows
screenLight.castShadow = true;
screenLight.shadow.mapSize.width = 1024;
screenLight.shadow.mapSize.height = 1024;
screenLight.shadow.camera.near = 0.2;
screenLight.shadow.camera.far = 10;
scene.add(screenLight);
// 5. Build the entire scene with TV and surrounding objects
createSceneObjects();
// 6. Create the Dust Particle System
createDust();
// 7. Create the Room Walls and Ceiling
createRoomWalls();
// --- 8. Debug Visualization Helpers ---
// Visual aids for the light source positions
if (THREE.PointLightHelper) {
const screenHelper = new THREE.PointLightHelper(screenLight, 0.1, 0xff0000); // Red for screen
scene.add(screenHelper);
// Lamp Helper will now work since lampLight is added to the scene
const lampHelper = new THREE.PointLightHelper(lampLight, 0.1, 0x00ff00); // Green for lamp
scene.add(lampHelper);
}
// 9. Event Listeners
window.addEventListener('resize', onWindowResize, false);
fileInput.addEventListener('change', loadVideoFile);
// Button logic
loadTapeButton.addEventListener('click', () => {
fileInput.click();
});
nextTapeButton.addEventListener('click', playNextVideo);
// Auto-advance to the next video when the current one finishes.
videoElement.addEventListener('ended', playNextVideo);
// Start the animation loop
animate();
}
// --- Procedural Texture Function ---
function createStainTexture() {
const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
const ctx = canvas.getContext('2d');
// 1. Dark Gray Base
ctx.fillStyle = '#444444'; // Base dark gray
ctx.fillRect(0, 0, 256, 256);
// 2. Add Stains/Noise
for (let i = 0; i < 70; i++) {
// Random dark spots (simulating stains/irregularity)
const x = Math.random() * 256;
const y = Math.random() * 256;
const radius = Math.random() * 25 + 10;
const opacity = Math.random() * 0.4 + 0.1;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(10, 10, 10, ${opacity})`; // Very dark, transparent gray
ctx.fill();
}
const texture = new THREE.CanvasTexture(canvas);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4); // Repeat the texture on the large planes
return texture;
}
// --- Room Walls Function ---
function createRoomWalls() {
const wallTexture = createStainTexture();
// USING MeshPhongMaterial for specular highlights on walls
const wallMaterial = new THREE.MeshPhongMaterial({
map: wallTexture,
side: THREE.FrontSide,
shininess: 5,
specular: 0x111111 // Subtle reflection
});
const roomSize = 15;
const roomHeight = 8;
// 1. Back Wall (behind the TV)
const backWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
backWall.position.set(0, roomHeight / 2, -roomSize / 2);
backWall.receiveShadow = true;
scene.add(backWall);
// 2. Front Wall (behind the camera)
const frontWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
frontWall.position.set(0, roomHeight / 2, roomSize / 2);
frontWall.rotation.y = Math.PI;
frontWall.receiveShadow = true;
scene.add(frontWall);
// 3. Left Wall
const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
leftWall.rotation.y = Math.PI / 2;
leftWall.position.set(-roomSize / 2, roomHeight / 2, 0);
leftWall.receiveShadow = true;
scene.add(leftWall);
// 4. Right Wall
const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
rightWall.rotation.y = -Math.PI / 2;
rightWall.position.set(roomSize / 2, roomHeight / 2, 0);
rightWall.receiveShadow = true;
scene.add(rightWall);
// 5. Ceiling
const ceilingGeometry = new THREE.PlaneGeometry(roomSize, roomSize);
const ceilingTexture = createStainTexture();
ceilingTexture.repeat.set(4, 4);
// USING MeshPhongMaterial
const ceilingMaterial = new THREE.MeshPhongMaterial({
map: ceilingTexture,
side: THREE.FrontSide,
shininess: 5,
specular: 0x111111
});
const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial);
ceiling.rotation.x = Math.PI / 2;
ceiling.position.set(0, roomHeight, 0);
ceiling.receiveShadow = true;
scene.add(ceiling);
// --- 6. Add a Window to the Back Wall ---
const windowWidth = 1.5;
const windowHeight = 1.2;
const windowGeometry = new THREE.PlaneGeometry(windowWidth, windowHeight);
const nightSkyMaterial = new THREE.MeshBasicMaterial({
color: 0x0a1a3a,
emissive: 0x0a1a3a,
emissiveIntensity: 0.5,
side: THREE.FrontSide
});
const windowPane = new THREE.Mesh(windowGeometry, nightSkyMaterial);
const windowZ = -roomSize / 2 + 0.001;
windowPane.position.set(-2.5, roomHeight * 0.5 + 0.5, windowZ);
scene.add(windowPane);
// USING MeshPhongMaterial for the frame
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x4d3934, shininess: 10 });
// Horizontal bar
const hBarGeometry = new THREE.BoxGeometry(windowWidth + 0.1, 0.05, 0.05);
const hBar = new THREE.Mesh(hBarGeometry, frameMaterial);
hBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
hBar.castShadow = true;
scene.add(hBar);
// Vertical bar
const vBarGeometry = new THREE.BoxGeometry(0.05, windowHeight + 0.1, 0.05);
const vBar = new THREE.Mesh(vBarGeometry, frameMaterial);
vBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
vBar.castShadow = true;
scene.add(vBar);
}
// --- Scene Modeling Function ---
function createSceneObjects() {
// --- Materials (MeshPhongMaterial) ---
const darkWood = new THREE.MeshPhongMaterial({ color: 0x3d352e, shininess: 10 });
const darkMetal = new THREE.MeshPhongMaterial({
color: 0x6b6b6b,
shininess: 80,
specular: 0x888888
});
const tvPlastic = new THREE.MeshPhongMaterial({ color: 0x2d251e, shininess: 10 });
// --- 1. Floor ---
const floorGeometry = new THREE.PlaneGeometry(20, 20);
const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a, shininess: 5 });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = 0;
floor.receiveShadow = true;
scene.add(floor);
// --- 2. Table (TV stand) ---
const tableGeometry = new THREE.BoxGeometry(4.0, 0.7, 2.5);
const table = new THREE.Mesh(tableGeometry, darkWood);
table.position.y = 0.35;
table.castShadow = true;
table.receiveShadow = true;
scene.add(table);
// --- 3. The TV Set ---
const cabinetGeometry = new THREE.BoxGeometry(2.8, 2, 1.5);
const cabinet = new THREE.Mesh(cabinetGeometry, tvPlastic);
cabinet.position.y = 1.7;
cabinet.castShadow = true;
cabinet.receiveShadow = true;
scene.add(cabinet);
// Screen Frame
const frameGeometry = new THREE.BoxGeometry(2.3, 1.6, 0.2);
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 20 });
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
frame.position.set(0, 1.7, 0.68);
frame.castShadow = true;
frame.receiveShadow = true;
scene.add(frame);
// --- 4. Curved Screen (CRT Effect) ---
const screenRadius = 3.0; // Radius for the subtle curve
const screenWidth = 2.3;
const screenHeight = 1.5;
const thetaLength = screenWidth / screenRadius; // Calculate angle needed for the arc
// Use CylinderGeometry as a segment
const screenGeometry = new THREE.CylinderGeometry(
screenRadius, screenRadius,
screenHeight, // Cylinder height is the vertical dimension of the screen
32,
1,
true,
(Math.PI / 2) - (thetaLength / 2), // Start angle to center the arc
thetaLength // Arc length (width)
);
// Rotate the cylinder segment:
// 1. Rotate around X-axis by 90 degrees to lay the height (Y) along Z (depth).
//screenGeometry.rotateX(Math.PI / 2);
// 2. Rotate around Y-axis by 90 degrees to align the segment's arc across the X-axis (width).
screenGeometry.rotateY(-Math.PI/2);
const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
// Position the curved screen
tvScreen.position.set(0, 1.7, -2);
scene.add(tvScreen);
// --- 5. Lamp (On the table, right side) ---
const lampBase = new THREE.CylinderGeometry(0.1, 0.2, 0.1, 12);
const lampPole = new THREE.CylinderGeometry(0.05, 0.05, 0.6, 8);
const lampShade = new THREE.ConeGeometry(0.3, 0.4, 16);
const baseMesh = new THREE.Mesh(lampBase, darkMetal);
const poleMesh = new THREE.Mesh(lampPole, darkMetal);
const shadeMesh = new THREE.Mesh(lampShade, darkMetal);
// Ensure lamp parts cast shadows
baseMesh.castShadow = true; baseMesh.receiveShadow = true;
poleMesh.castShadow = true; poleMesh.receiveShadow = true;
shadeMesh.castShadow = true; shadeMesh.receiveShadow = true;
poleMesh.position.y = 0.3;
shadeMesh.position.y = 0.8 + 0.1;
shadeMesh.rotation.x = Math.PI;
const lampGroup = new THREE.Group();
lampGroup.add(baseMesh, poleMesh, shadeMesh);
lampGroup.position.set(2.5, 0.7, -0.6);
// Lamp Light (Warm Glow) - Configured to cast shadows
lampLight = new THREE.PointLight(0xffaa00, originalLampIntensity, 4);
lampLight.position.set(2.5, 1.35, -0.6);
lampLight.castShadow = true;
// Optimization: Reduced map size and far plane to ease resource burden
lampLight.shadow.mapSize.width = 512;
lampLight.shadow.mapSize.height = 512;
lampLight.shadow.camera.near = 0.1;
lampLight.shadow.camera.far = 4; // Matches the light's attenuation distance (4)
// Crucially, add the lamp group and its light to the scene
scene.add(lampGroup, lampLight);
// --- 6. Vase with a Flower (On the table, left side) ---
const vaseGeometry = new THREE.CylinderGeometry(0.2, 0.15, 0.4, 12);
const vaseMaterial = new THREE.MeshPhongMaterial({ color: 0x356644, shininess: 15 });
const vase = new THREE.Mesh(vaseGeometry, vaseMaterial);
vase.position.set(0, -0.2, 0);
vase.castShadow = true; vase.receiveShadow = true;
// Flower
const flowerStem = new THREE.CylinderGeometry(0.01, 0.01, 0.3, 8);
const flowerHead = new THREE.SphereGeometry(0.08, 10, 10);
const stemMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22, shininess: 10 });
const headMaterial = new THREE.MeshPhongMaterial({ color: 0xdd2222, shininess: 30 });
const stem = new THREE.Mesh(flowerStem, stemMaterial);
stem.position.y = 0.1;
const head = new THREE.Mesh(flowerHead, headMaterial);
head.position.y = 0.3;
stem.castShadow = true; head.castShadow = true;
stem.receiveShadow = true; head.receiveShadow = true;
const flowerGroup = new THREE.Group();
flowerGroup.add(stem, head, vase);
flowerGroup.position.set(-1.65, 1.1, 1);
scene.add(flowerGroup);
// --- 7. Old Camera (On the table) ---
const cameraBody = new THREE.BoxGeometry(0.4, 0.3, 0.2);
const cameraLens = new THREE.CylinderGeometry(0.08, 0.08, 0.05, 12);
const cameraMaterial = new THREE.MeshPhongMaterial({
color: 0x333333,
shininess: 50,
specular: 0x444444
});
const cameraMesh = new THREE.Mesh(cameraBody, cameraMaterial);
const lensMesh = new THREE.Mesh(cameraLens, cameraMaterial);
lensMesh.position.z = 0.15;
cameraMesh.add(lensMesh);
cameraMesh.position.set(-2.0, 0.7 + 0.15, -0.4);
cameraMesh.rotation.y = -Math.PI / 10;
cameraMesh.castShadow = true; cameraMesh.receiveShadow = true;
scene.add(cameraMesh);
// --- 8. Pizza Box (On the table) ---
const boxGeometry = new THREE.BoxGeometry(0.5, 0.05, 0.5);
const boxMaterial = new THREE.MeshPhongMaterial({ color: 0xe0c896, shininess: 5 });
const pizzaBox = new THREE.Mesh(boxGeometry, boxMaterial);
pizzaBox.position.set(1.8, 0.7 + 0.025, 0.8);
pizzaBox.rotation.y = Math.PI / 5;
pizzaBox.castShadow = true; pizzaBox.receiveShadow = true;
scene.add(pizzaBox);
}
// --- Dust Particle System Function ---
function createDust() {
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
);
}
// Use THREE.Float32BufferAttribute to correctly set the position attribute
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
});
dust = new THREE.Points(particlesGeometry, particleMaterial);
// Dust particles generally don't cast or receive shadows in this context
scene.add(dust);
}
// --- Helper function to format seconds into MM:SS ---
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}`;
}
// --- Helper function to update the control buttons' state and text ---
function updateControls() {
const total = videoUrls.length;
const current = currentVideoIndex + 1;
if (total > 1) {
nextTapeButton.disabled = false;
nextTapeButton.classList.remove('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
nextTapeButton.classList.add('bg-tape-red', 'hover:bg-red-700');
} else {
nextTapeButton.disabled = true;
nextTapeButton.classList.add('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
nextTapeButton.classList.remove('bg-tape-red', 'hover:bg-red-700');
}
// Always show the current tape count
nextTapeButton.textContent = `Next (${current}/${total})`;
}
// --- Play video by index ---
function playVideoByIndex(index) {
if (index < 0 || index >= videoUrls.length) {
statusText.textContent = 'End of playlist reached. Reload tapes to start again.';
screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
return;
}
currentVideoIndex = index;
const url = videoUrls[index];
// Dispose of previous texture to free resources
if (videoTexture) {
videoTexture.dispose();
videoTexture = null;
}
videoElement.src = url;
videoElement.muted = true;
videoElement.load();
// Set loop property: only loop if it's the only video loaded
videoElement.loop = videoUrls.length === 1;
videoElement.onloadeddata = () => {
// 1. Create the Three.js texture
videoTexture = new THREE.VideoTexture(videoElement);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBAFormat;
videoTexture.needsUpdate = true;
// 2. Apply the video texture to the screen mesh
tvScreen.material.dispose();
tvScreen.material = new THREE.MeshBasicMaterial({ map: videoTexture });
tvScreen.material.needsUpdate = true;
// 3. Start playback
videoElement.play().then(() => {
isVideoLoaded = true;
// Use the defined base intensity for screen glow
screenLight.intensity = originalScreenIntensity;
// Initial status message with tape count
statusText.textContent = `Playing tape ${currentVideoIndex + 1} of ${videoUrls.length}.`;
updateControls();
}).catch(error => {
screenLight.intensity = 0.5; // Dim the light if playback fails
statusText.textContent = `Playback blocked for tape ${currentVideoIndex + 1}. Click Next Tape to try again.`;
console.error('Playback Error: Could not start video playback.', error);
});
};
videoElement.onerror = (e) => {
screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
statusText.textContent = `Error loading tape ${currentVideoIndex + 1}.`;
console.error('Video Load Error:', e);
};
}
// --- Cycle to the next video ---
function playNextVideo() {
if (videoUrls.length > 0) {
// Determine the next index, cycling back to 0 if we reach the end
let nextIndex = (currentVideoIndex + 1) % videoUrls.length;
playVideoByIndex(nextIndex);
}
}
// --- Video Loading Logic (handles multiple files) ---
function loadVideoFile(event) {
const files = event.target.files;
if (files.length === 0) {
statusText.textContent = 'File selection cancelled.';
return;
}
// 1. Clear previous URLs and revoke object URLs to prevent memory leaks
videoUrls.forEach(url => URL.revokeObjectURL(url));
videoUrls = [];
// 2. Populate the new videoUrls array
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.type.startsWith('video/')) {
videoUrls.push(URL.createObjectURL(file));
}
}
if (videoUrls.length === 0) {
statusText.textContent = 'No valid video files selected.';
updateControls();
return;
}
// 3. Start playback of the first video
statusText.textContent = `Loaded ${videoUrls.length} tapes. Starting playback...`;
playVideoByIndex(0);
}
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
// 1. Dust animation: slow downward drift
if (dust) {
const positions = dust.geometry.attributes.position.array;
for (let i = 1; i < positions.length; i += 3) {
positions[i] -= 0.005;
if (positions[i] < -2) {
positions[i] = 8;
}
}
dust.geometry.attributes.position.needsUpdate = true;
}
// 2. Camera movement (Gentle, random hovering)
const globalTime = Date.now() * 0.00005;
const lookAtTime = Date.now() * 0.00003;
const camAmplitude = 0.6;
const lookAmplitude = 0.05;
// Base Camera Position in front of the TV
const baseX = 0;
const baseY = 1.5;
const baseZ = 4;
// Base LookAt target (Center of the screen)
const baseTargetX = 0;
const baseTargetY = 1.7;
const baseTargetZ = 0.96;
// Camera Position Offsets (Drift)
const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.4;
camera.position.x = baseX + camOffsetX;
camera.position.y = baseY + camOffsetY;
camera.position.z = baseZ;
// LookAt Target Offsets (Subtle Gaze Shift)
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
// Apply lookAt to the subtly shifted target
camera.lookAt(
baseTargetX + lookOffsetX,
baseTargetY + lookOffsetY,
baseTargetZ
);
// 3. Lamp Flicker Effect
const flickerChance = 0.995;
const restoreRate = 0.15;
if (Math.random() > flickerChance) {
// Flickers quickly to a dimmer random value (between 0.3 and 1.05)
lampLight.intensity = originalLampIntensity * (0.3 + Math.random() * 0.7);
} else if (lampLight.intensity < originalLampIntensity) {
// Smoothly restore original intensity
lampLight.intensity = THREE.MathUtils.lerp(lampLight.intensity, originalLampIntensity, restoreRate);
}
// 4. Screen Light Pulse and Movement Effect (Updated)
if (isVideoLoaded && screenLight.intensity > 0) {
// A. Pulse Effect (Intensity Fluctuation)
// Generate a small random fluctuation for the pulse (Range: 1.35 to 1.65 around base 1.5)
const pulseTarget = originalScreenIntensity + (Math.random() - 0.5) * 0.7;
// Smoothly interpolate towards the new target fluctuation
screenLight.intensity = THREE.MathUtils.lerp(screenLight.intensity, pulseTarget, 0.1);
// B. Movement Effect (Subtle circle around the screen center - circling the room area)
const lightTime = Date.now() * 0.002;
const radius = 0.05; // Small circle radius (5 cm)
const centerX = 0;
const centerY = 1.7;
const centerZ = 1.2; // Use the updated Z position of the light source
// Move the light in a subtle, erratic circle
screenLight.position.x = centerX + Math.cos(lightTime) * radius;
screenLight.position.y = centerY + Math.sin(lightTime * 1.5) * radius * 0.5; // Slightly different freq for Y
screenLight.position.z = centerZ; // Keep Z constant at the screen light plane
}
// 5. Update video texture (essential to grab the next frame)
if (videoTexture) {
videoTexture.needsUpdate = true;
// Update time display in the animation loop
if (isVideoLoaded && videoElement.readyState >= 3) {
const currentTime = formatTime(videoElement.currentTime);
const duration = formatTime(videoElement.duration);
statusText.textContent =
`Tape ${currentVideoIndex + 1} of ${videoUrls.length}. Time: ${currentTime} / ${duration}`;
}
}
// RENDER!
renderer.render(scene, camera);
}
// --- Window Resize Handler ---
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Start everything on window load
window.onload = init;
</script>
</body>
</html>

731
tv-player/index_v4.html Normal file
View File

@ -0,0 +1,731 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro TV Video Player (3D)</title>
<!-- Load Tailwind CSS for styling --><script src="https://cdn.tailwindcss.com"></script>
<script>
// Configure Tailwind for the button
tailwind.config = {
theme: {
extend: {
colors: {
'tape-red': '#cc3333',
},
}
}
}
</script>
<!-- Load Three.js for 3D rendering --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
/* Dark room aesthetic */
body {
background-color: #0d0d10;
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
}
canvas {
display: block;
}
/* Custom styles for the Load Tape button */
.tape-button {
transition: all 0.2s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tape-button:active {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
</style>
</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="tape-button px-8 py-3 bg-tape-red text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150">
Load tapes
</button>
<!-- Next Tape Button (still allows manual skip) --><button id="nextTapeButton" class="tape-button px-6 py-3 bg-gray-600 text-white font-bold text-lg uppercase tracking-wider rounded-lg opacity-50 cursor-not-allowed" disabled>
Next (0/0)
</button>
</div>
<!-- Status message area --><p id="status" class="text-sm text-yellow-300 text-center font-mono opacity-80">Ready.</p>
</div>
<!-- 3D Canvas will be injected here by Three.js --><script>
// --- Global Variables ---
let scene, camera, renderer, tvScreen, videoTexture, dust, screenLight, lampLight;
let isVideoLoaded = false;
let videoUrls = []; // Array to hold all video URLs
let currentVideoIndex = -1; // Index of the currently playing video
let vcrDisplayTexture; // Global reference for the VCR canvas texture
let vcrDisplayMesh;
const originalLampIntensity = 1.5; // Base intensity for the flickering lamp
const originalScreenIntensity = 1.5; // Base intensity for the screen glow
const container = document.body;
const videoElement = document.getElementById('video');
const fileInput = document.getElementById('fileInput');
const statusText = document.getElementById('status');
const loadTapeButton = document.getElementById('loadTapeButton');
const nextTapeButton = document.getElementById('nextTapeButton');
// --- Initialization ---
function init() {
// 1. Scene Setup (Dark, Ambient)
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
// 2. Camera Setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.5, 4);
// 3. Renderer Setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
// Enable shadows on the renderer
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
container.appendChild(renderer.domElement);
// 4. Lighting (Minimal and focused)
const ambientLight = new THREE.AmbientLight(0x444444);
scene.add(ambientLight);
// Light from the screen (initially low intensity, will increase when video loads)
screenLight = new THREE.PointLight(0xffffff, 0.1, 10);
// UPDATED POSITION: Moved further forward (Z=1.2) to make the screen glow more directional
screenLight.position.set(0, 1.7, 1.2);
// Screen light casts shadows
screenLight.castShadow = true;
screenLight.shadow.mapSize.width = 1024;
screenLight.shadow.mapSize.height = 1024;
screenLight.shadow.camera.near = 0.2;
screenLight.shadow.camera.far = 10;
scene.add(screenLight);
// 5. Build the entire scene with TV and surrounding objects
createSceneObjects();
// 6. Create the Dust Particle System
createDust();
// 7. Create the Room Walls and Ceiling
createRoomWalls();
// --- 8. Debug Visualization Helpers ---
// Visual aids for the light source positions
if (THREE.PointLightHelper) {
const screenHelper = new THREE.PointLightHelper(screenLight, 0.1, 0xff0000); // Red for screen
scene.add(screenHelper);
// Lamp Helper will now work since lampLight is added to the scene
const lampHelper = new THREE.PointLightHelper(lampLight, 0.1, 0x00ff00); // Green for lamp
scene.add(lampHelper);
}
// 9. Event Listeners
window.addEventListener('resize', onWindowResize, false);
fileInput.addEventListener('change', loadVideoFile);
// Button logic
loadTapeButton.addEventListener('click', () => {
fileInput.click();
});
nextTapeButton.addEventListener('click', playNextVideo);
// Auto-advance to the next video when the current one finishes.
videoElement.addEventListener('ended', playNextVideo);
// Start the animation loop
animate();
}
// --- Procedural Texture Function (for walls) ---
function createStainTexture() {
const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
const ctx = canvas.getContext('2d');
// 1. Dark Gray Base
ctx.fillStyle = '#444444'; // Base dark gray
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 2. Add Stains/Noise
for (let i = 0; i < 70; i++) {
// Random dark spots (simulating stains/irregularity)
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const radius = Math.random() * 25 + 10;
const opacity = Math.random() * 0.4 + 0.1;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(10, 10, 10, ${opacity})`; // Very dark, transparent gray
ctx.fill();
}
const texture = new THREE.CanvasTexture(canvas);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4); // Repeat the texture on the large planes
return texture;
}
// --- Room Walls Function (omitted for brevity, assume content is stable) ---
function createRoomWalls() {
const wallTexture = createStainTexture();
const wallMaterial = new THREE.MeshPhongMaterial({
map: wallTexture,
side: THREE.FrontSide,
shininess: 5,
specular: 0x111111
});
const roomSize = 15;
const roomHeight = 8;
const backWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
backWall.position.set(0, roomHeight / 2, -roomSize / 2);
backWall.receiveShadow = true;
scene.add(backWall);
const frontWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
frontWall.position.set(0, roomHeight / 2, roomSize / 2);
frontWall.rotation.y = Math.PI;
frontWall.receiveShadow = true;
scene.add(frontWall);
const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
leftWall.rotation.y = Math.PI / 2;
leftWall.position.set(-roomSize / 2, roomHeight / 2, 0);
leftWall.receiveShadow = true;
scene.add(leftWall);
const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(roomSize, roomHeight), wallMaterial);
rightWall.rotation.y = -Math.PI / 2;
rightWall.position.set(roomSize / 2, roomHeight / 2, 0);
rightWall.receiveShadow = true;
scene.add(rightWall);
const ceilingGeometry = new THREE.PlaneGeometry(roomSize, roomSize);
const ceilingTexture = createStainTexture();
ceilingTexture.repeat.set(4, 4);
const ceilingMaterial = new THREE.MeshPhongMaterial({
map: ceilingTexture,
side: THREE.FrontSide,
shininess: 5,
specular: 0x111111
});
const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial);
ceiling.rotation.x = Math.PI / 2;
ceiling.position.set(0, roomHeight, 0);
ceiling.receiveShadow = true;
scene.add(ceiling);
const windowWidth = 1.5;
const windowHeight = 1.2;
const windowGeometry = new THREE.PlaneGeometry(windowWidth, windowHeight);
const nightSkyMaterial = new THREE.MeshBasicMaterial({
color: 0x0a1a3a,
emissive: 0x0a1a3a,
emissiveIntensity: 0.5,
side: THREE.FrontSide
});
const windowPane = new THREE.Mesh(windowGeometry, nightSkyMaterial);
const windowZ = -roomSize / 2 + 0.001;
windowPane.position.set(-2.5, roomHeight * 0.5 + 0.5, windowZ);
scene.add(windowPane);
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x4d3934, shininess: 10 });
const hBarGeometry = new THREE.BoxGeometry(windowWidth + 0.1, 0.05, 0.05);
const hBar = new THREE.Mesh(hBarGeometry, frameMaterial);
hBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
hBar.castShadow = true;
scene.add(hBar);
const vBarGeometry = new THREE.BoxGeometry(0.05, windowHeight + 0.1, 0.05);
const vBar = new THREE.Mesh(vBarGeometry, frameMaterial);
vBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
vBar.castShadow = true;
scene.add(vBar);
}
// --- VCR Display Functions ---
function createVcrDisplay() {
const canvas = document.createElement('canvas');
canvas.width = 128;
canvas.height = 32;
const ctx = canvas.getContext('2d');
// Initial draw: set dark background
ctx.fillStyle = '#1a1a1a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
vcrDisplayTexture = new THREE.CanvasTexture(canvas);
vcrDisplayTexture.needsUpdate = true;
// Create the display mesh (small plane)
const displayGeometry = new THREE.PlaneGeometry(0.35, 0.1);
const displayMaterial = new THREE.MeshBasicMaterial({
map: vcrDisplayTexture,
side: THREE.FrontSide,
color: 0xffffff,
transparent: true,
// Initial high emissive/color will be set in animate for debugging visibility
emissive: 0xff0000,
emissiveIntensity: 0.1,
name: 'VCR_Display_Material'
});
const displayMesh = new THREE.Mesh(displayGeometry, displayMaterial);
return displayMesh;
}
function updateVcrDisplay(currentTime) {
if (!vcrDisplayTexture) return;
const canvas = vcrDisplayTexture.image;
const ctx = canvas.getContext('2d');
const timeString = formatTime(currentTime);
const isNotPlaying = timeString === '00:00' && !isVideoLoaded;
// Clear display (use a slightly brighter background for contrast)
ctx.fillStyle = '#1a1a1a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw the time (MM:SS) - increased font size for visibility
ctx.font = 'bold 28px "monospace"';
ctx.textAlign = 'right';
// If not playing, use a bright reddish color for initial visibility/highlighting
ctx.fillStyle = isNotPlaying ? '#ff6666' : '#00ff44'; // Red glow if idle, green if playing
// Center the text vertically and place it to the right
ctx.fillText(timeString, canvas.width - 5, canvas.height / 2 + 10);
vcrDisplayTexture.needsUpdate = true;
}
// --- VCR Model Function ---
function createVcr() {
// VCR Body (Metallic Gray)
const vcrBodyGeometry = new THREE.BoxGeometry(1.0, 0.2, 0.7);
const vcrBodyMaterial = new THREE.MeshPhongMaterial({
color: 0x222222, // Dark metallic gray
shininess: 70,
specular: 0x444444
});
const vcrBody = new THREE.Mesh(vcrBodyGeometry, vcrBodyMaterial);
// Cassette Slot / Front Face (Black)
const slotGeometry = new THREE.BoxGeometry(0.9, 0.05, 0.01);
const slotMaterial = new THREE.MeshPhongMaterial({
color: 0x0a0a0a, // Deep black
shininess: 5,
specular: 0x111111
});
const slotMesh = new THREE.Mesh(slotGeometry, slotMaterial);
// Position on the front face (VCR depth is 0.7)
slotMesh.position.set(0, -0.05, 0.35 + 0.005);
// VCR Display Mesh (named 'vcr_display_mesh' inside the function)
const displayMesh = createVcrDisplay();
vcrDisplayMesh = displayMesh;
// Position relative to the center of the VCR front face
displayMesh.position.z = 0.35 + 0.006; // Push forward slightly more than the slot
displayMesh.position.x = 0.3; // Right side of the VCR
displayMesh.position.y = 0.03; // Slightly higher than center
// VCR Group
const vcrGroup = new THREE.Group();
vcrGroup.add(vcrBody, slotMesh, displayMesh);
// Position VCR on the table, to the left of the TV
vcrGroup.position.set(-1.4, 0.7 + 0.1, 0.3);
vcrGroup.castShadow = true;
vcrGroup.receiveShadow = true;
return vcrGroup;
}
// --- Scene Modeling Function (omitted for brevity, assume content is stable) ---
function createSceneObjects() {
// --- Materials (MeshPhongMaterial) ---
const darkWood = new THREE.MeshPhongMaterial({ color: 0x3d352e, shininess: 10 });
const tvPlastic = new THREE.MeshPhongMaterial({
color: 0x242429, flatShading: true, shininess: 40, specular: 0x444444
});
// 1. Floor
const floorGeometry = new THREE.PlaneGeometry(20, 20);
const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a, shininess: 5 });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = 0;
floor.receiveShadow = true;
scene.add(floor);
// 2. Table (TV stand)
const tableGeometry = new THREE.BoxGeometry(4.0, 0.7, 2.5);
const table = new THREE.Mesh(tableGeometry, darkWood);
table.position.y = 0.35;
table.castShadow = true; table.receiveShadow = true;
scene.add(table);
// 3. The TV Set
const cabinetGeometry = new THREE.BoxGeometry(2.8, 2, 1.5);
const cabinet = new THREE.Mesh(cabinetGeometry, tvPlastic);
cabinet.position.y = 1.7;
cabinet.castShadow = true; cabinet.receiveShadow = true;
scene.add(cabinet);
// Screen Frame
const frameGeometry = new THREE.BoxGeometry(2.3, 1.6, 0.2);
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 20 });
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
frame.position.set(0, 1.7, 0.8);
frame.castShadow = true; frame.receiveShadow = true;
scene.add(frame);
// 4. Curved Screen (CRT Effect)
const screenRadius = 3.0; const screenWidth = 2.0; const screenHeight = 1.3;
const thetaLength = screenWidth / screenRadius;
const screenGeometry = new THREE.CylinderGeometry(
screenRadius, screenRadius, screenHeight, 32, 1, true,
(Math.PI / 2) - (thetaLength / 2), thetaLength
);
screenGeometry.rotateX(Math.PI / 2); screenGeometry.rotateY(Math.PI / 2);
const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
tvScreen.position.set(0, 1.7, 0.96);
scene.add(tvScreen);
// 5. VCR
scene.add(createVcr());
// 6. Lamp
const darkMetal = new THREE.MeshPhongMaterial({ color: 0x6b6b6b, shininess: 80, specular: 0x888888 });
const lampBase = new THREE.CylinderGeometry(0.1, 0.2, 0.1, 12);
const lampPole = new THREE.CylinderGeometry(0.05, 0.05, 0.6, 8);
const lampShade = new THREE.ConeGeometry(0.3, 0.4, 16);
const baseMesh = new THREE.Mesh(lampBase, darkMetal);
const poleMesh = new THREE.Mesh(lampPole, darkMetal);
const shadeMesh = new THREE.Mesh(lampShade, darkMetal);
baseMesh.castShadow = true; baseMesh.receiveShadow = true;
poleMesh.castShadow = true; poleMesh.receiveShadow = true;
shadeMesh.castShadow = true; shadeMesh.receiveShadow = true;
poleMesh.position.y = 0.3; shadeMesh.position.y = 0.8 + 0.1; shadeMesh.rotation.x = Math.PI;
const lampGroup = new THREE.Group();
lampGroup.add(baseMesh, poleMesh, shadeMesh);
lampGroup.position.set(2.5, 0.7, -0.6);
lampLight = new THREE.PointLight(0xffaa00, originalLampIntensity, 4);
lampLight.position.set(2.5, 1.35, -0.6);
lampLight.castShadow = true;
lampLight.shadow.mapSize.width = 512; lampLight.shadow.mapSize.height = 512;
lampLight.shadow.camera.near = 0.1; lampLight.shadow.camera.far = 4;
scene.add(lampGroup, lampLight);
// 7. Vase with a Flower
const vaseGeometry = new THREE.CylinderGeometry(0.2, 0.15, 0.4, 12);
const vaseMaterial = new THREE.MeshPhongMaterial({ color: 0x356644, shininess: 15 });
const vase = new THREE.Mesh(vaseGeometry, vaseMaterial);
vase.position.set(1.5, 0.7 + 0.2, 0.8);
vase.castShadow = true; vase.receiveShadow = true;
const flowerStem = new THREE.CylinderGeometry(0.01, 0.01, 0.3, 8);
const flowerHead = new THREE.SphereGeometry(0.08, 10, 10);
const stemMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22, shininess: 10 });
const headMaterial = new THREE.MeshPhongMaterial({ color: 0xdd2222, shininess: 30 });
const stem = new THREE.Mesh(flowerStem, stemMaterial);
stem.position.y = 0.1;
const head = new THREE.Mesh(flowerHead, headMaterial);
head.position.y = 0.3;
stem.castShadow = true; head.castShadow = true;
stem.receiveShadow = true; head.receiveShadow = true;
const flowerGroup = new THREE.Group();
flowerGroup.add(stem, head);
flowerGroup.position.set(1.5, 1.1, 0.8);
scene.add(vase, flowerGroup);
// 8. Old Camera
const cameraBody = new THREE.BoxGeometry(0.4, 0.3, 0.2);
const cameraLens = new THREE.CylinderGeometry(0.08, 0.08, 0.05, 12);
const cameraMaterial = new THREE.MeshPhongMaterial({ color: 0x333333, shininess: 50, specular: 0x444444 });
const cameraMesh = new THREE.Mesh(cameraBody, cameraMaterial);
const lensMesh = new THREE.Mesh(cameraLens, cameraMaterial);
lensMesh.position.z = 0.15;
cameraMesh.add(lensMesh);
cameraMesh.position.set(2.0, 0.7 + 0.15, -0.4);
cameraMesh.rotation.y = -Math.PI / 10;
cameraMesh.castShadow = true; cameraMesh.receiveShadow = true;
scene.add(cameraMesh);
// 9. Pizza Box
const boxGeometry = new THREE.BoxGeometry(0.5, 0.05, 0.5);
const boxMaterial = new THREE.MeshPhongMaterial({ color: 0xe0c896, shininess: 5 });
const pizzaBox = new THREE.Mesh(boxGeometry, boxMaterial);
pizzaBox.position.set(1.0, 0.7 + 0.025, -0.8);
pizzaBox.rotation.y = Math.PI / 5;
pizzaBox.castShadow = true; pizzaBox.receiveShadow = true;
scene.add(pizzaBox);
}
// --- Dust Particle System Function (omitted for brevity, assume content is stable) ---
function createDust() {
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
});
dust = new THREE.Points(particlesGeometry, particleMaterial);
scene.add(dust);
}
// --- Helper function to format seconds into MM:SS ---
function formatTime(seconds) {
if (isNaN(seconds) || seconds === Infinity || seconds < 0) return '00:00'; // Default to 00:00 if invalid
const totalSeconds = Math.floor(seconds);
const minutes = Math.floor(totalSeconds / 60);
const remainingSeconds = totalSeconds % 60;
const paddedMinutes = String(minutes).padStart(2, '0');
const paddedSeconds = String(remainingSeconds).padStart(2, '0');
return `${paddedMinutes}:${paddedSeconds}`;
}
// --- Helper function to update the control buttons' state and text ---
function updateControls() {
const total = videoUrls.length;
const current = currentVideoIndex + 1;
if (total > 1) {
nextTapeButton.disabled = false;
nextTapeButton.classList.remove('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
nextTapeButton.classList.add('bg-tape-red', 'hover:bg-red-700');
} else {
nextTapeButton.disabled = true;
nextTapeButton.classList.add('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
nextTapeButton.classList.remove('bg-tape-red', 'hover:bg-red-700');
}
// Always show the current tape count
nextTapeButton.textContent = `Next (${current}/${total})`;
}
// --- Play video by index ---
function playVideoByIndex(index) {
if (index < 0 || index >= videoUrls.length) {
statusText.textContent = 'End of playlist reached. Reload tapes to start again.';
updateVcrDisplay(0);
screenLight.intensity = 0.1;
return;
}
currentVideoIndex = index;
const url = videoUrls[index];
if (videoTexture) {
videoTexture.dispose();
videoTexture = null;
}
videoElement.src = url;
videoElement.muted = true;
videoElement.load();
videoElement.loop = videoUrls.length === 1;
videoElement.onloadeddata = () => {
videoTexture = new THREE.VideoTexture(videoElement);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBAFormat;
videoTexture.needsUpdate = true;
if (tvScreen.material.map) tvScreen.material.map.dispose();
tvScreen.material.dispose();
tvScreen.material = new THREE.MeshBasicMaterial({ map: videoTexture, name: 'Screen_Playing_Material' });
tvScreen.material.needsUpdate = true;
videoElement.play().then(() => {
isVideoLoaded = true;
screenLight.intensity = originalScreenIntensity;
statusText.textContent = `Playing tape ${currentVideoIndex + 1} of ${videoUrls.length}.`;
updateControls();
}).catch(error => {
isVideoLoaded = false;
screenLight.intensity = 0.5;
statusText.textContent = `Playback blocked for tape ${currentVideoIndex + 1}. Click Load or Next Tape.`;
console.error('Playback Error: Could not start video playback.', error);
});
};
videoElement.onerror = (e) => {
isVideoLoaded = false;
screenLight.intensity = 0.1;
statusText.textContent = `Error loading tape ${currentVideoIndex + 1}.`;
console.error('Video Load Error:', e);
};
}
// --- Cycle to the next video ---
function playNextVideo() {
if (videoUrls.length > 0) {
let nextIndex = (currentVideoIndex + 1) % videoUrls.length;
playVideoByIndex(nextIndex);
}
}
// --- Video Loading Logic (handles multiple files) ---
function loadVideoFile(event) {
const files = event.target.files;
if (files.length === 0) {
statusText.textContent = 'File selection cancelled.';
return;
}
videoUrls.forEach(url => URL.revokeObjectURL(url));
videoUrls = [];
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.type.startsWith('video/')) {
videoUrls.push(URL.createObjectURL(file));
}
}
if (videoUrls.length === 0) {
statusText.textContent = 'No valid video files selected.';
updateControls();
return;
}
statusText.textContent = `Loaded ${videoUrls.length} tapes. Starting playback...`;
playVideoByIndex(0);
}
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
// 1. Dust animation: slow downward drift (omitted for brevity)
if (dust) {
const positions = dust.geometry.attributes.position.array;
for (let i = 1; i < positions.length; i += 3) {
positions[i] -= 0.005;
if (positions[i] < -2) { positions[i] = 8; }
}
dust.geometry.attributes.position.needsUpdate = true;
}
// 2. Camera movement (omitted for brevity)
const globalTime = Date.now() * 0.00005;
const lookAtTime = Date.now() * 0.00003;
const camAmplitude = 0.6; const lookAmplitude = 0.05;
const baseX = 0; const baseY = 1.5; const baseZ = 4;
const baseTargetX = 0; const baseTargetY = 1.7; const baseTargetZ = 0.96;
const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.4;
camera.position.x = baseX + camOffsetX;
camera.position.y = baseY + camOffsetY;
camera.position.z = baseZ;
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
camera.lookAt(baseTargetX + lookOffsetX, baseTargetY + lookOffsetY, baseTargetZ);
// 3. Lamp Flicker Effect (omitted for brevity)
const flickerChance = 0.995;
const restoreRate = 0.15;
if (Math.random() > flickerChance) {
lampLight.intensity = originalLampIntensity * (0.3 + Math.random() * 0.7);
} else if (lampLight.intensity < originalLampIntensity) {
lampLight.intensity = THREE.MathUtils.lerp(lampLight.intensity, originalLampIntensity, restoreRate);
}
// 4. Screen Light Pulse and VCR Highlight/Update Effect
if (isVideoLoaded && screenLight.intensity > 0) {
// A. Screen Pulse Effect (omitted for brevity)
const pulseTarget = originalScreenIntensity + (Math.random() - 0.5) * 0.3;
screenLight.intensity = THREE.MathUtils.lerp(screenLight.intensity, pulseTarget, 0.1);
const lightTime = Date.now() * 0.002;
const radius = 0.05;
const centerX = 0; const centerY = 1.7; const centerZ = 1.2;
screenLight.position.x = centerX + Math.cos(lightTime) * radius;
screenLight.position.y = centerY + Math.sin(lightTime * 1.5) * radius * 0.5;
screenLight.position.z = centerZ;
// B. VCR NORMAL STATE (Playing video)
if (vcrDisplayMesh) {
//vcrDisplayMesh.material.emissive.setHex(0x00ff44); // Green glow
//vcrDisplayMesh.material.emissiveIntensity = 0.1;
}
// C. Update time display in the animation loop
if (videoTexture && videoElement.readyState >= 3) {
updateVcrDisplay(videoElement.currentTime);
const formattedCurrentTime = formatTime(videoElement.currentTime);
const formattedDuration = formatTime(videoElement.duration);
statusText.textContent =
`Tape ${currentVideoIndex + 1} of ${videoUrls.length}. Time: ${formattedCurrentTime} / ${formattedDuration}`;
}
} else {
// VCR DEBUG HIGHLIGHT STATE (Not playing video)
updateVcrDisplay(0); // Ensure '00:00' is drawn
if (vcrDisplayMesh) {
// This is the highlight: Bright Red Glow to locate the display
//vcrDisplayMesh.material.emissive.setHex(0xff0000);
//vcrDisplayMesh.material.emissiveIntensity = 3.0; // Very intense glow
}
}
renderer.render(scene, camera);
}
// --- Window Resize Handler ---
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Start everything on window load
window.onload = init;
</script>
</body>
</html>

3
tv-player/serve.sh Executable file
View File

@ -0,0 +1,3 @@
#!/usr/bin/env bash
nix-shell -p python3 --run "python3 -m http.server -b 127.0.0.1 8000"

BIN
tv-player/textures/wall.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

380
tv-player/vcr.html Normal file
View File

@ -0,0 +1,380 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VCR Playback Time (3D)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
body {
background-color: #0d0d10;
margin: 0;
overflow: hidden;
font-family: 'Inter', sans-serif;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script>
// --- Global Variables ---
let scene, camera, renderer, vcrDisplayTexture;
let vcrDisplayLight;
let simulatedPlaybackTime = 0;
let lastUpdateTime = 0;
let blinkState = false; // For blinking colon
let lastBlinkToggleTime = 0;
// --- Segment Display Definitions ---
// Define which segments (indexed 0-6: A, B, C, D, E, F, G) are active for each digit
// A=Top, B=TR, C=BR, D=Bottom, E=BL, F=TL, G=Middle
const SEGMENTS = {
'0': [1, 1, 1, 1, 1, 1, 0],
'1': [0, 1, 1, 0, 0, 0, 0],
'2': [1, 1, 0, 1, 1, 0, 1],
'3': [1, 1, 1, 1, 0, 0, 1],
'4': [0, 1, 1, 0, 0, 1, 1],
'5': [1, 0, 1, 1, 0, 1, 1],
'6': [1, 0, 1, 1, 1, 1, 1],
'7': [1, 1, 1, 0, 0, 0, 0],
'8': [1, 1, 1, 1, 1, 1, 1],
'9': [1, 1, 1, 1, 0, 1, 1],
' ': [0, 0, 0, 0, 0, 0, 0]
};
const SEG_THICKNESS = 3; // Thickness of the segment line in canvas pixels
const SEG_PADDING = 2; // Padding within a digit segment's box
// Colors for active and inactive segments
const COLOR_ACTIVE = '#00ff44'; // Bright Fluorescent Green
const COLOR_INACTIVE = '#1a1a1a'; // Dim dark gray for 'ghost' segments
/**
* Draws a single 7-segment digit by drawing active segments.
* Now includes drawing of inactive (ghost) segments for better readability.
* @param {CanvasRenderingContext2D} ctx
* @param {string} digit The digit character (0-9).
* @param {number} x Left position of the digit area.
* @param {number} y Top position of the digit area.
* @param {number} H Total height of the digit area.
*/
function drawSegmentDigit(ctx, digit, x, y, H) {
const segments = SEGMENTS[digit] || SEGMENTS[' '];
const W = H / 2; // Width is half the height for standard aspect ratio
// Segment dimensions relative to W and H
const hLength = W - 2 * SEG_PADDING;
// Vertical length calculation: (Total height - 2 paddings - 3 horizontal thicknesses) / 2
const vLength = (H - (2 * SEG_PADDING) - (3 * SEG_THICKNESS)) / 2;
// Helper to draw horizontal segment (A, G, D)
const drawH = (index, x_start, y_start) => {
ctx.fillStyle = segments[index] ? COLOR_ACTIVE : COLOR_INACTIVE;
ctx.fillRect(x_start + SEG_PADDING, y_start, hLength, SEG_THICKNESS);
};
// Helper to draw vertical segment (F, B, E, C)
const drawV = (index, x_start, y_start) => {
ctx.fillStyle = segments[index] ? COLOR_ACTIVE : COLOR_INACTIVE;
ctx.fillRect(x_start, y_start, SEG_THICKNESS, vLength);
};
// Define segment positions
// Horizontal segments
// A (Top) - index 0
drawH(0, x, y + SEG_PADDING);
// G (Middle) - index 6
drawH(6, x, y + H/2 - SEG_THICKNESS/2);
// D (Bottom) - index 3
drawH(3, x, y + H - SEG_PADDING - SEG_THICKNESS);
// Vertical segments (Top Half)
const topVStart = y + SEG_PADDING + SEG_THICKNESS;
const rightVStart = x + W - SEG_PADDING - SEG_THICKNESS;
// F (Top-Left) - index 5
drawV(5, x + SEG_PADDING, topVStart);
// B (Top-Right) - index 1
drawV(1, rightVStart, topVStart);
// Vertical segments (Bottom Half)
const bottomVStart = y + H/2 + SEG_THICKNESS/2;
// E (Bottom-Left) - index 4
drawV(4, x + SEG_PADDING, bottomVStart);
// C (Bottom-Right) - index 2
drawV(2, rightVStart, bottomVStart);
}
// Function to draw the colon (two dots), now with blinking logic
function drawColon(ctx, x, y, H, isVisible) {
const dotSize = 4;
ctx.fillStyle = COLOR_ACTIVE;
if (isVisible) {
// Top dot
ctx.fillRect(x, y + H * 0.3 - dotSize / 2, dotSize, dotSize);
// Bottom dot
ctx.fillRect(x, y + H * 0.7 - dotSize / 2, dotSize, dotSize);
} else {
// Draw inactive colon if not visible, for consistency
ctx.fillStyle = COLOR_INACTIVE;
ctx.fillRect(x, y + H * 0.3 - dotSize / 2, dotSize, dotSize);
ctx.fillRect(x, y + H * 0.7 - dotSize / 2, dotSize, dotSize);
}
}
/**
* Draws a simple playback arrow (triangle)
* @param {CanvasRenderingContext2D} ctx
* @param {number} x Left position of the arrow area.
* @param {number} y Top position of the arrow area.
* @param {number} H Total height of the arrow area.
*/
function drawPlaybackArrow(ctx, x, y, H) {
const arrowWidth = H * 0.4; // Arrow width relative to digit height
const arrowHeight = H * 0.4; // Arrow height relative to digit height
ctx.fillStyle = COLOR_ACTIVE;
ctx.beginPath();
ctx.moveTo(x, y + H * 0.5 - arrowHeight / 2); // Top point
ctx.lineTo(x + arrowWidth, y + H * 0.5); // Right point (center)
ctx.lineTo(x, y + H * 0.5 + arrowHeight / 2); // Bottom point
ctx.closePath();
ctx.fill();
}
// Main function to render the entire time string using segments
function drawSegmentDisplay(ctx, timeString) {
const canvasWidth = ctx.canvas.width;
const canvasHeight = ctx.canvas.height;
const timeStringLength = timeString.length;
// Clear display to dark background
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
// Constants for layout
const charSpacing = 8; // Spacing between digits
const digitHeight = canvasHeight - 2 * SEG_PADDING;
const digitWidth = digitHeight / 2 + SEG_PADDING; // Total width slot for one digit
const colonWidth = 6;
const arrowWidth = digitHeight * 0.7; // Approx width for the arrow
const arrowPadding = 10; // Space between arrow and first digit
// Calculate total display width including arrow and spaces
const totalDisplayWidth = arrowWidth + arrowPadding + (4 * digitWidth) + colonWidth + ((timeStringLength - 1) * charSpacing);
// Calculate starting X to center the display
let currentX = (canvasWidth - totalDisplayWidth) / 2;
const currentY = SEG_PADDING;
// Draw Playback Arrow
drawPlaybackArrow(ctx, currentX, currentY, digitHeight);
currentX += arrowWidth + arrowPadding; // Move X after arrow and its padding
for (let i = 0; i < timeStringLength; i++) {
const char = timeString[i];
if (char === ':') {
drawColon(ctx, currentX, currentY, digitHeight, blinkState); // Pass blinkState
currentX += colonWidth;
} else if (char >= '0' && char <= '9') {
drawSegmentDigit(ctx, char, currentX, currentY, digitHeight);
currentX += digitWidth;
}
// Add spacing only if it's not the last element
if (i < timeStringLength - 1) {
currentX += charSpacing;
}
}
}
// --- Initialization ---
function init() {
// 1. Scene Setup
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
// 2. Camera Setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0.5, 2);
camera.lookAt(0, 0, 0);
// 3. Renderer Setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// 4. Lighting (Simplified)
const ambientLight = new THREE.AmbientLight(0x444444);
scene.add(ambientLight);
// Light from the VCR display itself
vcrDisplayLight = new THREE.PointLight(0x00ff44, 0.5, 1);
vcrDisplayLight.position.set(0.3, 0.03, 0.35 + 0.005); // Move light slightly closer to VCR surface
vcrDisplayLight.castShadow = true;
vcrDisplayLight.shadow.mapSize.width = 256;
vcrDisplayLight.shadow.mapSize.height = 256;
scene.add(vcrDisplayLight);
// 5. Create the VCR
createVcr();
// 6. Event Listener
window.addEventListener('resize', onWindowResize, false);
// Start the animation loop
animate();
}
// --- VCR Display Functions ---
function createVcrDisplay() {
const canvas = document.createElement('canvas');
canvas.width = 160; // Increased width for arrow and better spacing
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#0a0a0a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
vcrDisplayTexture = new THREE.CanvasTexture(canvas);
vcrDisplayTexture.needsUpdate = true;
const displayGeometry = new THREE.PlaneGeometry(0.45, 0.1); // Adjust geometry width for new canvas size
const displayMaterial = new THREE.MeshBasicMaterial({
map: vcrDisplayTexture,
side: THREE.FrontSide,
color: 0xffffff,
transparent: true,
emissive: 0x00ff44,
emissiveIntensity: 0.1
});
const displayMesh = new THREE.Mesh(displayGeometry, displayMaterial);
return displayMesh;
}
function updateVcrDisplay(time) {
if (!vcrDisplayTexture) return;
const canvas = vcrDisplayTexture.image;
const ctx = canvas.getContext('2d');
const timeString = formatTime(time);
// Uses the new segment drawing function with ghosting, including blinkState for colon
drawSegmentDisplay(ctx, timeString);
vcrDisplayTexture.needsUpdate = true;
}
// --- VCR Model Function ---
function createVcr() {
// Materials
const vcrBodyMaterial = new THREE.MeshPhongMaterial({
color: 0x222222, // Dark metallic gray
shininess: 70,
specular: 0x444444
});
const slotMaterial = new THREE.MeshPhongMaterial({
color: 0x0a0a0a, // Deep black
shininess: 5,
specular: 0x111111
});
const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a, shininess: 5 });
// Floor (for shadows)
const floorGeometry = new THREE.PlaneGeometry(5, 5);
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -0.1; // Slightly below VCR
floor.receiveShadow = true;
scene.add(floor);
// VCR Body
const vcrBodyGeometry = new THREE.BoxGeometry(1.0, 0.2, 0.7);
const vcrBody = new THREE.Mesh(vcrBodyGeometry, vcrBodyMaterial);
vcrBody.position.y = 0; // Centered
vcrBody.castShadow = true;
vcrBody.receiveShadow = true;
// Cassette Slot / Front Face
const slotGeometry = new THREE.BoxGeometry(0.9, 0.05, 0.01);
const slotMesh = new THREE.Mesh(slotGeometry, slotMaterial);
slotMesh.position.set(0, -0.05, 0.35 + 0.005);
slotMesh.castShadow = true;
slotMesh.receiveShadow = true;
// VCR Display
const displayMesh = createVcrDisplay();
displayMesh.position.z = 0.35 + 0.005;
displayMesh.position.x = 0.2; // Adjusted X for arrow
displayMesh.position.y = 0.03;
// VCR Group
const vcrGroup = new THREE.Group();
vcrGroup.add(vcrBody, slotMesh, displayMesh);
vcrGroup.position.set(0, 0.1, 0); // Position the whole VCR slightly above the floor
scene.add(vcrGroup);
}
// --- Helper function to format seconds into MM:SS ---
function formatTime(seconds) {
if (isNaN(seconds) || seconds < 0) return '00:00';
const totalSeconds = Math.floor(seconds);
const minutes = Math.floor(totalSeconds / 60);
const remainingSeconds = totalSeconds % 60;
const paddedMinutes = String(minutes).padStart(2, '0');
const paddedSeconds = String(remainingSeconds).padStart(2, '0');
return `${paddedMinutes}:${paddedSeconds}`;
}
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
const currentTime = performance.now() * 0.001; // Time in seconds
// Simulate playback time
if (currentTime - lastUpdateTime > 0.1) {
simulatedPlaybackTime = currentTime;
updateVcrDisplay(simulatedPlaybackTime);
lastUpdateTime = currentTime;
}
// Blink the colon every second
if (currentTime - lastBlinkToggleTime > 0.5) { // Blink every 0.5 seconds
blinkState = !blinkState;
lastBlinkToggleTime = currentTime;
}
renderer.render(scene, camera);
}
// --- Window Resize Handler ---
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Start everything on window load
window.onload = init;
</script>
</body>
</html>