108 lines
4.1 KiB
HTML
108 lines
4.1 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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 3D Canvas will be injected here by Three.js --><script>
|
|
// --- Global Variables ---
|
|
let scene, camera, renderer;
|
|
|
|
const container = document.body;
|
|
|
|
// --- 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);
|
|
|
|
// 5. Build the entire scene
|
|
createSceneObjects();
|
|
|
|
// 6. Event Listeners
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
|
|
// Start the animation loop
|
|
animate();
|
|
}
|
|
|
|
// --- Scene Modeling Function (omitted for brevity, assume content is stable) ---
|
|
function createSceneObjects() {
|
|
// 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);
|
|
}
|
|
|
|
// --- Animation Loop ---
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
|
|
// 1. 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);
|
|
|
|
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> |