dejvino/music-video-gen
1
0
Fork 0
Code Issues Pull Requests 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
Download Patch File Download Diff File Expand all files Collapse all files
tv-player/index_v2.html
+267
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>