Interactive Old TV

Okay, let's make the TV more realistic with rounded corners and a glass effect, add scary channels, and implement a dialogue animation on one of the channels. Interactive Old TV - Enhanced

Press keys 1-5 to change channels (0 for Off)

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js'; import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js'; import { createTvModel } from './tv.js'; import { createScaryChannelTextures, createStaticTexture, updateDialogueTexture, dialogueState } from './channels.js'; // Basic Scene Setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x050505); // Even darker room const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 1.5, 3.5); // Slightly closer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); // Enable physically correct lights if using MeshPhysicalMaterial transmission renderer.physicallyCorrectLights = true; // Deprecated, use renderer.useLegacyLights = false; renderer.useLegacyLights = false; document.body.appendChild(renderer.domElement); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.target.set(0, 1, 0); // Target the center of the TV controls.minDistance = 2; // Prevent zooming too close controls.maxDistance = 10; // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.02); // Very very dim ambient light scene.add(ambientLight); // Screen Light (RectAreaLight for realistic screen glow) RectAreaLightUniformsLib.init(); const screenLight = new THREE.RectAreaLight(0xffffff, 0, 1.8, 1.35); // Start turned off screenLight.position.set(0, 1.1, 0.55); // Position slightly in front of the screen screenLight.lookAt(0, 1.1, 0); scene.add(screenLight); // const screenLightHelper = new RectAreaLightHelper(screenLight); // Optional helper // scene.add(screenLightHelper); // TV Model const tvModel = createTvModel(); scene.add(tvModel); // Find the screen mesh const screenMesh = tvModel.getObjectByName('tvScreen'); if (!screenMesh) { console.error("TV Screen mesh not found!"); } // Channel Textures const channelTextures = createScaryChannelTextures(); const staticTexture = createStaticTexture(); let currentChannel = 0; // 0 = off, 1-5 = channels let dialogueChannelTexture = channelTextures[0]; // Use the first scary channel for dialogue // Initial Screen State (Off) screenMesh.material.map = null; screenMesh.material.emissiveMap = null; screenMesh.material.emissive.setHex(0x000000); screenMesh.material.needsUpdate = true; screenLight.intensity = 0; // Keyboard Input Handling window.addEventListener('keydown', (event) => { const key = parseInt(event.key); if (!isNaN(key) && key >= 0 && key <= 5) { changeChannel(key); } }); function changeChannel(channelNumber) { const oldChannel = currentChannel; currentChannel = channelNumber; console.log(`Changing to channel ${channelNumber}`); // Reset dialogue state if changing away from channel 1 or turning off if (oldChannel === 1 && channelNumber !== 1) { dialogueState.reset(); } if (channelNumber === 0) { // Turn off screenMesh.material.map = staticTexture; screenMesh.material.emissiveMap = staticTexture; screenMesh.material.emissive.setHex(0x111111); // Dimmer emissive for static screenLight.intensity = 0.5; // Low light for static screenLight.color.setHex(0xffffff); setTimeout(() => { if (currentChannel === 0) { // Check if still off after delay screenMesh.material.map = null; screenMesh.material.emissiveMap = null; screenMesh.material.emissive.setHex(0x000000); screenLight.intensity = 0; screenMesh.material.needsUpdate = true; } }, 200); // Static duration } else if (channelNumber > 0 && channelNumber <= channelTextures.length) { const texture = channelTextures[channelNumber - 1]; screenMesh.material.map = texture; screenMesh.material.emissiveMap = texture; screenMesh.material.emissive.setHex(0xffffff); // Full emissive for channels screenLight.intensity = 4; // Slightly less intense glow screenLight.color.setHex(0xaaaaff); // Bluish tint for screen glow // Start dialogue animation if switching to channel 1 if (channelNumber === 1) { dialogueState.start(); // Initial draw for dialogue channel might be needed here if reset clears it updateDialogueTexture(dialogueChannelTexture, dialogueState.getCurrentLine(), 0); } } else { // Show static if channel number is invalid (e.g., > 5) screenMesh.material.map = staticTexture; screenMesh.material.emissiveMap = staticTexture; screenMesh.material.emissive.setHex(0x111111); screenLight.intensity = 0.5; screenLight.color.setHex(0xffffff); } screenMesh.material.needsUpdate = true; } // Handle Window Resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Animation Loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); const elapsedTime = clock.getElapsedTime(); // Update static texture if it's active if ((currentChannel === 0 || currentChannel > channelTextures.length) && screenMesh.material.map === staticTexture) { updateStaticTexture(staticTexture, elapsedTime); screenMesh.material.needsUpdate = true; // Necessary for DataTexture updates } // Update dialogue animation if channel 1 is active if (currentChannel === 1 && dialogueState.isActive) { dialogueState.update(delta); updateDialogueTexture(dialogueChannelTexture, dialogueState.getCurrentLine(), dialogueState.getProgress()); } controls.update(); renderer.render(scene, camera); } // Function to update the static texture data function updateStaticTexture(texture, time) { const width = texture.image.width; const height = texture.image.height; const data = texture.image.data; const size = width * height; for (let i = 0; i < size; i++) { const stride = i * 3; // Add some variation/rolling effect to static const noise = Math.random() * 0.6 + 0.4; // More contrasty static const yPos = Math.floor(i / width); const roll = Math.sin(yPos * 0.1 + time * 2) * 0.1 + 0.9; // Simple rolling bar effect const value = Math.max(0, Math.min(255, noise * roll * 255)); data[stride] = value; // R data[stride + 1] = value; // G data[stride + 2] = value; // B } texture.needsUpdate = true; } // Initial call to changeChannel to set the TV off state correctly changeChannel(0); animate(); import * as THREE from 'three'; import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js'; export function createTvModel() { const tvGroup = new THREE.Group(); const bodyWidth = 2.2; const bodyHeight = 1.7; const bodyDepth = 0.8; const borderRadius = 0.1; // Radius for rounded corners const segments = 5; // Segments for rounded corners // TV Body (Rounded) const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x2a1f1a, // Slightly darker, less saturated wood/plastic roughness: 0.7, metalness: 0.1 }); const bodyGeometry = new RoundedBoxGeometry(bodyWidth, bodyHeight, bodyDepth, segments, borderRadius); const tvBody = new THREE.Mesh(bodyGeometry, bodyMaterial); tvBody.position.y = 1.0; tvGroup.add(tvBody); // TV Screen Bezel (Rounded) const bezelWidth = 1.9; const bezelHeight = 1.45; const bezelDepth = 0.1; const bezelBorderRadius = 0.05; const bezelMaterial = new THREE.MeshStandardMaterial({ color: 0x1a1512, // Darker bezel roughness: 0.8, metalness: 0.05 }); const bezelGeometry = new RoundedBoxGeometry(bezelWidth, bezelHeight, bezelDepth, segments, bezelBorderRadius); const tvBezel = new THREE.Mesh(bezelGeometry, bezelMaterial); tvBezel.position.set(0, 1.1, 0.4); // Position in front of the body tvGroup.add(tvBezel); // TV Screen Plane (Behind Bezel) const screenWidth = 1.8; // Slightly smaller than bezel inner dimensions const screenHeight = 1.35; const screenMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, emissive: 0x000000, emissiveIntensity: 1, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide }); const screenGeometry = new THREE.PlaneGeometry(screenWidth, screenHeight); const tvScreen = new THREE.Mesh(screenGeometry, screenMaterial); tvScreen.name = "tvScreen"; tvScreen.position.set(0, 1.1, 0.45 - 0.001); // Position just behind the glass tvGroup.add(tvScreen); // Screen Glass Layer const glassMaterial = new THREE.MeshPhysicalMaterial({ color: 0xeeeeff, // Slight tint to the glass metalness: 0.1, roughness: 0.05, // Smooth glass transmission: 1.0, // Fully transparent transparent: true, opacity: 1.0, // Keep opacity 1, transmission handles transparency ior: 1.5, // Index of refraction for glass thickness: 0.02, // Simulate glass thickness for refraction effects // side: THREE.DoubleSide // Render back face for thickness effect }); // Use a plane slightly larger than the screen, positioned in front const glassGeometry = new THREE.PlaneGeometry(screenWidth + 0.02, screenHeight + 0.02); const screenGlass = new THREE.Mesh(glassGeometry, glassMaterial); screenGlass.position.set(0, 1.1, 0.45); // Position just in front of the screen plane tvGroup.add(screenGlass); // Simple Stand/Legs const legMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.8 }); const legGeometry = new THREE.CylinderGeometry(0.04, 0.06, 0.2, 8); // Slightly thinner legs const legY = 0.15 + 0.1; // Base Y position for legs const legX = 0.8; const legZ = 0.2; const leg1 = new THREE.Mesh(legGeometry, legMaterial); leg1.position.set(-legX, legY, legZ); tvGroup.add(leg1); const leg2 = new THREE.Mesh(legGeometry, legMaterial); leg2.position.set(legX, legY, legZ); tvGroup.add(leg2); const leg3 = new THREE.Mesh(legGeometry, legMaterial); leg3.position.set(-legX, legY, -legZ); tvGroup.add(leg3); const leg4 = new THREE.Mesh(legGeometry, legMaterial); leg4.position.set(legX, legY, -legZ); tvGroup.add(leg4); // Simple Knob const knobMaterial = new THREE.MeshStandardMaterial({ color: 0xbbbbbb, roughness: 0.4, metalness: 0.6 }); const knobGeometry = new THREE.CylinderGeometry(0.07, 0.07, 0.08, 16); const knob = new THREE.Mesh(knobGeometry, knobMaterial); knob.rotation.z = Math.PI / 2; knob.position.set(0.85, 0.5, bodyDepth / 2 + 0.01); // Position relative to body depth tvGroup.add(knob); // Floor Plane const floorGeometry = new THREE.PlaneGeometry(20, 20); const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x181818, roughness: 0.9 }); // Darker floor const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; floor.position.y = 0.15; // Position slightly below the legs tvGroup.add(floor); return tvGroup; } import * as THREE from 'three'; // --- Static Texture --- export function createStaticTexture() { const width = 128; const height = 128; const size = width * height; const data = new Uint8Array(3 * size); // RGB // Initial static pattern (will be updated dynamically) for (let i = 0; i < size; i++) { const stride = i * 3; const randomValue = Math.random() * 255; data[stride] = randomValue; data[stride + 1] = randomValue; data[stride + 2] = randomValue; } const texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat); texture.needsUpdate = true; texture.minFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter; return texture; } // --- Dialogue Animation State --- const dialogueLines = [ "CAN YOU HEAR ME?", "I SEE YOU.", "DON'T TURN AWAY.", "WE ARE WATCHING.", "...", "JOIN US." ]; export const dialogueState = { isActive: false, lineIndex: 0, charIndex: 0, timeSinceChar: 0, timeSinceLine: 0, charInterval: 0.1, // Time between characters lineInterval: 2.0, // Time between lines progress: 0, // Percentage of current line revealed start: function() { if (!this.isActive) { console.log("Starting dialogue"); this.isActive = true; this.resetTimers(); } }, stop: function() { this.isActive = false; }, reset: function() { console.log("Resetting dialogue"); this.isActive = false; this.lineIndex = 0; this.charIndex = 0; this.progress = 0; this.resetTimers(); }, resetTimers: function() { this.timeSinceChar = 0; this.timeSinceLine = 0; }, update: function(deltaTime) { if (!this.isActive) return; const currentLine = this.getCurrentLine(); if (!currentLine) { this.stop(); // No more lines return; } this.timeSinceChar += deltaTime; this.timeSinceLine += deltaTime; if (this.charIndex < currentLine.length) { // Reveal next character if (this.timeSinceChar >= this.charInterval) { this.charIndex++; this.timeSinceChar = 0; this.progress = this.charIndex / currentLine.length; } } else { // Line finished, wait for line interval if (this.timeSinceLine >= this.lineInterval) { this.lineIndex = (this.lineIndex + 1) % dialogueLines.length; // Loop dialogue this.charIndex = 0; this.progress = 0; this.resetTimers(); } } }, getCurrentLine: function() { return dialogueLines[this.lineIndex]; }, getProgress: function() { // Ensure progress doesn't exceed 1 even if timing is slightly off return Math.min(1, this.progress); } }; // --- Scary Channel Textures --- export function createScaryChannelTextures() { const textures = []; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const width = 256; const height = 192; // ~4:3 aspect ratio canvas.width = width; canvas.height = height; // --- Channel 1: Dialogue Screen --- // Initial state (will be updated by dialogue animation) ctx.fillStyle = '#110000'; // Dark red background ctx.fillRect(0, 0, width, height); ctx.fillStyle = '#ffaaaa'; ctx.font = 'bold 24px "Courier New", Courier, monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // Initial text drawn by updateDialogueTexture textures.push(new THREE.CanvasTexture(canvas)); // --- Channel 2: Glitchy Eye --- ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, width, height); // Draw a large, unsettling eye const eyeX = width / 2; const eyeY = height / 2; const eyeRadius = height * 0.3; // Sclera (white part) ctx.fillStyle = '#ddd'; ctx.beginPath(); ctx.ellipse(eyeX, eyeY, eyeRadius * 1.2, eyeRadius, 0, 0, Math.PI * 2); ctx.fill(); // Iris (red) ctx.fillStyle = '#a00'; ctx.beginPath(); ctx.arc(eyeX, eyeY, eyeRadius * 0.6, 0, Math.PI * 2); ctx.fill(); // Pupil (black) ctx.fillStyle = '#000'; ctx.beginPath(); ctx.arc(eyeX, eyeY, eyeRadius * 0.3, 0, Math.PI * 2); ctx.fill(); // Add some glitch lines ctx.strokeStyle = `rgba(255, 0, 0, 0.5)`; ctx.lineWidth = 2; for(let i = 0; i < 10; i++) { ctx.beginPath(); const y = Math.random() * height; ctx.moveTo(0, y); ctx.lineTo(width, y + (Math.random() - 0.5) * 10); ctx.stroke(); } textures.push(new THREE.CanvasTexture(canvas)); // --- Channel 3: Silhouette in the Dark --- ctx.fillStyle = '#050505'; // Very dark grey ctx.fillRect(0, 0, width, height); // Draw a vague, tall silhouette ctx.fillStyle = '#000'; ctx.beginPath(); ctx.moveTo(width * 0.4, height); ctx.lineTo(width * 0.45, height * 0.3); // Shoulder ctx.quadraticCurveTo(width * 0.5, height * 0.15, width * 0.55, height * 0.3); // Head shape ctx.lineTo(width * 0.6, height); // Other shoulder down ctx.closePath(); ctx.fill(); // Add subtle red glow at the bottom const gradient = ctx.createLinearGradient(0, height * 0.8, 0, height); gradient.addColorStop(0, 'rgba(50, 0, 0, 0)'); gradient.addColorStop(1, 'rgba(100, 0, 0, 0.6)'); ctx.fillStyle = gradient; ctx.fillRect(0, height * 0.8, width, height * 0.2); textures.push(new THREE.CanvasTexture(canvas)); // --- Channel 4: Bloody Handprint --- ctx.fillStyle = '#333'; // Dark, dirty wall color ctx.fillRect(0, 0, width, height); // Simulate a handprint ctx.fillStyle = '#8b0000'; // Dark red 'blood' ctx.save(); ctx.translate(width / 2, height / 2); ctx.rotate(-0.2); // Slight rotation // Palm ctx.beginPath(); ctx.ellipse(0, 10, 35, 45, 0, 0, Math.PI * 2); ctx.fill(); // Fingers (simple ovals) const fingerW = 15; const fingerH = 40; ctx.fillRect(-30, -60, fingerW, fingerH); ctx.fillRect(-10, -70, fingerW, fingerH + 5); ctx.fillRect(10, -65, fingerW, fingerH); ctx.fillRect(30, -50, fingerW, fingerH - 10); // Thumb ctx.beginPath(); ctx.ellipse(-40, 0, 25, 15, Math.PI / 3, 0, Math.PI * 2); ctx.fill(); ctx.restore(); // Add some splatters for(let i = 0; i < 30; i++) { ctx.fillStyle = `rgba(139, 0, 0, ${Math.random() * 0.5 + 0.3})`; ctx.beginPath(); ctx.arc(Math.random() * width, Math.random() * height, Math.random() * 3 + 1, 0, Math.PI * 2); ctx.fill(); } textures.push(new THREE.CanvasTexture(canvas)); // --- Channel 5: Cryptic Symbols --- ctx.fillStyle = '#111'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = '#0f0'; // Green monitor text color ctx.font = '20px "Wingdings", "Webdings", symbol'; // Use symbol fonts if available, fallback ctx.textAlign = 'center'; const symbols = ['\u2620', '\u26A0', '\u271D', '\u274C', '?', '\u231B', '\u25A0', '\u25CF', '\u2745']; for (let y = 15; y < height; y += 25) { for (let x = 15; x < width; x += 25) { if (Math.random() > 0.3) { const symbol = symbols[Math.floor(Math.random() * symbols.length)]; ctx.globalAlpha = Math.random() * 0.5 + 0.5; ctx.fillText(symbol, x + (Math.random()-0.5)*5, y + (Math.random()-0.5)*5); } } } ctx.globalAlpha = 1.0; // Reset alpha textures.push(new THREE.CanvasTexture(canvas)); // Set filtering for all canvas textures textures.forEach(tex => { tex.minFilter = THREE.LinearFilter; tex.magFilter = THREE.LinearFilter; tex.needsUpdate = true; // Ensure initial canvas content is uploaded }); return textures; } // --- Function to Update Dialogue Texture --- export function updateDialogueTexture(texture, text, progress) { if (!texture || !texture.image) return; // Guard against missing texture/canvas const canvas = texture.image; const ctx = canvas.getContext('2d'); const width = canvas.width; const height = canvas.height; // Clear canvas (or redraw background) ctx.fillStyle = '#110000'; // Dark red background ctx.fillRect(0, 0, width, height); // Prepare text style ctx.fillStyle = '#ffaaaa'; // Pale red/pink text ctx.font = 'bold 24px "Courier New", Courier, monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // Calculate visible text length const visibleLength = Math.floor(text.length * progress); const visibleText = text.substring(0, visibleLength); // Add a blinking cursor effect (optional) const showCursor = Math.floor(Date.now() / 500) % 2 === 0 && progress < 1; const displayText = visibleText + (showCursor ? '_' : ''); // Draw text ctx.fillText(displayText, width / 2, height / 2); texture.needsUpdate = true; // CRITICAL: Tell Three.js to re-upload the texture } Key changes: 1. **`index.html`**: Updated title and info text. Added `three/addons/geometries/RoundedBoxGeometry.js` to the import map. 2. **`tv.js`**: * Imported and used `RoundedBoxGeometry` for the TV body and bezel, adding rounded corners. * Added a `screenGlass` mesh using `PlaneGeometry` and `MeshPhysicalMaterial` with `transmission: 1.0` and `thickness` for a glass effect. It's positioned slightly in front of the actual screen plane. * Adjusted material colors and roughness for a slightly different look. 3. **`channels.js`**: * `createScaryChannelTextures`: Replaced the previous channel generation logic with 5 new functions creating scary/unsettling visuals using the Canvas API (Dialogue screen base, Glitchy Eye, Silhouette, Handprint, Cryptic Symbols). * `dialogueState`: Added an object to manage the state of the dialogue animation (current line, character progress, timing). * `updateDialogueTexture`: New function to draw text onto a canvas texture incrementally based on the `dialogueState`. It clears the canvas, sets styles, calculates the visible portion of the text, and draws it. Crucially, it sets `texture.needsUpdate = true`. 4. **`main.js`**: * Imported the new channel functions and `dialogueState`. * Enabled `renderer.useLegacyLights = false` for better results with `MeshPhysicalMaterial` transmission. * In `changeChannel`: Added logic to reset/start the `dialogueState` when switching to/from channel 1. Set a bluish tint for the `screenLight`. * In `animate`: Added calls to `dialogueState.update()` and `updateDialogueTexture()` when channel 1 is active. Modified `updateStaticTexture` slightly for a different look. * Adjusted ambient light and screen light intensity/color. Now, the TV has rounded corners, a glass pane over the screen, and displays 5 new scary-themed channels. Channel 1 will show the dialogue animation, typing out messages letter by letter.