267 lines
10 KiB
HTML
267 lines
10 KiB
HTML
<!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> |