Initial commit.
This commit is contained in:
Dejvino
@@ -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>
|
||||
Reference in New Issue
Block a user