Compare commits
No commits in common. "2e1e6bddfad06ba78cf3258d6006af6e6d296586" and "043552f36c2dafe9e6d36a402fefde1b0d1b716c" have entirely different histories.
2e1e6bddfa
...
043552f36c
1
tv-player/.gitignore
vendored
1
tv-player/.gitignore
vendored
@ -1 +0,0 @@
|
|||||||
node_modules
|
|
||||||
@ -4,8 +4,9 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Retro TV Player</title>
|
<title>Retro TV Player</title>
|
||||||
<!-- Load Tailwind CSS for styling --><script src="/vendor/tailwind-3.4.17.js"></script>
|
<!-- Load Tailwind CSS for styling --><script src="./vendor/tailwind-3.4.17.js" x-src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
|
<!-- Load Three.js for 3D rendering --><script src="./vendor/three.min.js" x-src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||||
<script src="./src/tailwind-config.js"></script>
|
<script src="./src/tailwind-config.js"></script>
|
||||||
<style>
|
<style>
|
||||||
/* Dark room aesthetic */
|
/* Dark room aesthetic */
|
||||||
@ -44,8 +45,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main entry point for the application -->
|
<script src="./src/global-variables.js"></script>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script src="./src/utils.js"></script>
|
||||||
|
<script src="./src/scene.js"></script>
|
||||||
|
<script src="./src/video-player.js"></script>
|
||||||
|
<script src="./src/effects_dust.js"></script>
|
||||||
|
<script src="./src/effects_flies.js"></script>
|
||||||
|
<script src="./src/vcr-display.js"></script>
|
||||||
|
<script src="./src/animate.js"></script>
|
||||||
|
<script src="./src/init.js"></script>
|
||||||
|
|
||||||
<!-- 3D Canvas will be injected here by Three.js -->
|
<!-- 3D Canvas will be injected here by Three.js -->
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
1069
tv-player/package-lock.json
generated
1069
tv-player/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "tv-player",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "",
|
|
||||||
"main": "index.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "",
|
|
||||||
"license": "ISC",
|
|
||||||
"devDependencies": {
|
|
||||||
"vite": "^7.2.2"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"three": "^0.181.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
128
tv-player/src/animate.js
Normal file
128
tv-player/src/animate.js
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
// --- 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.001;
|
||||||
|
if (positions[i] < -2) {
|
||||||
|
positions[i] = 8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dust.geometry.attributes.position.needsUpdate = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Camera movement (Gentle, random hovering)
|
||||||
|
const globalTime = Date.now() * 0.00005;
|
||||||
|
const lookAtTime = Date.now() * 0.00003;
|
||||||
|
|
||||||
|
const camAmplitude = 0.7;
|
||||||
|
const lookAmplitude = 0.05;
|
||||||
|
|
||||||
|
// Base Camera Position in front of the TV
|
||||||
|
const baseX = -0.5;
|
||||||
|
const baseY = 1.5;
|
||||||
|
const baseZ = 2.5;
|
||||||
|
|
||||||
|
// Base LookAt target (Center of the screen)
|
||||||
|
const baseTargetX = -0.7;
|
||||||
|
const baseTargetY = 1.7;
|
||||||
|
const baseTargetZ = -0.3;
|
||||||
|
|
||||||
|
// Camera Position Offsets (Drift)
|
||||||
|
const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
|
||||||
|
const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.4;
|
||||||
|
const camOffsetZ = Math.cos(globalTime * 3.2) * camAmplitude * 1.4;
|
||||||
|
|
||||||
|
camera.position.x = baseX + camOffsetX;
|
||||||
|
camera.position.y = baseY + camOffsetY;
|
||||||
|
camera.position.z = baseZ + camOffsetZ;
|
||||||
|
|
||||||
|
// LookAt Target Offsets (Subtle Gaze Shift)
|
||||||
|
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
|
||||||
|
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
|
||||||
|
|
||||||
|
// Apply lookAt to the subtly shifted target
|
||||||
|
camera.lookAt(
|
||||||
|
baseTargetX + lookOffsetX,
|
||||||
|
baseTargetY + lookOffsetY,
|
||||||
|
baseTargetZ
|
||||||
|
);
|
||||||
|
|
||||||
|
// 3. Lamp Flicker Effect
|
||||||
|
const flickerChance = 0.995;
|
||||||
|
const restoreRate = 0.15;
|
||||||
|
|
||||||
|
if (Math.random() > flickerChance) {
|
||||||
|
// Flickers quickly to a dimmer random value (between 0.3 and 1.05)
|
||||||
|
let lampLightIntensity = originalLampIntensity * (0.3 + Math.random() * 0.7);
|
||||||
|
lampLightSpot.intensity = lampLightIntensity;
|
||||||
|
lampLightPoint.intensity = lampLightIntensity;
|
||||||
|
} else if (lampLightPoint.intensity < originalLampIntensity) {
|
||||||
|
// Smoothly restore original intensity
|
||||||
|
let lampLightIntensity = THREE.MathUtils.lerp(lampLightPoint.intensity, originalLampIntensity, restoreRate);
|
||||||
|
lampLightSpot.intensity = lampLightIntensity;
|
||||||
|
lampLightPoint.intensity = lampLightIntensity;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Screen Light Pulse and Movement Effect (Updated)
|
||||||
|
if (isVideoLoaded && screenLight.intensity > 0) {
|
||||||
|
// A. Pulse Effect (Intensity Fluctuation)
|
||||||
|
// Generate a small random fluctuation for the pulse (Range: 1.35 to 1.65 around base 1.5)
|
||||||
|
const pulseTarget = originalScreenIntensity + (Math.random() - 0.5) * screenIntensityPulse;
|
||||||
|
// Smoothly interpolate towards the new target fluctuation
|
||||||
|
screenLight.intensity = THREE.MathUtils.lerp(screenLight.intensity, pulseTarget, 0.1);
|
||||||
|
|
||||||
|
// B. Movement Effect (Subtle circle around the screen center - circling the room area)
|
||||||
|
const lightTime = Date.now() * 0.0001;
|
||||||
|
const radius = 0.01;
|
||||||
|
const centerX = 0;
|
||||||
|
const centerY = 1.5;
|
||||||
|
//const centerZ = 1.2; // Use the updated Z position of the light source
|
||||||
|
|
||||||
|
// Move the light in a subtle, erratic circle
|
||||||
|
screenLight.position.x = centerX + Math.cos(lightTime) * radius;
|
||||||
|
screenLight.position.y = centerY + Math.sin(lightTime * 1.5) * radius * 0.5; // Slightly different freq for Y
|
||||||
|
//screenLight.position.z = centerZ; // Keep Z constant at the screen light plane
|
||||||
|
}
|
||||||
|
|
||||||
|
// 5. Update video texture (essential to grab the next frame)
|
||||||
|
if (videoTexture) {
|
||||||
|
videoTexture.needsUpdate = true;
|
||||||
|
|
||||||
|
// Update time display in the animation loop
|
||||||
|
if (isVideoLoaded && videoElement.readyState >= 3) {
|
||||||
|
const currentTime = formatTime(videoElement.currentTime);
|
||||||
|
const duration = formatTime(videoElement.duration);
|
||||||
|
console.info(`Tape ${currentVideoIndex + 1} of ${videoUrls.length}. Time: ${currentTime} / ${duration}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateFlies();
|
||||||
|
|
||||||
|
const currentTime = baseTime + videoElement.currentTime;
|
||||||
|
|
||||||
|
// Simulate playback time
|
||||||
|
if (Math.abs(currentTime - lastUpdateTime) > 0.1) {
|
||||||
|
updateVcrDisplay(currentTime);
|
||||||
|
lastUpdateTime = currentTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blink the colon every second
|
||||||
|
if (currentTime - lastBlinkToggleTime > 0.5) { // Blink every 0.5 seconds
|
||||||
|
blinkState = !blinkState;
|
||||||
|
lastBlinkToggleTime = currentTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
// RENDER!
|
||||||
|
renderer.render(scene, camera);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Window Resize Handler ---
|
||||||
|
function onWindowResize() {
|
||||||
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
}
|
||||||
@ -1,172 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { updateVcrDisplay } from '../scene/vcr-display.js';
|
|
||||||
import { updateDoor } from '../scene/door.js';
|
|
||||||
import { state } from '../state.js';
|
|
||||||
|
|
||||||
|
|
||||||
function updateCamera() {
|
|
||||||
const globalTime = Date.now() * 0.00005;
|
|
||||||
const lookAtTime = Date.now() * 0.00003;
|
|
||||||
|
|
||||||
const camAmplitude = 0.5;
|
|
||||||
const lookAmplitude = 0.05;
|
|
||||||
|
|
||||||
// Base Camera Position in front of the TV
|
|
||||||
const baseX = -0.5;
|
|
||||||
const baseY = 1.5;
|
|
||||||
const baseZ = 2.5;
|
|
||||||
|
|
||||||
// Base LookAt target (Center of the screen)
|
|
||||||
const baseTargetX = -0.7;
|
|
||||||
const baseTargetY = 1.7;
|
|
||||||
const baseTargetZ = -0.3;
|
|
||||||
|
|
||||||
// Camera Position Offsets (Drift)
|
|
||||||
const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
|
|
||||||
const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.4;
|
|
||||||
const camOffsetZ = Math.cos(globalTime * 3.2) * camAmplitude * 1.4;
|
|
||||||
|
|
||||||
state.camera.position.x = baseX + camOffsetX;
|
|
||||||
state.camera.position.y = baseY + camOffsetY;
|
|
||||||
state.camera.position.z = baseZ + camOffsetZ;
|
|
||||||
|
|
||||||
// LookAt Target Offsets (Subtle Gaze Shift)
|
|
||||||
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
|
|
||||||
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
|
|
||||||
|
|
||||||
// Apply lookAt to the subtly shifted target
|
|
||||||
state.camera.lookAt(baseTargetX + lookOffsetX, baseTargetY + lookOffsetY, baseTargetZ);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateLampFlicker() {
|
|
||||||
const flickerChance = 0.995;
|
|
||||||
const restoreRate = 0.15;
|
|
||||||
|
|
||||||
if (Math.random() > flickerChance) {
|
|
||||||
// Flickers quickly to a dimmer random value (between 0.3 and 1.05)
|
|
||||||
let lampLightIntensity = state.originalLampIntensity * (0.3 + Math.random() * 0.7);
|
|
||||||
state.lampLightSpot.intensity = lampLightIntensity;
|
|
||||||
state.lampLightPoint.intensity = lampLightIntensity;
|
|
||||||
} else if (state.lampLightPoint.intensity < state.originalLampIntensity) {
|
|
||||||
// Smoothly restore original intensity
|
|
||||||
let lampLightIntensity = THREE.MathUtils.lerp(state.lampLightPoint.intensity, state.originalLampIntensity, restoreRate);
|
|
||||||
state.lampLightSpot.intensity = lampLightIntensity;
|
|
||||||
state.lampLightPoint.intensity = lampLightIntensity;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateScreenLight() {
|
|
||||||
if (state.isVideoLoaded && state.screenLight.intensity > 0) {
|
|
||||||
const pulseTarget = state.originalScreenIntensity + (Math.random() - 0.5) * state.screenIntensityPulse;
|
|
||||||
state.screenLight.intensity = THREE.MathUtils.lerp(state.screenLight.intensity, pulseTarget, 0.1);
|
|
||||||
|
|
||||||
const lightTime = Date.now() * 0.0001;
|
|
||||||
const radius = 0.01;
|
|
||||||
const centerX = 0;
|
|
||||||
const centerY = 1.5;
|
|
||||||
|
|
||||||
state.screenLight.position.x = centerX + Math.cos(lightTime) * radius;
|
|
||||||
state.screenLight.position.y = centerY + Math.sin(lightTime * 1.5) * radius * 0.5; // Slightly different freq for Y
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateVideo() {
|
|
||||||
if (state.videoTexture) {
|
|
||||||
state.videoTexture.needsUpdate = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateVcr() {
|
|
||||||
const currentTime = state.baseTime + state.videoElement.currentTime;
|
|
||||||
if (Math.abs(currentTime - state.lastUpdateTime) > 0.1) {
|
|
||||||
updateVcrDisplay(currentTime);
|
|
||||||
state.lastUpdateTime = currentTime;
|
|
||||||
}
|
|
||||||
if (currentTime - state.lastBlinkToggleTime > 0.5) { // Blink every 0.5 seconds
|
|
||||||
state.blinkState = !state.blinkState;
|
|
||||||
state.lastBlinkToggleTime = currentTime;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateBooks() {
|
|
||||||
const LEVITATE_CHANCE = 0.001; // Chance for a resting book to start levitating per frame
|
|
||||||
const LEVITATE_DURATION_MIN = 100; // frames
|
|
||||||
const LEVITATE_DURATION_MAX = 300; // frames
|
|
||||||
const LEVITATE_AMPLITUDE = 0.02; // Max vertical displacement
|
|
||||||
const LEVITATE_SPEED_FACTOR = 0.03; // Speed of oscillation
|
|
||||||
const START_RATE = 0.05; // How quickly a book starts to levitate
|
|
||||||
const RETURN_RATE = 0.1; // How quickly a book returns to original position
|
|
||||||
const START_DURATION = 120; // frames for the starting transition
|
|
||||||
const levitation = state.bookLevitation;
|
|
||||||
|
|
||||||
// Manage the global levitation state
|
|
||||||
if (levitation.state === 'resting') {
|
|
||||||
if (Math.random() < LEVITATE_CHANCE) {
|
|
||||||
levitation.state = 'starting';
|
|
||||||
levitation.timer = START_DURATION;
|
|
||||||
}
|
|
||||||
} else if (levitation.state === 'starting') {
|
|
||||||
levitation.timer--;
|
|
||||||
if (levitation.timer <= 0) {
|
|
||||||
levitation.state = 'levitating';
|
|
||||||
levitation.timer = LEVITATE_DURATION_MIN + Math.random() * (LEVITATE_DURATION_MAX - LEVITATE_DURATION_MIN);
|
|
||||||
}
|
|
||||||
} else if (levitation.state === 'levitating') {
|
|
||||||
levitation.timer--;
|
|
||||||
if (levitation.timer <= 0) {
|
|
||||||
levitation.state = 'returning';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Animate books based on the global state
|
|
||||||
let allBooksReturned = true;
|
|
||||||
state.books.forEach(book => {
|
|
||||||
const data = book.userData;
|
|
||||||
|
|
||||||
if (levitation.state === 'starting') {
|
|
||||||
allBooksReturned = false;
|
|
||||||
book.position.y = THREE.MathUtils.lerp(book.position.y, data.originalY + LEVITATE_AMPLITUDE/2, START_RATE);
|
|
||||||
data.oscillationTime = 0;
|
|
||||||
} else if (levitation.state === 'levitating') {
|
|
||||||
allBooksReturned = false;
|
|
||||||
data.oscillationTime += LEVITATE_SPEED_FACTOR;
|
|
||||||
data.levitateOffset = Math.sin(data.oscillationTime) * LEVITATE_AMPLITUDE;
|
|
||||||
book.position.y = data.originalY + data.levitateOffset + LEVITATE_AMPLITUDE/2;
|
|
||||||
} else if (levitation.state === 'returning') {
|
|
||||||
book.position.y = THREE.MathUtils.lerp(book.position.y, data.originalY, RETURN_RATE);
|
|
||||||
data.levitateOffset = book.position.y - data.originalY;
|
|
||||||
|
|
||||||
if (Math.abs(data.levitateOffset) > 0.001) {
|
|
||||||
allBooksReturned = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (levitation.state === 'returning' && allBooksReturned) {
|
|
||||||
levitation.state = 'resting';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Animation Loop ---
|
|
||||||
export function animate() {
|
|
||||||
requestAnimationFrame(animate);
|
|
||||||
|
|
||||||
state.effectsManager.update();
|
|
||||||
updateCamera();
|
|
||||||
updateLampFlicker();
|
|
||||||
updateScreenLight();
|
|
||||||
updateVideo();
|
|
||||||
updateVcr();
|
|
||||||
updateBooks();
|
|
||||||
updateDoor();
|
|
||||||
|
|
||||||
// RENDER!
|
|
||||||
state.renderer.render(state.scene, state.camera);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Window Resize Handler ---
|
|
||||||
export function onWindowResize() {
|
|
||||||
state.camera.aspect = window.innerWidth / window.innerHeight;
|
|
||||||
state.camera.updateProjectionMatrix();
|
|
||||||
state.renderer.setSize(window.innerWidth, window.innerHeight);
|
|
||||||
}
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { state, initState } from '../state.js';
|
|
||||||
import { EffectsManager } from '../effects/EffectsManager.js';
|
|
||||||
import { createSceneObjects } from '../scene/root.js';
|
|
||||||
import { animate, onWindowResize } from './animate.js';
|
|
||||||
import { loadVideoFile, playNextVideo } from './video-player.js';
|
|
||||||
|
|
||||||
// --- Initialization ---
|
|
||||||
export function init() {
|
|
||||||
initState();
|
|
||||||
|
|
||||||
// 1. Scene Setup (Dark, Ambient)
|
|
||||||
state.scene = new THREE.Scene();
|
|
||||||
state.scene.background = new THREE.Color(0x000000);
|
|
||||||
|
|
||||||
// 2. Camera Setup
|
|
||||||
const FOV = 65;
|
|
||||||
state.camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
||||||
state.camera.position.set(0, 1.5, 4);
|
|
||||||
|
|
||||||
// 3. Renderer Setup
|
|
||||||
state.renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
||||||
state.renderer.setSize(window.innerWidth, window.innerHeight);
|
|
||||||
state.renderer.setPixelRatio(window.devicePixelRatio);
|
|
||||||
// Enable shadows on the renderer
|
|
||||||
state.renderer.shadowMap.enabled = true;
|
|
||||||
state.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
|
|
||||||
|
|
||||||
state.container.appendChild(state.renderer.domElement);
|
|
||||||
|
|
||||||
// 5. Build the entire scene with TV and surrounding objects
|
|
||||||
createSceneObjects();
|
|
||||||
|
|
||||||
// 6. Initialize all visual effects via the manager
|
|
||||||
state.effectsManager = new EffectsManager(state.scene);
|
|
||||||
|
|
||||||
// --- 8. Debug Visualization Helpers ---
|
|
||||||
// Visual aids for the light source positions
|
|
||||||
if (state.debugLight && THREE.PointLightHelper) {
|
|
||||||
const screenHelper = new THREE.PointLightHelper(state.screenLight, 0.1, 0xff0000); // Red for screen
|
|
||||||
state.scene.add(screenHelper);
|
|
||||||
|
|
||||||
// Lamp Helper will now work since lampLight is added to the scene
|
|
||||||
const lampHelperPoint = new THREE.PointLightHelper(state.lampLightPoint, 0.1, 0x00ff00); // Green for lamp
|
|
||||||
state.scene.add(lampHelperPoint);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 9. Event Listeners
|
|
||||||
window.addEventListener('resize', onWindowResize, false);
|
|
||||||
state.fileInput.addEventListener('change', loadVideoFile);
|
|
||||||
|
|
||||||
// Button logic
|
|
||||||
state.loadTapeButton.addEventListener('click', () => {
|
|
||||||
state.fileInput.click();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Auto-advance to the next video when the current one finishes.
|
|
||||||
state.videoElement.addEventListener('ended', playNextVideo);
|
|
||||||
|
|
||||||
// Start the animation loop
|
|
||||||
animate();
|
|
||||||
}
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { state } from '../state.js';
|
|
||||||
|
|
||||||
// --- Play video by index ---
|
|
||||||
export function playVideoByIndex(index) {
|
|
||||||
state.currentVideoIndex = index;
|
|
||||||
const url = state.videoUrls[index];
|
|
||||||
|
|
||||||
// Dispose of previous texture to free resources
|
|
||||||
if (state.videoTexture) {
|
|
||||||
state.videoTexture.dispose();
|
|
||||||
state.videoTexture = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (index < 0 || index >= state.videoUrls.length) {
|
|
||||||
console.info('End of playlist reached. Reload tapes to start again.');
|
|
||||||
state.screenLight.intensity = 0.0;
|
|
||||||
state.tvScreen.material.dispose();
|
|
||||||
state.tvScreen.material = new THREE.MeshPhongMaterial({
|
|
||||||
color: 0x0a0a0a, // Deep black
|
|
||||||
shininess: 5,
|
|
||||||
specular: 0x111111
|
|
||||||
});
|
|
||||||
state.tvScreen.material.needsUpdate = true;
|
|
||||||
state.isVideoLoaded = false;
|
|
||||||
state.lastUpdateTime = -1; // force VCR to redraw
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
state.videoElement.src = url;
|
|
||||||
state.videoElement.muted = true;
|
|
||||||
state.videoElement.load();
|
|
||||||
|
|
||||||
// Set loop property: only loop if it's the only video loaded
|
|
||||||
state.videoElement.loop = false; //state.videoUrls.length === 1;
|
|
||||||
|
|
||||||
|
|
||||||
state.videoElement.onloadeddata = () => {
|
|
||||||
// 1. Create the Three.js texture
|
|
||||||
state.videoTexture = new THREE.VideoTexture(state.videoElement);
|
|
||||||
state.videoTexture.minFilter = THREE.LinearFilter;
|
|
||||||
state.videoTexture.magFilter = THREE.LinearFilter;
|
|
||||||
state.videoTexture.format = THREE.RGBAFormat;
|
|
||||||
state.videoTexture.needsUpdate = true;
|
|
||||||
|
|
||||||
// 2. Apply the video texture to the screen mesh
|
|
||||||
state.tvScreen.material.dispose();
|
|
||||||
state.tvScreen.material = new THREE.MeshBasicMaterial({ map: state.videoTexture });
|
|
||||||
state.tvScreen.material.needsUpdate = true;
|
|
||||||
|
|
||||||
// 3. Start playback
|
|
||||||
state.videoElement.play().then(() => {
|
|
||||||
state.isVideoLoaded = true;
|
|
||||||
// Use the defined base intensity for screen glow
|
|
||||||
state.screenLight.intensity = state.originalScreenIntensity;
|
|
||||||
// Initial status message with tape count
|
|
||||||
console.info(`Playing tape ${state.currentVideoIndex + 1} of ${state.videoUrls.length}.`);
|
|
||||||
}).catch(error => {
|
|
||||||
state.screenLight.intensity = state.originalScreenIntensity * 0.5; // Dim the light if playback fails
|
|
||||||
console.error(`Playback blocked for tape ${state.currentVideoIndex + 1}. Click Next Tape to try again.`);
|
|
||||||
console.error('Playback Error: Could not start video playback.', error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
state.videoElement.onerror = (e) => {
|
|
||||||
state.screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
|
|
||||||
console.error(`Error loading tape ${state.currentVideoIndex + 1}.`);
|
|
||||||
console.error('Video Load Error:', e);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Cycle to the next video ---
|
|
||||||
export function playNextVideo() {
|
|
||||||
// Determine the next index, cycling back to 0 if we reach the end
|
|
||||||
let nextIndex = state.currentVideoIndex + 1;
|
|
||||||
if (nextIndex < state.videoUrls.length) {
|
|
||||||
state.baseTime += state.videoElement.duration;
|
|
||||||
}
|
|
||||||
playVideoByIndex(nextIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// --- Video Loading Logic (handles multiple files) ---
|
|
||||||
export function loadVideoFile(event) {
|
|
||||||
const files = event.target.files;
|
|
||||||
if (files.length === 0) {
|
|
||||||
console.info('File selection cancelled.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 1. Clear previous URLs and revoke object URLs to prevent memory leaks
|
|
||||||
state.videoUrls.forEach(url => URL.revokeObjectURL(url));
|
|
||||||
state.videoUrls = [];
|
|
||||||
|
|
||||||
// 2. Populate the new videoUrls array
|
|
||||||
for (let i = 0; i < files.length; i++) {
|
|
||||||
const file = files[i];
|
|
||||||
if (file.type.startsWith('video/')) {
|
|
||||||
state.videoUrls.push(URL.createObjectURL(file));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.videoUrls.length === 0) {
|
|
||||||
console.info('No valid video files selected.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Start playback of the first video
|
|
||||||
console.info(`Loaded ${state.videoUrls.length} tapes. Starting playback...`);
|
|
||||||
state.loadTapeButton.classList.add("hidden");
|
|
||||||
|
|
||||||
const startDelay = 5;
|
|
||||||
console.info(`Video will start in ${startDelay} seconds.`);
|
|
||||||
setTimeout(() => { playVideoByIndex(0); }, startDelay * 1000);
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import { DustEffect } from './dust.js';
|
|
||||||
import { FliesEffect } from './flies.js';
|
|
||||||
|
|
||||||
export class EffectsManager {
|
|
||||||
constructor(scene) {
|
|
||||||
this.effects = [];
|
|
||||||
this._initializeEffects(scene);
|
|
||||||
}
|
|
||||||
|
|
||||||
_initializeEffects(scene) {
|
|
||||||
// Add all desired effects here.
|
|
||||||
// This is now the single place to manage which effects are active.
|
|
||||||
this.addEffect(new DustEffect(scene));
|
|
||||||
this.addEffect(new FliesEffect(scene));
|
|
||||||
}
|
|
||||||
|
|
||||||
addEffect(effect) {
|
|
||||||
this.effects.push(effect);
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
|
||||||
this.effects.forEach(effect => effect.update());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
|
|
||||||
export class DustEffect {
|
|
||||||
constructor(scene) {
|
|
||||||
this.dust = null;
|
|
||||||
this._create(scene);
|
|
||||||
}
|
|
||||||
|
|
||||||
_create(scene) {
|
|
||||||
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
|
|
||||||
});
|
|
||||||
|
|
||||||
this.dust = new THREE.Points(particlesGeometry, particleMaterial);
|
|
||||||
scene.add(this.dust);
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
|
||||||
if (this.dust) {
|
|
||||||
const positions = this.dust.geometry.attributes.position.array;
|
|
||||||
for (let i = 1; i < positions.length; i += 3) {
|
|
||||||
positions[i] -= 0.001;
|
|
||||||
if (positions[i] < -2) {
|
|
||||||
positions[i] = 8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.dust.geometry.attributes.position.needsUpdate = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,140 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { state } from '../state.js';
|
|
||||||
import { degToRad } from '../utils.js';
|
|
||||||
|
|
||||||
const FLIES_COUNT = 2;
|
|
||||||
|
|
||||||
// --- Configuration ---
|
|
||||||
const FLIGHT_HEIGHT_MIN = 0.5; // Min height for flying
|
|
||||||
const FLIGHT_HEIGHT_MAX = 2;//state.roomHeight * 0.9; // Max height for flying
|
|
||||||
const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
|
|
||||||
const FLY_WAIT_BASE = 1000;
|
|
||||||
const FLY_LAND_CHANCE = 0.3;
|
|
||||||
|
|
||||||
export class FliesEffect {
|
|
||||||
constructor(scene) {
|
|
||||||
this.flies = [];
|
|
||||||
this._setupFlies(scene);
|
|
||||||
}
|
|
||||||
|
|
||||||
_randomFlyTarget() {
|
|
||||||
return new THREE.Vector3(
|
|
||||||
(Math.random() - 0.5) * (state.roomSize - 1),
|
|
||||||
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
|
||||||
(Math.random() - 0.5) * (state.roomSize - 1)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
_createFlyMesh() {
|
|
||||||
const flyGroup = new THREE.Group();
|
|
||||||
const flyMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 50 });
|
|
||||||
const bodyGeometry = new THREE.ConeGeometry(0.01, 0.02, 3);
|
|
||||||
const body = new THREE.Mesh(bodyGeometry, flyMaterial);
|
|
||||||
body.rotation.x = degToRad(90);
|
|
||||||
body.castShadow = true;
|
|
||||||
body.receiveShadow = true;
|
|
||||||
flyGroup.add(body);
|
|
||||||
|
|
||||||
flyGroup.userData = {
|
|
||||||
state: 'flying',
|
|
||||||
landTimer: 0,
|
|
||||||
t: 0,
|
|
||||||
speed: FLY_FLIGHT_SPEED_FACTOR + Math.random() * 0.01,
|
|
||||||
curve: null,
|
|
||||||
landCheckTimer: 0,
|
|
||||||
oscillationTime: Math.random() * 100,
|
|
||||||
};
|
|
||||||
|
|
||||||
flyGroup.position.copy(this._randomFlyTarget());
|
|
||||||
return flyGroup;
|
|
||||||
}
|
|
||||||
|
|
||||||
_createFlyCurve(fly, endPoint) {
|
|
||||||
const startPoint = fly.position.clone();
|
|
||||||
const midPoint = new THREE.Vector3().lerpVectors(startPoint, endPoint, 0.5);
|
|
||||||
const offsetMagnitude = startPoint.distanceTo(endPoint) * 0.5;
|
|
||||||
const offsetAngle = Math.random() * Math.PI * 2;
|
|
||||||
|
|
||||||
const controlPoint = new THREE.Vector3(
|
|
||||||
midPoint.x + Math.cos(offsetAngle) * offsetMagnitude * 0.5,
|
|
||||||
midPoint.y + Math.random() * 0.5 + 0.5,
|
|
||||||
midPoint.z + Math.sin(offsetAngle) * offsetMagnitude * 0.5
|
|
||||||
);
|
|
||||||
|
|
||||||
fly.userData.curve = new THREE.QuadraticBezierCurve3(startPoint, controlPoint, endPoint);
|
|
||||||
fly.userData.t = 0;
|
|
||||||
fly.userData.landCheckTimer = 50 + Math.random() * 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
_setupFlies(scene) {
|
|
||||||
for (let i = 0; i < FLIES_COUNT; i++) {
|
|
||||||
const fly = this._createFlyMesh();
|
|
||||||
scene.add(fly);
|
|
||||||
this.flies.push(fly);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
|
||||||
this.flies.forEach(fly => {
|
|
||||||
const data = fly.userData;
|
|
||||||
|
|
||||||
if (data.state === 'flying' || data.state === 'landing') {
|
|
||||||
if (!data.curve) {
|
|
||||||
const newTargetPos = this._randomFlyTarget();
|
|
||||||
this._createFlyCurve(fly, newTargetPos);
|
|
||||||
data.t = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
data.t += data.speed;
|
|
||||||
data.landCheckTimer--;
|
|
||||||
|
|
||||||
if (data.t >= 1) {
|
|
||||||
if (data.state === 'landing') {
|
|
||||||
data.state = 'landed';
|
|
||||||
data.landTimer = FLY_WAIT_BASE + Math.random() * 1000;
|
|
||||||
data.t = 0;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.landCheckTimer <= 0 && Math.random() > FLY_LAND_CHANCE) {
|
|
||||||
state.raycaster.set(fly.position, new THREE.Vector3(0, -1, 0));
|
|
||||||
const intersects = state.raycaster.intersectObjects(state.landingSurfaces, false);
|
|
||||||
|
|
||||||
if (intersects.length > 0) {
|
|
||||||
const intersect = intersects[0];
|
|
||||||
data.state = 'landing';
|
|
||||||
let newTargetPos = new THREE.Vector3(
|
|
||||||
intersect.point.x,
|
|
||||||
intersect.point.y + 0.05,
|
|
||||||
intersect.point.z
|
|
||||||
);
|
|
||||||
this._createFlyCurve(fly, newTargetPos);
|
|
||||||
data.t = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.state !== 'landing') {
|
|
||||||
const newTargetPos = this._randomFlyTarget();
|
|
||||||
this._createFlyCurve(fly, newTargetPos);
|
|
||||||
data.t = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fly.position.copy(data.curve.getPoint(Math.min(data.t, 1)));
|
|
||||||
const tangent = data.curve.getTangent(Math.min(data.t, 1)).normalize();
|
|
||||||
fly.rotation.y = Math.atan2(tangent.x, tangent.z);
|
|
||||||
data.oscillationTime += 0.1;
|
|
||||||
fly.position.y += Math.sin(data.oscillationTime * 4) * 0.01;
|
|
||||||
|
|
||||||
} else if (data.state === 'landed') {
|
|
||||||
data.landTimer--;
|
|
||||||
if (data.landTimer <= 0) {
|
|
||||||
data.state = 'flying';
|
|
||||||
const newTargetPos = this._randomFlyTarget();
|
|
||||||
this._createFlyCurve(fly, newTargetPos);
|
|
||||||
data.t = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
28
tv-player/src/effects_dust.js
Normal file
28
tv-player/src/effects_dust.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
// --- 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,
|
||||||
|
Math.random() * 10,
|
||||||
|
(Math.random() - 0.5) * 15
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// Use THREE.Float32BufferAttribute to correctly set the position attribute
|
||||||
|
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);
|
||||||
|
// Dust particles generally don't cast or receive shadows in this context
|
||||||
|
scene.add(dust);
|
||||||
|
}
|
||||||
174
tv-player/src/effects_flies.js
Normal file
174
tv-player/src/effects_flies.js
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
function randomFlyTarget() {
|
||||||
|
return new THREE.Vector3(
|
||||||
|
(Math.random() - 0.5) * (ROOM_SIZE - 1),
|
||||||
|
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
||||||
|
(Math.random() - 0.5) * (ROOM_SIZE - 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a single fly mesh (small cone/tetrahedron).
|
||||||
|
* @returns {THREE.Group}
|
||||||
|
*/
|
||||||
|
function createFlyMesh() {
|
||||||
|
const flyGroup = new THREE.Group();
|
||||||
|
|
||||||
|
const flyMaterial = new THREE.MeshPhongMaterial({
|
||||||
|
color: 0x111111, // Dark fly color
|
||||||
|
shininess: 50,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Small Cone/Tetrahedron for a simple shape
|
||||||
|
const bodyGeometry = new THREE.ConeGeometry(0.01, 0.02, 3);
|
||||||
|
const body = new THREE.Mesh(bodyGeometry, flyMaterial);
|
||||||
|
body.rotation.x = degToRad(90); // Point nose in Z direction
|
||||||
|
|
||||||
|
body.castShadow = true;
|
||||||
|
body.receiveShadow = true;
|
||||||
|
flyGroup.add(body);
|
||||||
|
|
||||||
|
// Initial state and parameters for the fly
|
||||||
|
flyGroup.userData = {
|
||||||
|
state: 'flying', // 'flying' or 'landed'
|
||||||
|
landTimer: 0,
|
||||||
|
t: 0, // Curve progression t parameter (0 to 1)
|
||||||
|
speed: FLY_FLIGHT_SPEED_FACTOR + Math.random() * 0.01,
|
||||||
|
curve: null,
|
||||||
|
landCheckTimer: 0,
|
||||||
|
oscillationTime: Math.random() * 100, // For smooth y-axis buzzing
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initial random position
|
||||||
|
flyGroup.position = randomFlyTarget();
|
||||||
|
|
||||||
|
return flyGroup;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new Quadratic Bezier curve for a fly's flight path.
|
||||||
|
* @param {THREE.Group} fly - The fly mesh group.
|
||||||
|
* @param {THREE.Vector3} endPoint - The target position for the end of the curve.
|
||||||
|
*/
|
||||||
|
function createFlyCurve(fly, endPoint) {
|
||||||
|
const startPoint = fly.position.clone();
|
||||||
|
|
||||||
|
// Calculate the midpoint
|
||||||
|
const midPoint = new THREE.Vector3().lerpVectors(startPoint, endPoint, 0.5);
|
||||||
|
|
||||||
|
// Calculate a random offset for the control point to create curvature
|
||||||
|
const offsetMagnitude = startPoint.distanceTo(endPoint) * 0.5;
|
||||||
|
const offsetAngle = Math.random() * Math.PI * 2;
|
||||||
|
|
||||||
|
// Displace the control point randomly to create a swooping path.
|
||||||
|
// Control point y is usually higher than start/end for a nice arc.
|
||||||
|
const controlPoint = new THREE.Vector3(
|
||||||
|
midPoint.x + Math.cos(offsetAngle) * offsetMagnitude * 0.5,
|
||||||
|
midPoint.y + Math.random() * 0.5 + 0.5,
|
||||||
|
midPoint.z + Math.sin(offsetAngle) * offsetMagnitude * 0.5
|
||||||
|
);
|
||||||
|
|
||||||
|
fly.userData.curve = new THREE.QuadraticBezierCurve3(
|
||||||
|
startPoint,
|
||||||
|
controlPoint,
|
||||||
|
endPoint
|
||||||
|
);
|
||||||
|
fly.userData.t = 0; // Reset progression
|
||||||
|
fly.userData.landCheckTimer = 50 + Math.random() * 50; // New landing decision window
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates and places the 'flies' meshes.
|
||||||
|
*/
|
||||||
|
function setupFlies() {
|
||||||
|
for (let i = 0; i < FLIES_COUNT; i++) {
|
||||||
|
const fly = createFlyMesh();
|
||||||
|
scene.add(fly);
|
||||||
|
flies.push(fly);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates the position and state of the flies using Bezier curves.
|
||||||
|
*/
|
||||||
|
function updateFlies() {
|
||||||
|
flies.forEach(fly => {
|
||||||
|
const data = fly.userData;
|
||||||
|
|
||||||
|
if (data.state === 'flying' || data.state === 'landing') {
|
||||||
|
|
||||||
|
if (!data.curve) {
|
||||||
|
// Initialize the first curve
|
||||||
|
const newTargetPos = randomFlyTarget();
|
||||||
|
createFlyCurve(fly, newTargetPos);
|
||||||
|
data.t = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Advance curve progression
|
||||||
|
data.t += data.speed;
|
||||||
|
|
||||||
|
// Check for landing readiness during the flight path
|
||||||
|
data.landCheckTimer--;
|
||||||
|
|
||||||
|
if (data.t >= 1) {
|
||||||
|
// Path finished
|
||||||
|
|
||||||
|
if (data.state === 'landing') {
|
||||||
|
data.state = 'landed';
|
||||||
|
data.landTimer = FLY_WAIT_BASE + Math.random() * 1000; // Land for a random duration
|
||||||
|
data.t = 0;
|
||||||
|
return; // Stop updates for this fly
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Check for landing decision
|
||||||
|
if (data.landCheckTimer <= 0 && Math.random() > FLY_LAND_CHANCE) {
|
||||||
|
|
||||||
|
// Raycast down from the current position to find a landing spot
|
||||||
|
raycaster.set(fly.position, new THREE.Vector3(0, -1, 0));
|
||||||
|
const intersects = raycaster.intersectObjects(landingSurfaces, false);
|
||||||
|
|
||||||
|
if (intersects.length > 0) {
|
||||||
|
const intersect = intersects[0];
|
||||||
|
data.state = 'landing';
|
||||||
|
// Land slightly above the surface
|
||||||
|
let newTargetPos = new THREE.Vector3(intersect.point.x,
|
||||||
|
intersect.point.y + 0.05,
|
||||||
|
intersect.point.z);
|
||||||
|
// const newTargetPos = randomFlyTarget();
|
||||||
|
createFlyCurve(fly, newTargetPos);
|
||||||
|
data.t = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.state !== 'landing') {
|
||||||
|
// 2. If not landing, generate a new random flight path
|
||||||
|
const newTargetPos = randomFlyTarget();
|
||||||
|
createFlyCurve(fly, newTargetPos);
|
||||||
|
data.t = 0; // Reset T for the new curve
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set position along the curve
|
||||||
|
fly.position.copy(data.curve.getPoint(Math.min(data.t, 1)));
|
||||||
|
|
||||||
|
// Set rotation tangent to the curve
|
||||||
|
const tangent = data.curve.getTangent(Math.min(data.t, 1)).normalize();
|
||||||
|
fly.rotation.y = Math.atan2(tangent.x, tangent.z);
|
||||||
|
|
||||||
|
// Add slight Y oscillation for buzzing feel (on top of curve)
|
||||||
|
data.oscillationTime += 0.1;
|
||||||
|
fly.position.y += Math.sin(data.oscillationTime * 4) * 0.01;
|
||||||
|
|
||||||
|
} else if (data.state === 'landed') {
|
||||||
|
// --- Landed State ---
|
||||||
|
data.landTimer--;
|
||||||
|
if (data.landTimer <= 0) {
|
||||||
|
// Take off: Generate new flight curve from current landed position
|
||||||
|
data.state = 'flying';
|
||||||
|
|
||||||
|
const newTargetPos = randomFlyTarget();
|
||||||
|
createFlyCurve(fly, newTargetPos);
|
||||||
|
data.t = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
// --- Global Variables ---
|
// --- Global Variables ---
|
||||||
let scene, camera, renderer, tvScreen, videoTexture, screenLight, lampLightPoint, lampLightSpot, effectsManager;
|
let scene, camera, renderer, tvScreen, videoTexture, dust, screenLight, lampLightPoint, lampLightSpot;
|
||||||
|
|
||||||
// VCR Display related variables
|
// VCR Display related variables
|
||||||
let simulatedPlaybackTime = 0;
|
let simulatedPlaybackTime = 0;
|
||||||
@ -23,6 +23,9 @@ const loadTapeButton = document.getElementById('loadTapeButton');
|
|||||||
const loader = new THREE.TextureLoader();
|
const loader = new THREE.TextureLoader();
|
||||||
|
|
||||||
const debugLight = false;
|
const debugLight = false;
|
||||||
|
|
||||||
|
const FLIES_COUNT = 2; // Flies
|
||||||
|
const flies = [];
|
||||||
let landingSurfaces = []; // Array to hold floor and table for fly landings
|
let landingSurfaces = []; // Array to hold floor and table for fly landings
|
||||||
const raycaster = new THREE.Raycaster();
|
const raycaster = new THREE.Raycaster();
|
||||||
|
|
||||||
|
|||||||
67
tv-player/src/init.js
Normal file
67
tv-player/src/init.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
// --- Initialization ---
|
||||||
|
function init() {
|
||||||
|
// 1. Scene Setup (Dark, Ambient)
|
||||||
|
scene = new THREE.Scene();
|
||||||
|
scene.background = new THREE.Color(0x000000);
|
||||||
|
|
||||||
|
// 2. Camera Setup
|
||||||
|
const FOV = 65;
|
||||||
|
camera = new THREE.PerspectiveCamera(FOV, 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(0x111111);
|
||||||
|
scene.add(ambientLight);
|
||||||
|
|
||||||
|
const roomLight = new THREE.PointLight(0xffaa55, 0.05, roomSize);
|
||||||
|
roomLight.position.set(0, 1.8, 0);
|
||||||
|
scene.add(roomLight);
|
||||||
|
|
||||||
|
// 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 (debugLight && 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 lampHelperPoint = new THREE.PointLightHelper(lampLightPoint, 0.1, 0x00ff00); // Green for lamp
|
||||||
|
scene.add(lampHelperPoint);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 9. Event Listeners
|
||||||
|
window.addEventListener('resize', onWindowResize, false);
|
||||||
|
fileInput.addEventListener('change', loadVideoFile);
|
||||||
|
|
||||||
|
// Button logic
|
||||||
|
loadTapeButton.addEventListener('click', () => {
|
||||||
|
fileInput.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auto-advance to the next video when the current one finishes.
|
||||||
|
videoElement.addEventListener('ended', playNextVideo);
|
||||||
|
|
||||||
|
// Start the animation loop
|
||||||
|
animate();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start everything on window load
|
||||||
|
window.onload = init;
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import './tailwind-config.js';
|
|
||||||
import { init } from './core/init.js';
|
|
||||||
|
|
||||||
// Start everything
|
|
||||||
init();
|
|
||||||
571
tv-player/src/scene.js
Normal file
571
tv-player/src/scene.js
Normal file
@ -0,0 +1,571 @@
|
|||||||
|
// --- Room Walls Function ---
|
||||||
|
function createRoomWalls() {
|
||||||
|
const wallTexture = loader.load('./textures/wall.jpg');
|
||||||
|
wallTexture.wrapS = THREE.RepeatWrapping;
|
||||||
|
wallTexture.wrapT = THREE.RepeatWrapping;
|
||||||
|
|
||||||
|
// USING MeshPhongMaterial for specular highlights on walls
|
||||||
|
const wallMaterial = new THREE.MeshPhongMaterial({
|
||||||
|
map: wallTexture,
|
||||||
|
side: THREE.FrontSide,
|
||||||
|
shininess: 5,
|
||||||
|
specular: 0x111111 // Subtle reflection
|
||||||
|
});
|
||||||
|
|
||||||
|
// 1. Back Wall (behind the TV)
|
||||||
|
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);
|
||||||
|
|
||||||
|
// 2. Front Wall (behind the camera)
|
||||||
|
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);
|
||||||
|
|
||||||
|
// 3. Left Wall
|
||||||
|
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);
|
||||||
|
|
||||||
|
// 4. Right Wall
|
||||||
|
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);
|
||||||
|
|
||||||
|
// 5. Ceiling
|
||||||
|
const ceilingGeometry = new THREE.PlaneGeometry(roomSize, roomSize);
|
||||||
|
const ceilingTexture = wallTexture;
|
||||||
|
ceilingTexture.repeat.set(4, 4);
|
||||||
|
// USING MeshPhongMaterial
|
||||||
|
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);
|
||||||
|
|
||||||
|
// --- 6. Add a Window to the Back Wall ---
|
||||||
|
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(-3.5, roomHeight * 0.5 + 1.5, windowZ);
|
||||||
|
scene.add(windowPane);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createBookshelf(x, z, rotationY, uniqueSeed) {
|
||||||
|
seed = uniqueSeed; // Reset seed for this specific shelf instance
|
||||||
|
|
||||||
|
const shelfHeight = 2.2;
|
||||||
|
const shelfDepth = 0.35;
|
||||||
|
const shelfWidth = 1.2;
|
||||||
|
const numShelves = 6;
|
||||||
|
const woodThickness = 0.04;
|
||||||
|
const woodColor = 0x5c4033; // Darker, richer wood
|
||||||
|
|
||||||
|
const shelfGroup = new THREE.Group();
|
||||||
|
shelfGroup.position.set(x, 0, z);
|
||||||
|
shelfGroup.rotation.y = rotationY;
|
||||||
|
|
||||||
|
const woodMaterial = new THREE.MeshPhongMaterial({ color: woodColor, shininess: 30 });
|
||||||
|
|
||||||
|
// 1. Build Frame (Hollow box)
|
||||||
|
// Back Panel
|
||||||
|
const backGeo = new THREE.BoxGeometry(shelfWidth, shelfHeight, woodThickness);
|
||||||
|
const backPanel = new THREE.Mesh(backGeo, woodMaterial);
|
||||||
|
backPanel.position.set(0, shelfHeight / 2, -shelfDepth / 2 + woodThickness / 2);
|
||||||
|
backPanel.castShadow = true;
|
||||||
|
backPanel.receiveShadow = true;
|
||||||
|
shelfGroup.add(backPanel);
|
||||||
|
|
||||||
|
// Side Panels (Left & Right)
|
||||||
|
const sideGeo = new THREE.BoxGeometry(woodThickness, shelfHeight, shelfDepth);
|
||||||
|
const leftSide = new THREE.Mesh(sideGeo, woodMaterial);
|
||||||
|
leftSide.position.set(-shelfWidth / 2 + woodThickness / 2, shelfHeight / 2, 0);
|
||||||
|
leftSide.castShadow = true;
|
||||||
|
leftSide.receiveShadow = true;
|
||||||
|
shelfGroup.add(leftSide);
|
||||||
|
|
||||||
|
const rightSide = new THREE.Mesh(sideGeo, woodMaterial);
|
||||||
|
rightSide.position.set(shelfWidth / 2 - woodThickness / 2, shelfHeight / 2, 0);
|
||||||
|
rightSide.castShadow = true;
|
||||||
|
rightSide.receiveShadow = true;
|
||||||
|
shelfGroup.add(rightSide);
|
||||||
|
|
||||||
|
// Top & Bottom Panels
|
||||||
|
const topBottomGeo = new THREE.BoxGeometry(shelfWidth, woodThickness, shelfDepth);
|
||||||
|
const bottomPanel = new THREE.Mesh(topBottomGeo, woodMaterial);
|
||||||
|
bottomPanel.position.set(0, woodThickness / 2, 0);
|
||||||
|
bottomPanel.receiveShadow = true;
|
||||||
|
shelfGroup.add(bottomPanel);
|
||||||
|
|
||||||
|
const topPanel = new THREE.Mesh(topBottomGeo, woodMaterial);
|
||||||
|
topPanel.position.set(0, shelfHeight - woodThickness / 2, 0);
|
||||||
|
topPanel.castShadow = true;
|
||||||
|
shelfGroup.add(topPanel);
|
||||||
|
|
||||||
|
landingSurfaces.push(topPanel);
|
||||||
|
|
||||||
|
// 2. Individual Shelves & Books
|
||||||
|
const internalHeight = shelfHeight - (2 * woodThickness);
|
||||||
|
const shelfSpacing = internalHeight / numShelves;
|
||||||
|
const internalWidth = shelfWidth - (2 * woodThickness);
|
||||||
|
|
||||||
|
for (let i = 0; i < numShelves; i++) {
|
||||||
|
const currentShelfY = woodThickness + (i * shelfSpacing);
|
||||||
|
|
||||||
|
// Shelf board (skip for the very bottom one as we have a bottom panel)
|
||||||
|
if (i > 0) {
|
||||||
|
const shelfBoard = new THREE.Mesh(
|
||||||
|
new THREE.BoxGeometry(internalWidth, woodThickness, shelfDepth - woodThickness), // Slightly shallower to fit inside back panel
|
||||||
|
woodMaterial
|
||||||
|
);
|
||||||
|
shelfBoard.position.set(0, currentShelfY, woodThickness / 2); // Offset forward slightly
|
||||||
|
shelfBoard.castShadow = true;
|
||||||
|
shelfBoard.receiveShadow = true;
|
||||||
|
shelfGroup.add(shelfBoard);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Procedural Books
|
||||||
|
let currentBookX = -internalWidth / 2 + 0.01; // Start at left inside edge
|
||||||
|
const shelfSurfaceY = currentShelfY + woodThickness / 2;
|
||||||
|
|
||||||
|
while (currentBookX < internalWidth / 2 - 0.05) {
|
||||||
|
// sizes vary
|
||||||
|
const bookWidth = 0.02 + seededRandom() * 0.05;
|
||||||
|
const bookHeight = (shelfSpacing * 0.6) + seededRandom() * (shelfSpacing * 0.1);
|
||||||
|
const bookDepth = 0.15 + seededRandom() * 0.03;
|
||||||
|
|
||||||
|
if (currentBookX + bookWidth > internalWidth / 2) break;
|
||||||
|
|
||||||
|
const bookColor = getRandomColor();
|
||||||
|
const bookMat = new THREE.MeshPhongMaterial({ color: bookColor, shininess: 60 });
|
||||||
|
const bookGeo = new THREE.BoxGeometry(bookWidth, bookHeight, bookDepth);
|
||||||
|
const book = new THREE.Mesh(bookGeo, bookMat);
|
||||||
|
|
||||||
|
// Position: Resting on shelf, pushed towards the back with slight random variation
|
||||||
|
const depthVariation = seededRandom() * 0.05;
|
||||||
|
book.position.set(
|
||||||
|
currentBookX + bookWidth / 2,
|
||||||
|
shelfSurfaceY + bookHeight / 2,
|
||||||
|
-shelfDepth / 2 + woodThickness + bookDepth / 2 + depthVariation
|
||||||
|
);
|
||||||
|
|
||||||
|
book.castShadow = true;
|
||||||
|
book.receiveShadow = true;
|
||||||
|
shelfGroup.add(book);
|
||||||
|
|
||||||
|
currentBookX += bookWidth + 0.002; // Tiny gap between books
|
||||||
|
|
||||||
|
if (seededRandom() > 0.92) {
|
||||||
|
currentBookX += bookWidth * 3; // random bigger gaps
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scene.add(shelfGroup);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDoor(x, z, rotY) {
|
||||||
|
const doorGroup = new THREE.Group();
|
||||||
|
doorGroup.position.set(x, 1.1, z); // Centered vertically for a 2.2m door
|
||||||
|
doorGroup.rotation.set(0, rotY, 0);
|
||||||
|
|
||||||
|
// Door Frame
|
||||||
|
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x473e3a }); // Dark wood for frame
|
||||||
|
const frameTop = new THREE.Mesh(new THREE.BoxGeometry(1.2, 0.1, 0.15), frameMaterial);
|
||||||
|
frameTop.position.set(0, 1.15, 0);
|
||||||
|
frameTop.castShadow = true;
|
||||||
|
doorGroup.add(frameTop);
|
||||||
|
|
||||||
|
const frameLeft = new THREE.Mesh(new THREE.BoxGeometry(0.1, 2.3, 0.15), frameMaterial);
|
||||||
|
frameLeft.position.set(-0.55, 0.05, 0);
|
||||||
|
frameLeft.castShadow = true;
|
||||||
|
doorGroup.add(frameLeft);
|
||||||
|
|
||||||
|
const frameRight = new THREE.Mesh(new THREE.BoxGeometry(0.1, 2.3, 0.15), frameMaterial);
|
||||||
|
frameRight.position.set(0.55, 0.05, 0);
|
||||||
|
frameRight.castShadow = true;
|
||||||
|
doorGroup.add(frameRight);
|
||||||
|
|
||||||
|
// Main Door Panel
|
||||||
|
const doorMaterial = new THREE.MeshPhongMaterial({ color: 0x8b5a2b, shininess: 10 }); // Lighter wood for door
|
||||||
|
const door = new THREE.Mesh(new THREE.BoxGeometry(1.0, 2.2, 0.08), doorMaterial);
|
||||||
|
door.castShadow = true;
|
||||||
|
door.receiveShadow = true;
|
||||||
|
doorGroup.add(door);
|
||||||
|
|
||||||
|
// Door Knob
|
||||||
|
const knobMaterial = new THREE.MeshPhongMaterial({ color: 0xd4af37, shininess: 100 }); // Gold/Brass
|
||||||
|
const knob = new THREE.Mesh(new THREE.SphereGeometry(0.05, 16, 16), knobMaterial);
|
||||||
|
knob.position.set(0.4, 0, 0.06); // Position on the right side of the door
|
||||||
|
knob.castShadow = true;
|
||||||
|
doorGroup.add(knob);
|
||||||
|
|
||||||
|
scene.add(doorGroup);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- VCR Model Function ---
|
||||||
|
function createVcr() {
|
||||||
|
// Materials
|
||||||
|
const vcrBodyMaterial = new THREE.MeshPhongMaterial({
|
||||||
|
color: 0x222222, // Dark metallic gray
|
||||||
|
shininess: 70,
|
||||||
|
specular: 0x444444
|
||||||
|
});
|
||||||
|
const slotMaterial = new THREE.MeshPhongMaterial({
|
||||||
|
color: 0x0a0a0a, // Deep black
|
||||||
|
shininess: 5,
|
||||||
|
specular: 0x111111
|
||||||
|
});
|
||||||
|
|
||||||
|
// VCR Body
|
||||||
|
const vcrBodyGeometry = new THREE.BoxGeometry(1.0, 0.2, 0.7);
|
||||||
|
const vcrBody = new THREE.Mesh(vcrBodyGeometry, vcrBodyMaterial);
|
||||||
|
vcrBody.position.y = 0; // Centered
|
||||||
|
vcrBody.castShadow = true;
|
||||||
|
vcrBody.receiveShadow = true;
|
||||||
|
|
||||||
|
// Cassette Slot / Front Face
|
||||||
|
const slotGeometry = new THREE.BoxGeometry(0.9, 0.05, 0.01);
|
||||||
|
const slotMesh = new THREE.Mesh(slotGeometry, slotMaterial);
|
||||||
|
slotMesh.position.set(0, -0.05, 0.35 + 0.005);
|
||||||
|
slotMesh.castShadow = true;
|
||||||
|
slotMesh.receiveShadow = true;
|
||||||
|
|
||||||
|
// VCR Display
|
||||||
|
const displayMesh = createVcrDisplay();
|
||||||
|
displayMesh.position.z = 0.35 + 0.005;
|
||||||
|
displayMesh.position.x = 0.2; // Adjusted X for arrow
|
||||||
|
displayMesh.position.y = 0.03;
|
||||||
|
|
||||||
|
// VCR Group
|
||||||
|
const vcrGroup = new THREE.Group();
|
||||||
|
vcrGroup.add(vcrBody, slotMesh, displayMesh);
|
||||||
|
vcrGroup.position.set(0, 0.1, 0); // Position the whole VCR slightly above the floor
|
||||||
|
|
||||||
|
// Light from the VCR display itself
|
||||||
|
vcrDisplayLight = new THREE.PointLight(0x00ff44, 0.5, 1);
|
||||||
|
vcrDisplayLight.position.set(0.3, 0.03, 0.35 + 0.05); // Move light slightly closer to VCR surface
|
||||||
|
vcrDisplayLight.castShadow = true;
|
||||||
|
vcrDisplayLight.shadow.mapSize.width = 256;
|
||||||
|
vcrDisplayLight.shadow.mapSize.height = 256;
|
||||||
|
vcrGroup.add(vcrDisplayLight);
|
||||||
|
|
||||||
|
return vcrGroup;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTvSet(x, z, rotY) {
|
||||||
|
// --- Materials (MeshPhongMaterial) ---
|
||||||
|
const darkWood = new THREE.MeshPhongMaterial({ color: 0x3d352e, shininess: 10 });
|
||||||
|
const darkMetal = new THREE.MeshPhongMaterial({
|
||||||
|
color: 0x6b6b6b,
|
||||||
|
shininess: 80,
|
||||||
|
specular: 0x888888
|
||||||
|
});
|
||||||
|
const tvPlastic = new THREE.MeshPhongMaterial({ color: 0x4d4d4d, shininess: 30 });
|
||||||
|
|
||||||
|
const tvGroup = new THREE.Group();
|
||||||
|
|
||||||
|
// --- TV Table Dimensions & Material ---
|
||||||
|
const woodColor = 0x5a3e36; // Dark brown wood
|
||||||
|
const tableHeight = 0.7; // Height from floor to top surface
|
||||||
|
const tableWidth = 2.0;
|
||||||
|
const tableDepth = 1.0;
|
||||||
|
const legThickness = 0.05;
|
||||||
|
const shelfThickness = 0.03;
|
||||||
|
// Use standard material for realistic shadowing
|
||||||
|
const material = new THREE.MeshStandardMaterial({ color: woodColor, roughness: 0.8, metalness: 0.1 });
|
||||||
|
|
||||||
|
// VCR gap dimensions calculation
|
||||||
|
const shelfGap = 0.2; // Height of the VCR opening
|
||||||
|
const shelfY = tableHeight - shelfGap - (shelfThickness / 2); // Y position of the bottom shelf
|
||||||
|
|
||||||
|
|
||||||
|
// 2. Table Top
|
||||||
|
const topGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
|
||||||
|
const tableTop = new THREE.Mesh(topGeometry, material);
|
||||||
|
tableTop.position.set(0, tableHeight, 0);
|
||||||
|
tableTop.castShadow = true;
|
||||||
|
tableTop.receiveShadow = true;
|
||||||
|
tvGroup.add(tableTop);
|
||||||
|
|
||||||
|
// 3. VCR Shelf (Middle Shelf)
|
||||||
|
const shelfGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
|
||||||
|
const vcrShelf = new THREE.Mesh(shelfGeometry, material);
|
||||||
|
vcrShelf.position.set(0, shelfY, 0);
|
||||||
|
vcrShelf.castShadow = true;
|
||||||
|
vcrShelf.receiveShadow = true;
|
||||||
|
tvGroup.add(vcrShelf);
|
||||||
|
|
||||||
|
// 4. Side Walls for VCR Compartment (NEW CODE)
|
||||||
|
const wallHeight = shelfGap; // Height is the gap itself
|
||||||
|
const wallThickness = shelfThickness; // Reuse the shelf thickness for the wall width/depth
|
||||||
|
const wallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, tableDepth);
|
||||||
|
|
||||||
|
// Calculate the Y center position for the wall
|
||||||
|
const wallYCenter = tableHeight - (shelfThickness / 2) - (wallHeight / 2);
|
||||||
|
|
||||||
|
// Calculate the X position to be flush with the table sides
|
||||||
|
const wallXPosition = (tableWidth / 2) - (wallThickness / 2);
|
||||||
|
|
||||||
|
// Left Wall
|
||||||
|
const sideWallLeft = new THREE.Mesh(wallGeometry, material);
|
||||||
|
sideWallLeft.position.set(-wallXPosition, wallYCenter, 0);
|
||||||
|
sideWallLeft.castShadow = true;
|
||||||
|
sideWallLeft.receiveShadow = true;
|
||||||
|
tvGroup.add(sideWallLeft);
|
||||||
|
|
||||||
|
// Right Wall
|
||||||
|
const sideWallRight = new THREE.Mesh(wallGeometry, material);
|
||||||
|
sideWallRight.position.set(wallXPosition, wallYCenter, 0);
|
||||||
|
sideWallRight.castShadow = true;
|
||||||
|
sideWallRight.receiveShadow = true;
|
||||||
|
tvGroup.add(sideWallRight);
|
||||||
|
|
||||||
|
// 5. Legs
|
||||||
|
const legHeight = shelfY; // Legs go from the floor (y=0) to the shelf (y=shelfY)
|
||||||
|
const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
|
||||||
|
|
||||||
|
// Utility function to create and position a leg
|
||||||
|
const createLeg = (x, z) => {
|
||||||
|
const leg = new THREE.Mesh(legGeometry, material);
|
||||||
|
// Position the leg so the center is at half its height
|
||||||
|
leg.position.set(x, legHeight / 2, z);
|
||||||
|
leg.castShadow = true;
|
||||||
|
leg.receiveShadow = true;
|
||||||
|
return leg;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate offsets for positioning the legs near the corners
|
||||||
|
const offset = (tableWidth / 2) - (legThickness * 2);
|
||||||
|
const depthOffset = (tableDepth / 2) - (legThickness * 2);
|
||||||
|
|
||||||
|
// Front Left
|
||||||
|
tvGroup.add(createLeg(-offset, depthOffset));
|
||||||
|
// Front Right
|
||||||
|
tvGroup.add(createLeg(offset, depthOffset));
|
||||||
|
// Back Left
|
||||||
|
tvGroup.add(createLeg(-offset, -depthOffset));
|
||||||
|
// Back Right
|
||||||
|
tvGroup.add(createLeg(offset, -depthOffset));
|
||||||
|
|
||||||
|
// --- 2. The TV box ---
|
||||||
|
const cabinetGeometry = new THREE.BoxGeometry(1.75, 1.5, 1.0);
|
||||||
|
const cabinet = new THREE.Mesh(cabinetGeometry, tvPlastic);
|
||||||
|
cabinet.position.y = 1.51;
|
||||||
|
cabinet.castShadow = true;
|
||||||
|
cabinet.receiveShadow = true;
|
||||||
|
tvGroup.add(cabinet);
|
||||||
|
|
||||||
|
// --- 3. Screen Frame ---
|
||||||
|
const frameGeometry = new THREE.BoxGeometry(1.5, 1.3, 0.1);
|
||||||
|
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 20 });
|
||||||
|
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
|
||||||
|
frame.position.set(0, 1.5, 0.68);
|
||||||
|
frame.castShadow = true;
|
||||||
|
frame.receiveShadow = true;
|
||||||
|
tvGroup.add(frame);
|
||||||
|
|
||||||
|
// --- 4. Curved Screen (CRT Effect) ---
|
||||||
|
const screenRadius = 3.0; // Radius for the subtle curve
|
||||||
|
const screenWidth = 1.4;
|
||||||
|
const screenHeight = 1.2;
|
||||||
|
const thetaLength = screenWidth / screenRadius; // Calculate angle needed for the arc
|
||||||
|
|
||||||
|
// Use CylinderGeometry as a segment
|
||||||
|
const screenGeometry = new THREE.CylinderGeometry(
|
||||||
|
screenRadius, screenRadius,
|
||||||
|
screenHeight, // Cylinder height is the vertical dimension of the screen
|
||||||
|
32,
|
||||||
|
1,
|
||||||
|
true,
|
||||||
|
(Math.PI / 2) - (thetaLength / 2), // Start angle to center the arc
|
||||||
|
thetaLength // Arc length (width)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Rotate the cylinder segment:
|
||||||
|
// 1. Rotate around X-axis by 90 degrees to lay the height (Y) along Z (depth).
|
||||||
|
//screenGeometry.rotateX(Math.PI / 2);
|
||||||
|
// 2. Rotate around Y-axis by 90 degrees to align the segment's arc across the X-axis (width).
|
||||||
|
screenGeometry.rotateY(-Math.PI/2);
|
||||||
|
|
||||||
|
const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
|
||||||
|
tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
|
||||||
|
|
||||||
|
// Position the curved screen
|
||||||
|
tvScreen.position.set(0.0, 1.5, -2.1);
|
||||||
|
tvScreen.material = new THREE.MeshPhongMaterial({
|
||||||
|
color: 0x0a0a0a, // Deep black
|
||||||
|
shininess: 5,
|
||||||
|
specular: 0x111111
|
||||||
|
});
|
||||||
|
tvScreen.material.needsUpdate = true;
|
||||||
|
tvGroup.add(tvScreen);
|
||||||
|
|
||||||
|
tvGroup.position.set(x, 0, z);
|
||||||
|
tvGroup.rotation.y = rotY;
|
||||||
|
|
||||||
|
// Light from the screen (initially low intensity, will increase when video loads)
|
||||||
|
screenLight = new THREE.PointLight(0xffffff, 0, 10);
|
||||||
|
screenLight.position.set(0, 1.5, 1.0);
|
||||||
|
// 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 = 5;
|
||||||
|
tvGroup.add(screenLight);
|
||||||
|
|
||||||
|
// -- VCR --
|
||||||
|
const vcr = createVcr();
|
||||||
|
vcr.position.set(-0.3, 0.6, 0.05);
|
||||||
|
tvGroup.add(vcr);
|
||||||
|
|
||||||
|
scene.add(tvGroup);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Scene Modeling Function ---
|
||||||
|
function createSceneObjects() {
|
||||||
|
// --- Materials (MeshPhongMaterial) ---
|
||||||
|
const darkWood = new THREE.MeshPhongMaterial({ color: 0x3d352e, shininess: 10 });
|
||||||
|
const darkMetal = new THREE.MeshPhongMaterial({
|
||||||
|
color: 0x6b6b6b,
|
||||||
|
shininess: 80,
|
||||||
|
specular: 0x888888
|
||||||
|
});
|
||||||
|
const tvPlastic = new THREE.MeshPhongMaterial({ color: 0x2d251e, shininess: 10 });
|
||||||
|
|
||||||
|
// --- 1. Floor ---
|
||||||
|
const floorGeometry = new THREE.PlaneGeometry(20, 20);
|
||||||
|
const floorTexture = loader.load('./textures/floor.jpg');
|
||||||
|
floorTexture.wrapS = THREE.RepeatWrapping;
|
||||||
|
floorTexture.wrapT = THREE.RepeatWrapping;
|
||||||
|
floorTexture.repeat.set(roomSize, roomSize);
|
||||||
|
const floorMaterial = new THREE.MeshPhongMaterial({ map: floorTexture, color: 0x555555, 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);
|
||||||
|
|
||||||
|
landingSurfaces.push(floor);
|
||||||
|
|
||||||
|
createTvSet(-roomSize/2 + 1.2, -roomSize/2 + 0.8, Math.PI * 0.1);
|
||||||
|
|
||||||
|
// --- 5. Lamp (On the table, right side) ---
|
||||||
|
const lampBase = new THREE.CylinderGeometry(0.05, 0.2, 0.1, 12);
|
||||||
|
const lampPole = new THREE.CylinderGeometry(0.02, 0.02, 1.5, 8);
|
||||||
|
const lampShade = new THREE.ConeGeometry(0.2, 0.4, 16);
|
||||||
|
|
||||||
|
const baseMesh = new THREE.Mesh(lampBase, darkMetal);
|
||||||
|
const poleMesh = new THREE.Mesh(lampPole, darkMetal);
|
||||||
|
const shadeMesh = new THREE.Mesh(lampShade, darkMetal);
|
||||||
|
|
||||||
|
// Ensure lamp parts cast shadows
|
||||||
|
baseMesh.castShadow = true; baseMesh.receiveShadow = true;
|
||||||
|
poleMesh.castShadow = true; poleMesh.receiveShadow = true;
|
||||||
|
//shadeMesh.castShadow = true; shadeMesh.receiveShadow = true;
|
||||||
|
|
||||||
|
baseMesh.position.y = -0.6;
|
||||||
|
poleMesh.position.y = 0.0;
|
||||||
|
shadeMesh.position.y = 0.8 + 0.1;
|
||||||
|
shadeMesh.rotation.x = Math.PI;
|
||||||
|
|
||||||
|
// Lamp Light (Warm Glow) - Configured to cast shadows
|
||||||
|
lampLightPoint = new THREE.PointLight(0xffaa00, originalLampIntensity, 4);
|
||||||
|
lampLightPoint.position.set(-0.01, roomHeight-0.9, 0.01);
|
||||||
|
lampLightPoint.castShadow = true;
|
||||||
|
// Optimization: Reduced map size and far plane to ease resource burden
|
||||||
|
lampLightPoint.shadow.mapSize.width = 512;
|
||||||
|
lampLightPoint.shadow.mapSize.height = 512;
|
||||||
|
lampLightPoint.shadow.camera.near = 0.1;
|
||||||
|
lampLightPoint.shadow.camera.far = 4; // Matches the light's attenuation distance (4)
|
||||||
|
lampLightPoint.penumbra = 0.5;
|
||||||
|
|
||||||
|
lampLightSpot = new THREE.SpotLight(0xffaa00, originalLampIntensity, 4);
|
||||||
|
lampLightSpot.position.set(-0.01, 1.0, 0.01);
|
||||||
|
lampLightSpot.target.position.set(0, 5, 0);
|
||||||
|
lampLightSpot.castShadow = true;
|
||||||
|
// Optimization: Reduced map size and far plane to ease resource burden
|
||||||
|
lampLightSpot.shadow.mapSize.width = 512;
|
||||||
|
lampLightSpot.shadow.mapSize.height = 512;
|
||||||
|
lampLightSpot.shadow.camera.near = 0.1;
|
||||||
|
lampLightSpot.shadow.camera.far = 4; // Matches the light's attenuation distance (4)
|
||||||
|
lampLightSpot.penumbra = 0.5;
|
||||||
|
|
||||||
|
const lampGroup = new THREE.Group();
|
||||||
|
lampGroup.add(baseMesh, poleMesh, shadeMesh, lampLightSpot, lampLightSpot.target, lampLightPoint);
|
||||||
|
lampGroup.position.set(0.8, 0.7, -roomSize/2+0.5);
|
||||||
|
|
||||||
|
scene.add(lampGroup);
|
||||||
|
|
||||||
|
landingSurfaces.push(shadeMesh);
|
||||||
|
|
||||||
|
// --- 7. Old Camera (On the table) ---
|
||||||
|
const cameraBody = new THREE.BoxGeometry(0.4, 0.3, 0.15);
|
||||||
|
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;
|
||||||
|
lensMesh.rotation.x = Math.PI/2;
|
||||||
|
|
||||||
|
cameraMesh.add(lensMesh);
|
||||||
|
cameraMesh.position.set(-1.7, 0.15, 0.4);
|
||||||
|
cameraMesh.rotation.y = -Math.PI / 10;
|
||||||
|
cameraMesh.castShadow = true; cameraMesh.receiveShadow = true;
|
||||||
|
scene.add(cameraMesh);
|
||||||
|
|
||||||
|
// --- 8. 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.8, 0.025, -0.8);
|
||||||
|
pizzaBox.rotation.y = Math.PI / 5;
|
||||||
|
pizzaBox.castShadow = true; pizzaBox.receiveShadow = true;
|
||||||
|
scene.add(pizzaBox);
|
||||||
|
|
||||||
|
// --- 8. Cassette ---
|
||||||
|
const cassetteGeometry = new THREE.BoxGeometry(0.2, 0.05, 0.45);
|
||||||
|
const cassetteMaterial = new THREE.MeshPhongMaterial({ color: 0xe0c896, shininess: 5 });
|
||||||
|
const cassette = new THREE.Mesh(cassetteGeometry, cassetteMaterial);
|
||||||
|
cassette.position.set(-0.5, 0.025, -1.4);
|
||||||
|
cassette.rotation.y = Math.PI / 3;
|
||||||
|
cassette.castShadow = true; cassette.receiveShadow = true;
|
||||||
|
scene.add(cassette);
|
||||||
|
|
||||||
|
createDoor(roomSize/2, -roomSize/2 * 0.5, -Math.PI/2);
|
||||||
|
createBookshelf(-roomSize/2 + 0.2, roomSize/2*0.2, Math.PI/2, 0);
|
||||||
|
createBookshelf(-roomSize/2 + 0.2, roomSize/2*0.7, Math.PI/2, 0);
|
||||||
|
createBookshelf(roomSize/2 * 0.7, -roomSize/2+0.3, 0, 1);
|
||||||
|
|
||||||
|
setupFlies();
|
||||||
|
}
|
||||||
@ -1,124 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { state } from '../state.js';
|
|
||||||
import { getRandomColor, seededRandom } from '../utils.js';
|
|
||||||
|
|
||||||
export function createBookshelf(x, z, rotationY, uniqueSeed) {
|
|
||||||
state.seed = uniqueSeed; // Reset seed for this specific shelf instance
|
|
||||||
|
|
||||||
const shelfHeight = 2.2;
|
|
||||||
const shelfDepth = 0.35;
|
|
||||||
const shelfWidth = 1.2;
|
|
||||||
const numShelves = 6;
|
|
||||||
const woodThickness = 0.04;
|
|
||||||
const woodColor = 0x5c4033; // Darker, richer wood
|
|
||||||
|
|
||||||
const shelfGroup = new THREE.Group();
|
|
||||||
shelfGroup.position.set(x, 0, z);
|
|
||||||
shelfGroup.rotation.y = rotationY;
|
|
||||||
|
|
||||||
const woodMaterial = new THREE.MeshPhongMaterial({ color: woodColor, shininess: 30 });
|
|
||||||
|
|
||||||
// 1. Build Frame (Hollow box)
|
|
||||||
// Back Panel
|
|
||||||
const backGeo = new THREE.BoxGeometry(shelfWidth, shelfHeight, woodThickness);
|
|
||||||
const backPanel = new THREE.Mesh(backGeo, woodMaterial);
|
|
||||||
backPanel.position.set(0, shelfHeight / 2, -shelfDepth / 2 + woodThickness / 2);
|
|
||||||
backPanel.castShadow = true;
|
|
||||||
backPanel.receiveShadow = true;
|
|
||||||
shelfGroup.add(backPanel);
|
|
||||||
|
|
||||||
// Side Panels (Left & Right)
|
|
||||||
const sideGeo = new THREE.BoxGeometry(woodThickness, shelfHeight, shelfDepth);
|
|
||||||
const leftSide = new THREE.Mesh(sideGeo, woodMaterial);
|
|
||||||
leftSide.position.set(-shelfWidth / 2 + woodThickness / 2, shelfHeight / 2, 0);
|
|
||||||
leftSide.castShadow = true;
|
|
||||||
leftSide.receiveShadow = true;
|
|
||||||
shelfGroup.add(leftSide);
|
|
||||||
|
|
||||||
const rightSide = new THREE.Mesh(sideGeo, woodMaterial);
|
|
||||||
rightSide.position.set(shelfWidth / 2 - woodThickness / 2, shelfHeight / 2, 0);
|
|
||||||
rightSide.castShadow = true;
|
|
||||||
rightSide.receiveShadow = true;
|
|
||||||
shelfGroup.add(rightSide);
|
|
||||||
|
|
||||||
// Top & Bottom Panels
|
|
||||||
const topBottomGeo = new THREE.BoxGeometry(shelfWidth, woodThickness, shelfDepth);
|
|
||||||
const bottomPanel = new THREE.Mesh(topBottomGeo, woodMaterial);
|
|
||||||
bottomPanel.position.set(0, woodThickness / 2, 0);
|
|
||||||
bottomPanel.receiveShadow = true;
|
|
||||||
shelfGroup.add(bottomPanel);
|
|
||||||
|
|
||||||
const topPanel = new THREE.Mesh(topBottomGeo, woodMaterial);
|
|
||||||
topPanel.position.set(0, shelfHeight - woodThickness / 2, 0);
|
|
||||||
topPanel.castShadow = true;
|
|
||||||
shelfGroup.add(topPanel);
|
|
||||||
|
|
||||||
state.landingSurfaces.push(topPanel);
|
|
||||||
|
|
||||||
// 2. Individual Shelves & Books
|
|
||||||
const internalHeight = shelfHeight - (2 * woodThickness);
|
|
||||||
const shelfSpacing = internalHeight / numShelves;
|
|
||||||
const internalWidth = shelfWidth - (2 * woodThickness);
|
|
||||||
|
|
||||||
for (let i = 0; i < numShelves; i++) {
|
|
||||||
const currentShelfY = woodThickness + (i * shelfSpacing);
|
|
||||||
|
|
||||||
// Shelf board (skip for the very bottom one as we have a bottom panel)
|
|
||||||
if (i > 0) {
|
|
||||||
const shelfBoard = new THREE.Mesh(
|
|
||||||
new THREE.BoxGeometry(internalWidth, woodThickness, shelfDepth - woodThickness), // Slightly shallower to fit inside back panel
|
|
||||||
woodMaterial
|
|
||||||
);
|
|
||||||
shelfBoard.position.set(0, currentShelfY, woodThickness / 2); // Offset forward slightly
|
|
||||||
shelfBoard.castShadow = true;
|
|
||||||
shelfBoard.receiveShadow = true;
|
|
||||||
shelfGroup.add(shelfBoard);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Procedural Books
|
|
||||||
let currentBookX = -internalWidth / 2 + 0.01; // Start at left inside edge
|
|
||||||
const shelfSurfaceY = currentShelfY + woodThickness / 2;
|
|
||||||
|
|
||||||
while (currentBookX < internalWidth / 2 - 0.05) {
|
|
||||||
// sizes vary
|
|
||||||
const bookWidth = 0.02 + seededRandom() * 0.05;
|
|
||||||
const bookHeight = (shelfSpacing * 0.6) + seededRandom() * (shelfSpacing * 0.1);
|
|
||||||
const bookDepth = 0.15 + seededRandom() * 0.03;
|
|
||||||
|
|
||||||
if (currentBookX + bookWidth > internalWidth / 2) break;
|
|
||||||
|
|
||||||
const bookColor = getRandomColor();
|
|
||||||
const bookMat = new THREE.MeshPhongMaterial({ color: bookColor, shininess: 60 });
|
|
||||||
const bookGeo = new THREE.BoxGeometry(bookWidth, bookHeight, bookDepth);
|
|
||||||
const book = new THREE.Mesh(bookGeo, bookMat);
|
|
||||||
|
|
||||||
// Position: Resting on shelf, pushed towards the back with slight random variation
|
|
||||||
const depthVariation = seededRandom() * 0.05;
|
|
||||||
book.position.set(
|
|
||||||
currentBookX + bookWidth / 2,
|
|
||||||
shelfSurfaceY + bookHeight / 2,
|
|
||||||
-shelfDepth / 2 + woodThickness + bookDepth / 2 + depthVariation
|
|
||||||
);
|
|
||||||
|
|
||||||
book.castShadow = true;
|
|
||||||
book.receiveShadow = true;
|
|
||||||
// Store original Y position and animation data
|
|
||||||
book.userData.originalY = book.position.y;
|
|
||||||
book.userData.levitateOffset = 0;
|
|
||||||
book.userData.oscillationTime = Math.random() * Math.PI * 2; // Start at random phase
|
|
||||||
shelfGroup.add(book);
|
|
||||||
|
|
||||||
if (Math.random() > 0.8) {
|
|
||||||
state.books.push(book);
|
|
||||||
}
|
|
||||||
|
|
||||||
currentBookX += bookWidth + 0.002; // Tiny gap between books
|
|
||||||
|
|
||||||
if (seededRandom() > 0.92) {
|
|
||||||
currentBookX += bookWidth * 3; // random bigger gaps
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
state.scene.add(shelfGroup);
|
|
||||||
}
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { state } from '../state.js';
|
|
||||||
|
|
||||||
let doorGroupPanel;
|
|
||||||
let outsideMaterial; // Declare outsideMaterial globally
|
|
||||||
let glowIntensity = 0.0;
|
|
||||||
let glowDirection = 1; // 1 for increasing, -1 for decreasing
|
|
||||||
|
|
||||||
const DOOR_STATES = {
|
|
||||||
RESTING: 'resting',
|
|
||||||
OPENING: 'opening',
|
|
||||||
CLOSING: 'closing',
|
|
||||||
};
|
|
||||||
let doorState = DOOR_STATES.RESTING;
|
|
||||||
let stateTimer = 0;
|
|
||||||
|
|
||||||
export function createDoor(x, z, rotY) {
|
|
||||||
const doorWidth = 1;
|
|
||||||
|
|
||||||
const doorGroup = new THREE.Group();
|
|
||||||
doorGroup.position.set(x, 1.1, z); // Centered vertically for a 2.2m door
|
|
||||||
doorGroup.rotation.set(0, rotY, 0);
|
|
||||||
|
|
||||||
// Door Frame
|
|
||||||
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x473e3a }); // Dark wood for frame
|
|
||||||
const frameTop = new THREE.Mesh(new THREE.BoxGeometry(1.2, 0.1, 0.15), frameMaterial);
|
|
||||||
frameTop.position.set(0, 1.15, 0);
|
|
||||||
frameTop.castShadow = true;
|
|
||||||
doorGroup.add(frameTop);
|
|
||||||
|
|
||||||
const frameLeft = new THREE.Mesh(new THREE.BoxGeometry(0.1, 2.3, 0.15), frameMaterial);
|
|
||||||
frameLeft.position.set(-0.55, 0.05, 0);
|
|
||||||
frameLeft.castShadow = true;
|
|
||||||
doorGroup.add(frameLeft);
|
|
||||||
|
|
||||||
const frameRight = new THREE.Mesh(new THREE.BoxGeometry(0.1, 2.3, 0.15), frameMaterial);
|
|
||||||
frameRight.position.set(0.55, 0.05, 0);
|
|
||||||
frameRight.castShadow = true;
|
|
||||||
doorGroup.add(frameRight);
|
|
||||||
|
|
||||||
// Outside darkness
|
|
||||||
outsideMaterial = new THREE.MeshPhongMaterial({ color: 0x150505, emissive: 0x000000, shininess: 50 });
|
|
||||||
const outside = new THREE.Mesh(new THREE.BoxGeometry(doorWidth, 2.2, 0.04), outsideMaterial);
|
|
||||||
outside.position.set(0, 0, 0);
|
|
||||||
doorGroup.add(outside);
|
|
||||||
|
|
||||||
// Door group
|
|
||||||
doorGroupPanel = new THREE.Group();
|
|
||||||
// Main Door Panel
|
|
||||||
const doorMaterial = new THREE.MeshPhongMaterial({ color: 0x8b5a2b, shininess: 10 }); // Lighter wood for door
|
|
||||||
const door = new THREE.Mesh(new THREE.BoxGeometry(doorWidth, 2.2, 0.08), doorMaterial);
|
|
||||||
door.position.set(doorWidth/2, 0, 0);
|
|
||||||
door.castShadow = true;
|
|
||||||
door.receiveShadow = true;
|
|
||||||
doorGroupPanel.add(door);
|
|
||||||
|
|
||||||
// Door Knob
|
|
||||||
const knobMaterial = new THREE.MeshPhongMaterial({ color: 0xd4af37, shininess: 100 }); // Gold/Brass
|
|
||||||
const knob = new THREE.Mesh(new THREE.SphereGeometry(0.05, 16, 16), knobMaterial);
|
|
||||||
knob.position.set(doorWidth/2 + 0.4, 0, 0.06); // Position on the right side of the door
|
|
||||||
knob.castShadow = true;
|
|
||||||
doorGroupPanel.add(knob);
|
|
||||||
doorGroupPanel.position.x = -doorWidth/2;
|
|
||||||
doorGroupPanel.rotation.y = 0;
|
|
||||||
|
|
||||||
doorGroup.add(doorGroupPanel);
|
|
||||||
|
|
||||||
state.scene.add(doorGroup);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function updateDoor() {
|
|
||||||
const speed = 0.0002;
|
|
||||||
const minAngle = 0;
|
|
||||||
const maxAngle = -0.7;
|
|
||||||
|
|
||||||
stateTimer -= 1 / 60; // Assuming 60fps
|
|
||||||
|
|
||||||
if (stateTimer <= 0) {
|
|
||||||
const nextState = Math.random();
|
|
||||||
if (nextState < 0.4) {
|
|
||||||
doorState = DOOR_STATES.RESTING;
|
|
||||||
stateTimer = 2 + Math.random() * 5;
|
|
||||||
} else if (nextState < 0.7) {
|
|
||||||
doorState = DOOR_STATES.OPENING;
|
|
||||||
stateTimer = 2 + Math.random() * 4;
|
|
||||||
} else {
|
|
||||||
doorState = DOOR_STATES.CLOSING;
|
|
||||||
stateTimer = 3 + Math.random() * 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (doorState) {
|
|
||||||
case DOOR_STATES.OPENING:
|
|
||||||
if (doorGroupPanel.rotation.y > maxAngle) {
|
|
||||||
doorGroupPanel.rotation.y -= speed;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case DOOR_STATES.CLOSING:
|
|
||||||
if (doorGroupPanel.rotation.y < minAngle) {
|
|
||||||
doorGroupPanel.rotation.y += speed;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Outside material pulsating glow
|
|
||||||
if (outsideMaterial) {
|
|
||||||
const glowMin = 0.001;
|
|
||||||
const glowMax = 0.01;
|
|
||||||
const glowSpeed = 0.0001; // Speed of the pulsation
|
|
||||||
glowIntensity += glowDirection * glowSpeed;
|
|
||||||
if (glowIntensity >= glowMax) {
|
|
||||||
glowIntensity = glowMax;
|
|
||||||
glowDirection = -1;
|
|
||||||
} else if (glowIntensity <= glowMin) {
|
|
||||||
glowIntensity = glowMin;
|
|
||||||
glowDirection = 1;
|
|
||||||
}
|
|
||||||
outsideMaterial.emissive.setRGB(glowIntensity, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { state } from '../state.js';
|
|
||||||
|
|
||||||
export function createRoomWalls() {
|
|
||||||
const wallTexture = state.loader.load('/textures/wall.jpg');
|
|
||||||
wallTexture.wrapS = THREE.RepeatWrapping;
|
|
||||||
wallTexture.wrapT = THREE.RepeatWrapping;
|
|
||||||
|
|
||||||
// USING MeshPhongMaterial for specular highlights on walls
|
|
||||||
const wallMaterial = new THREE.MeshPhongMaterial({
|
|
||||||
map: wallTexture,
|
|
||||||
side: THREE.FrontSide,
|
|
||||||
shininess: 5,
|
|
||||||
specular: 0x111111 // Subtle reflection
|
|
||||||
});
|
|
||||||
|
|
||||||
// 1. Back Wall (behind the TV)
|
|
||||||
const backWall = new THREE.Mesh(new THREE.PlaneGeometry(state.roomSize, state.roomHeight), wallMaterial);
|
|
||||||
backWall.position.set(0, state.roomHeight / 2, -state.roomSize / 2);
|
|
||||||
backWall.receiveShadow = true;
|
|
||||||
state.scene.add(backWall);
|
|
||||||
|
|
||||||
// 2. Front Wall (behind the camera)
|
|
||||||
const frontWall = new THREE.Mesh(new THREE.PlaneGeometry(state.roomSize, state.roomHeight), wallMaterial);
|
|
||||||
frontWall.position.set(0, state.roomHeight / 2, state.roomSize / 2);
|
|
||||||
frontWall.rotation.y = Math.PI;
|
|
||||||
frontWall.receiveShadow = true;
|
|
||||||
state.scene.add(frontWall);
|
|
||||||
|
|
||||||
// 3. Left Wall
|
|
||||||
const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(state.roomSize, state.roomHeight), wallMaterial);
|
|
||||||
leftWall.rotation.y = Math.PI / 2;
|
|
||||||
leftWall.position.set(-state.roomSize / 2, state.roomHeight / 2, 0);
|
|
||||||
leftWall.receiveShadow = true;
|
|
||||||
state.scene.add(leftWall);
|
|
||||||
|
|
||||||
// 4. Right Wall
|
|
||||||
const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(state.roomSize, state.roomHeight), wallMaterial);
|
|
||||||
rightWall.rotation.y = -Math.PI / 2;
|
|
||||||
rightWall.position.set(state.roomSize / 2, state.roomHeight / 2, 0);
|
|
||||||
rightWall.receiveShadow = true;
|
|
||||||
state.scene.add(rightWall);
|
|
||||||
|
|
||||||
// 5. Ceiling
|
|
||||||
const ceilingGeometry = new THREE.PlaneGeometry(state.roomSize, state.roomSize);
|
|
||||||
const ceilingTexture = wallTexture;
|
|
||||||
ceilingTexture.repeat.set(4, 4);
|
|
||||||
// USING MeshPhongMaterial
|
|
||||||
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, state.roomHeight, 0);
|
|
||||||
ceiling.receiveShadow = true;
|
|
||||||
state.scene.add(ceiling);
|
|
||||||
|
|
||||||
// --- 6. Add a Window to the Back Wall ---
|
|
||||||
const windowWidth = 1.5;
|
|
||||||
const windowHeight = 1.2;
|
|
||||||
const windowGeometry = new THREE.PlaneGeometry(windowWidth, windowHeight);
|
|
||||||
|
|
||||||
const nightSkyMaterial = new THREE.MeshPhongMaterial({
|
|
||||||
color: 0x0a1a3a,
|
|
||||||
emissive: 0x0a1a3a,
|
|
||||||
emissiveIntensity: 0.5,
|
|
||||||
side: THREE.FrontSide
|
|
||||||
});
|
|
||||||
const windowPane = new THREE.Mesh(windowGeometry, nightSkyMaterial);
|
|
||||||
|
|
||||||
const windowZ = -state.roomSize / 2 + 0.001;
|
|
||||||
windowPane.position.set(-3.5, state.roomHeight * 0.5 + 1.5, windowZ);
|
|
||||||
state.scene.add(windowPane);
|
|
||||||
}
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { state } from '../state.js';
|
|
||||||
import { createRoomWalls } from './room-walls.js';
|
|
||||||
import { createBookshelf } from './bookshelf.js';
|
|
||||||
import { createDoor } from './door.js';
|
|
||||||
import { createTvSet } from './tv-set.js';
|
|
||||||
|
|
||||||
// --- Scene Modeling Function ---
|
|
||||||
export function createSceneObjects() {
|
|
||||||
// --- Materials (MeshPhongMaterial) ---
|
|
||||||
const darkMetal = new THREE.MeshPhongMaterial({
|
|
||||||
color: 0x6b6b6b,
|
|
||||||
shininess: 80,
|
|
||||||
specular: 0x888888
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- 1. Floor ---
|
|
||||||
const floorGeometry = new THREE.PlaneGeometry(20, 20);
|
|
||||||
const floorTexture = state.loader.load('/textures/floor.jpg');
|
|
||||||
floorTexture.wrapS = THREE.RepeatWrapping;
|
|
||||||
floorTexture.wrapT = THREE.RepeatWrapping;
|
|
||||||
floorTexture.repeat.set(state.roomSize, state.roomSize);
|
|
||||||
const floorMaterial = new THREE.MeshPhongMaterial({ map: floorTexture, color: 0x555555, shininess: 5 });
|
|
||||||
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
|
||||||
floor.rotation.x = -Math.PI / 2;
|
|
||||||
floor.position.y = 0;
|
|
||||||
floor.receiveShadow = true;
|
|
||||||
state.scene.add(floor);
|
|
||||||
|
|
||||||
state.landingSurfaces.push(floor);
|
|
||||||
|
|
||||||
createRoomWalls();
|
|
||||||
|
|
||||||
// 3. Lighting (Minimal and focused)
|
|
||||||
const ambientLight = new THREE.AmbientLight(0x111111, 1);
|
|
||||||
state.scene.add(ambientLight);
|
|
||||||
|
|
||||||
const roomLight = new THREE.PointLight(0xffaa55, 0.8, state.roomSize);
|
|
||||||
roomLight.position.set(0, 1.8, 0);
|
|
||||||
state.scene.add(roomLight);
|
|
||||||
|
|
||||||
|
|
||||||
createTvSet(-state.roomSize/2 + 1.2, -state.roomSize/2 + 0.8, Math.PI * 0.1);
|
|
||||||
|
|
||||||
// --- 5. Standing Lamp ---
|
|
||||||
const lampBase = new THREE.CylinderGeometry(0.05, 0.2, 0.1, 12);
|
|
||||||
const lampPole = new THREE.CylinderGeometry(0.02, 0.02, 1.5, 8);
|
|
||||||
const lampShade = new THREE.ConeGeometry(0.2, 0.4, 16);
|
|
||||||
|
|
||||||
const baseMesh = new THREE.Mesh(lampBase, darkMetal);
|
|
||||||
const poleMesh = new THREE.Mesh(lampPole, darkMetal);
|
|
||||||
const shadeMesh = new THREE.Mesh(lampShade, darkMetal);
|
|
||||||
|
|
||||||
// Ensure lamp parts cast shadows
|
|
||||||
baseMesh.castShadow = true; baseMesh.receiveShadow = true;
|
|
||||||
poleMesh.castShadow = true; poleMesh.receiveShadow = true;
|
|
||||||
//shadeMesh.castShadow = true; shadeMesh.receiveShadow = true;
|
|
||||||
|
|
||||||
baseMesh.position.y = -0.6;
|
|
||||||
poleMesh.position.y = 0.0;
|
|
||||||
shadeMesh.position.y = 0.8 + 0.1;
|
|
||||||
shadeMesh.rotation.x = Math.PI;
|
|
||||||
|
|
||||||
// Lamp Light (Warm Glow) - Configured to cast shadows
|
|
||||||
state.lampLightPoint = new THREE.PointLight(0xffaa00, state.originalLampIntensity, 4);
|
|
||||||
state.lampLightPoint.position.set(-0.01, state.roomHeight-0.9, 0.01);
|
|
||||||
state.lampLightPoint.castShadow = true;
|
|
||||||
// Optimization: Reduced map size and far plane to ease resource burden
|
|
||||||
state.lampLightPoint.shadow.mapSize.width = 512;
|
|
||||||
state.lampLightPoint.shadow.mapSize.height = 512;
|
|
||||||
state.lampLightPoint.shadow.camera.near = 0.1;
|
|
||||||
state.lampLightPoint.shadow.camera.far = 4; // Matches the light's attenuation distance (4)
|
|
||||||
state.lampLightPoint.penumbra = 0.5;
|
|
||||||
|
|
||||||
state.lampLightSpot = new THREE.SpotLight(0xffaa00, state.originalLampIntensity, 4);
|
|
||||||
state.lampLightSpot.position.set(-0.01, 1.0, 0.01);
|
|
||||||
state.lampLightSpot.target.position.set(0, 5, 0);
|
|
||||||
state.lampLightSpot.castShadow = true;
|
|
||||||
// Optimization: Reduced map size and far plane to ease resource burden
|
|
||||||
state.lampLightSpot.shadow.mapSize.width = 512;
|
|
||||||
state.lampLightSpot.shadow.mapSize.height = 512;
|
|
||||||
state.lampLightSpot.shadow.camera.near = 0.1;
|
|
||||||
state.lampLightSpot.shadow.camera.far = 4; // Matches the light's attenuation distance (4)
|
|
||||||
state.lampLightSpot.penumbra = 1;
|
|
||||||
|
|
||||||
const lampGroup = new THREE.Group();
|
|
||||||
lampGroup.add(baseMesh, poleMesh, shadeMesh, state.lampLightSpot, state.lampLightSpot.target, state.lampLightPoint);
|
|
||||||
lampGroup.position.set(0.8, 0.7, -state.roomSize/2+0.5);
|
|
||||||
|
|
||||||
state.scene.add(lampGroup);
|
|
||||||
|
|
||||||
state.landingSurfaces.push(shadeMesh);
|
|
||||||
|
|
||||||
// --- 7. Old Camera (On the table) ---
|
|
||||||
const cameraBody = new THREE.BoxGeometry(0.4, 0.3, 0.15);
|
|
||||||
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;
|
|
||||||
lensMesh.rotation.x = Math.PI/2;
|
|
||||||
|
|
||||||
cameraMesh.add(lensMesh);
|
|
||||||
cameraMesh.position.set(-1.7, 0.15, 0.4);
|
|
||||||
cameraMesh.rotation.y = -Math.PI / 10;
|
|
||||||
cameraMesh.castShadow = true; cameraMesh.receiveShadow = true;
|
|
||||||
state.scene.add(cameraMesh);
|
|
||||||
|
|
||||||
// --- 8. 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.8, 0.025, -0.8);
|
|
||||||
pizzaBox.rotation.y = Math.PI / 5;
|
|
||||||
pizzaBox.castShadow = true; pizzaBox.receiveShadow = true;
|
|
||||||
state.scene.add(pizzaBox);
|
|
||||||
|
|
||||||
// --- 8. Cassette ---
|
|
||||||
const cassetteGeometry = new THREE.BoxGeometry(0.2, 0.05, 0.45);
|
|
||||||
const cassetteMaterial = new THREE.MeshPhongMaterial({ color: 0xe0c896, shininess: 5 });
|
|
||||||
const cassette = new THREE.Mesh(cassetteGeometry, cassetteMaterial);
|
|
||||||
cassette.position.set(-0.5, 0.025, -1.4);
|
|
||||||
cassette.rotation.y = Math.PI / 3;
|
|
||||||
cassette.castShadow = true; cassette.receiveShadow = true;
|
|
||||||
state.scene.add(cassette);
|
|
||||||
|
|
||||||
createDoor(state.roomSize/2, -state.roomSize/2 * 0.5, -Math.PI/2);
|
|
||||||
createBookshelf(-state.roomSize/2 + 0.2, state.roomSize/2*0.2, Math.PI/2, 0);
|
|
||||||
createBookshelf(-state.roomSize/2 + 0.2, state.roomSize/2*0.7, Math.PI/2, 0);
|
|
||||||
createBookshelf(state.roomSize/2 * 0.7, -state.roomSize/2+0.3, 0, 1);
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,167 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { state } from '../state.js';
|
|
||||||
import { createVcr } from './vcr.js';
|
|
||||||
|
|
||||||
export function createTvSet(x, z, rotY) {
|
|
||||||
// --- Materials (MeshPhongMaterial) ---
|
|
||||||
const tvPlastic = new THREE.MeshPhongMaterial({ color: 0x4d4d4d, shininess: 30 });
|
|
||||||
|
|
||||||
const tvGroup = new THREE.Group();
|
|
||||||
|
|
||||||
// --- TV Table Dimensions & Material ---
|
|
||||||
const woodColor = 0x5a3e36; // Dark brown wood
|
|
||||||
const tableHeight = 0.7; // Height from floor to top surface
|
|
||||||
const tableWidth = 2.0;
|
|
||||||
const tableDepth = 1.0;
|
|
||||||
const legThickness = 0.05;
|
|
||||||
const shelfThickness = 0.03;
|
|
||||||
// Use standard material for realistic shadowing
|
|
||||||
const material = new THREE.MeshStandardMaterial({ color: woodColor, roughness: 0.8, metalness: 0.1 });
|
|
||||||
|
|
||||||
// VCR gap dimensions calculation
|
|
||||||
const shelfGap = 0.2; // Height of the VCR opening
|
|
||||||
const shelfY = tableHeight - shelfGap - (shelfThickness / 2); // Y position of the bottom shelf
|
|
||||||
|
|
||||||
|
|
||||||
// 2. Table Top
|
|
||||||
const topGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
|
|
||||||
const tableTop = new THREE.Mesh(topGeometry, material);
|
|
||||||
tableTop.position.set(0, tableHeight, 0);
|
|
||||||
tableTop.castShadow = true;
|
|
||||||
tableTop.receiveShadow = true;
|
|
||||||
tvGroup.add(tableTop);
|
|
||||||
|
|
||||||
// 3. VCR Shelf (Middle Shelf)
|
|
||||||
const shelfGeometry = new THREE.BoxGeometry(tableWidth, shelfThickness, tableDepth);
|
|
||||||
const vcrShelf = new THREE.Mesh(shelfGeometry, material);
|
|
||||||
vcrShelf.position.set(0, shelfY, 0);
|
|
||||||
vcrShelf.castShadow = true;
|
|
||||||
vcrShelf.receiveShadow = true;
|
|
||||||
tvGroup.add(vcrShelf);
|
|
||||||
|
|
||||||
// 4. Side Walls for VCR Compartment (NEW CODE)
|
|
||||||
const wallHeight = shelfGap; // Height is the gap itself
|
|
||||||
const wallThickness = shelfThickness; // Reuse the shelf thickness for the wall width/depth
|
|
||||||
const wallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, tableDepth);
|
|
||||||
|
|
||||||
// Calculate the Y center position for the wall
|
|
||||||
const wallYCenter = tableHeight - (shelfThickness / 2) - (wallHeight / 2);
|
|
||||||
|
|
||||||
// Calculate the X position to be flush with the table sides
|
|
||||||
const wallXPosition = (tableWidth / 2) - (wallThickness / 2);
|
|
||||||
|
|
||||||
// Left Wall
|
|
||||||
const sideWallLeft = new THREE.Mesh(wallGeometry, material);
|
|
||||||
sideWallLeft.position.set(-wallXPosition, wallYCenter, 0);
|
|
||||||
sideWallLeft.castShadow = true;
|
|
||||||
sideWallLeft.receiveShadow = true;
|
|
||||||
tvGroup.add(sideWallLeft);
|
|
||||||
|
|
||||||
// Right Wall
|
|
||||||
const sideWallRight = new THREE.Mesh(wallGeometry, material);
|
|
||||||
sideWallRight.position.set(wallXPosition, wallYCenter, 0);
|
|
||||||
sideWallRight.castShadow = true;
|
|
||||||
sideWallRight.receiveShadow = true;
|
|
||||||
tvGroup.add(sideWallRight);
|
|
||||||
|
|
||||||
// 5. Legs
|
|
||||||
const legHeight = shelfY; // Legs go from the floor (y=0) to the shelf (y=shelfY)
|
|
||||||
const legGeometry = new THREE.BoxGeometry(legThickness, legHeight, legThickness);
|
|
||||||
|
|
||||||
// Utility function to create and position a leg
|
|
||||||
const createLeg = (x, z) => {
|
|
||||||
const leg = new THREE.Mesh(legGeometry, material);
|
|
||||||
// Position the leg so the center is at half its height
|
|
||||||
leg.position.set(x, legHeight / 2, z);
|
|
||||||
leg.castShadow = true;
|
|
||||||
leg.receiveShadow = true;
|
|
||||||
return leg;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Calculate offsets for positioning the legs near the corners
|
|
||||||
const offset = (tableWidth / 2) - (legThickness * 2);
|
|
||||||
const depthOffset = (tableDepth / 2) - (legThickness * 2);
|
|
||||||
|
|
||||||
// Front Left
|
|
||||||
tvGroup.add(createLeg(-offset, depthOffset));
|
|
||||||
// Front Right
|
|
||||||
tvGroup.add(createLeg(offset, depthOffset));
|
|
||||||
// Back Left
|
|
||||||
tvGroup.add(createLeg(-offset, -depthOffset));
|
|
||||||
// Back Right
|
|
||||||
tvGroup.add(createLeg(offset, -depthOffset));
|
|
||||||
|
|
||||||
// --- 2. The TV box ---
|
|
||||||
const cabinetGeometry = new THREE.BoxGeometry(1.75, 1.5, 1.0);
|
|
||||||
const cabinet = new THREE.Mesh(cabinetGeometry, tvPlastic);
|
|
||||||
cabinet.position.y = 1.51;
|
|
||||||
cabinet.castShadow = true;
|
|
||||||
cabinet.receiveShadow = true;
|
|
||||||
tvGroup.add(cabinet);
|
|
||||||
|
|
||||||
// --- 3. Screen Frame ---
|
|
||||||
const frameGeometry = new THREE.BoxGeometry(1.5, 1.3, 0.1);
|
|
||||||
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 20 });
|
|
||||||
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
|
|
||||||
frame.position.set(0, 1.5, 0.68);
|
|
||||||
frame.castShadow = true;
|
|
||||||
frame.receiveShadow = true;
|
|
||||||
tvGroup.add(frame);
|
|
||||||
|
|
||||||
// --- 4. Curved Screen (CRT Effect) ---
|
|
||||||
const screenRadius = 3.0; // Radius for the subtle curve
|
|
||||||
const screenWidth = 1.4;
|
|
||||||
const screenHeight = 1.2;
|
|
||||||
const thetaLength = screenWidth / screenRadius; // Calculate angle needed for the arc
|
|
||||||
|
|
||||||
// Use CylinderGeometry as a segment
|
|
||||||
const screenGeometry = new THREE.CylinderGeometry(
|
|
||||||
screenRadius, screenRadius,
|
|
||||||
screenHeight, // Cylinder height is the vertical dimension of the screen
|
|
||||||
32,
|
|
||||||
1,
|
|
||||||
true,
|
|
||||||
(Math.PI / 2) - (thetaLength / 2), // Start angle to center the arc
|
|
||||||
thetaLength // Arc length (width)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Rotate the cylinder segment:
|
|
||||||
// 1. Rotate around X-axis by 90 degrees to lay the height (Y) along Z (depth).
|
|
||||||
//screenGeometry.rotateX(Math.PI / 2);
|
|
||||||
// 2. Rotate around Y-axis by 90 degrees to align the segment's arc across the X-axis (width).
|
|
||||||
screenGeometry.rotateY(-Math.PI/2);
|
|
||||||
|
|
||||||
const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
|
|
||||||
state.tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
|
|
||||||
|
|
||||||
// Position the curved screen
|
|
||||||
state.tvScreen.position.set(0.0, 1.5, -2.1);
|
|
||||||
state.tvScreen.material = new THREE.MeshPhongMaterial({
|
|
||||||
color: 0x0a0a0a, // Deep black
|
|
||||||
shininess: 5,
|
|
||||||
specular: 0x111111
|
|
||||||
});
|
|
||||||
state.tvScreen.material.needsUpdate = true;
|
|
||||||
tvGroup.add(state.tvScreen);
|
|
||||||
|
|
||||||
tvGroup.position.set(x, 0, z);
|
|
||||||
tvGroup.rotation.y = rotY;
|
|
||||||
|
|
||||||
// Light from the screen (initially low intensity, will increase when video loads)
|
|
||||||
state.screenLight = new THREE.PointLight(0xffffff, 0, 10);
|
|
||||||
state.screenLight.position.set(0, 1.5, 1.0);
|
|
||||||
// Screen light casts shadows
|
|
||||||
state.screenLight.castShadow = true;
|
|
||||||
state.screenLight.shadow.mapSize.width = 1024;
|
|
||||||
state.screenLight.shadow.mapSize.height = 1024;
|
|
||||||
state.screenLight.shadow.camera.near = 0.2;
|
|
||||||
state.screenLight.shadow.camera.far = 5;
|
|
||||||
tvGroup.add(state.screenLight);
|
|
||||||
|
|
||||||
// -- VCR --
|
|
||||||
const vcr = createVcr();
|
|
||||||
vcr.position.set(-0.3, 0.6, 0.05);
|
|
||||||
tvGroup.add(vcr);
|
|
||||||
|
|
||||||
state.scene.add(tvGroup);
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { createVcrDisplay } from './vcr-display.js';
|
|
||||||
|
|
||||||
export function createVcr() {
|
|
||||||
// Materials
|
|
||||||
const vcrBodyMaterial = new THREE.MeshPhongMaterial({
|
|
||||||
color: 0x222222, // Dark metallic gray
|
|
||||||
shininess: 70,
|
|
||||||
specular: 0x444444
|
|
||||||
});
|
|
||||||
const slotMaterial = new THREE.MeshPhongMaterial({
|
|
||||||
color: 0x0a0a0a, // Deep black
|
|
||||||
shininess: 5,
|
|
||||||
specular: 0x111111
|
|
||||||
});
|
|
||||||
|
|
||||||
// VCR Body
|
|
||||||
const vcrBodyGeometry = new THREE.BoxGeometry(1.0, 0.2, 0.7);
|
|
||||||
const vcrBody = new THREE.Mesh(vcrBodyGeometry, vcrBodyMaterial);
|
|
||||||
vcrBody.position.y = 0; // Centered
|
|
||||||
vcrBody.castShadow = true;
|
|
||||||
vcrBody.receiveShadow = true;
|
|
||||||
|
|
||||||
// Cassette Slot / Front Face
|
|
||||||
const slotGeometry = new THREE.BoxGeometry(0.9, 0.05, 0.01);
|
|
||||||
const slotMesh = new THREE.Mesh(slotGeometry, slotMaterial);
|
|
||||||
slotMesh.position.set(0, -0.05, 0.35 + 0.005);
|
|
||||||
slotMesh.castShadow = true;
|
|
||||||
slotMesh.receiveShadow = true;
|
|
||||||
|
|
||||||
// VCR Display
|
|
||||||
const displayMesh = createVcrDisplay();
|
|
||||||
displayMesh.position.z = 0.35 + 0.005;
|
|
||||||
displayMesh.position.x = 0.2; // Adjusted X for arrow
|
|
||||||
displayMesh.position.y = 0.03;
|
|
||||||
|
|
||||||
// VCR Group
|
|
||||||
const vcrGroup = new THREE.Group();
|
|
||||||
vcrGroup.add(vcrBody, slotMesh, displayMesh);
|
|
||||||
vcrGroup.position.set(0, 0.1, 0); // Position the whole VCR slightly above the floor
|
|
||||||
|
|
||||||
// Light from the VCR display itself
|
|
||||||
const vcrDisplayLight = new THREE.PointLight(0x00ff44, 0.03, 1.8);
|
|
||||||
vcrDisplayLight.position.set(0.23, 0.03, 0.35 + 0.03);
|
|
||||||
vcrDisplayLight.castShadow = true;
|
|
||||||
vcrDisplayLight.shadow.mapSize.width = 256;
|
|
||||||
vcrDisplayLight.shadow.mapSize.height = 256;
|
|
||||||
vcrGroup.add(vcrDisplayLight);
|
|
||||||
|
|
||||||
return vcrGroup;
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
|
|
||||||
export let state = undefined;
|
|
||||||
|
|
||||||
export function initState() {
|
|
||||||
state = {
|
|
||||||
// Core Three.js components
|
|
||||||
scene: null,
|
|
||||||
camera: null,
|
|
||||||
renderer: null,
|
|
||||||
tvScreen: null,
|
|
||||||
videoTexture: null,
|
|
||||||
screenLight: null,
|
|
||||||
lampLightPoint: null,
|
|
||||||
lampLightSpot: null,
|
|
||||||
effectsManager: null,
|
|
||||||
|
|
||||||
// VCR Display
|
|
||||||
lastUpdateTime: -1,
|
|
||||||
baseTime: 0,
|
|
||||||
blinkState: false,
|
|
||||||
lastBlinkToggleTime: 0,
|
|
||||||
vcrDisplayTexture: null,
|
|
||||||
|
|
||||||
// Video Playback
|
|
||||||
isVideoLoaded: false,
|
|
||||||
videoUrls: [],
|
|
||||||
currentVideoIndex: -1,
|
|
||||||
|
|
||||||
// Scene constants
|
|
||||||
originalLampIntensity: 0.3,
|
|
||||||
originalScreenIntensity: 0.2,
|
|
||||||
screenIntensityPulse: 0.2,
|
|
||||||
roomSize: 5,
|
|
||||||
roomHeight: 3,
|
|
||||||
debugLight: false,
|
|
||||||
|
|
||||||
// DOM Elements
|
|
||||||
container: document.body,
|
|
||||||
videoElement: document.getElementById('video'),
|
|
||||||
fileInput: document.getElementById('fileInput'),
|
|
||||||
loadTapeButton: document.getElementById('loadTapeButton'),
|
|
||||||
|
|
||||||
// Utilities
|
|
||||||
loader: new THREE.TextureLoader(),
|
|
||||||
landingSurfaces: [],
|
|
||||||
bookLevitation: {
|
|
||||||
state: 'resting', // 'resting', 'levitating', 'returning'
|
|
||||||
timer: 0,
|
|
||||||
},
|
|
||||||
books: [], // Array to hold all individual book meshes for animation
|
|
||||||
raycaster: new THREE.Raycaster(),
|
|
||||||
seed: 12345,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,8 +1,5 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { state } from './state.js';
|
|
||||||
|
|
||||||
// --- Utility: Random Color (seeded) ---
|
// --- Utility: Random Color (seeded) ---
|
||||||
export function getRandomColor() {
|
function getRandomColor() {
|
||||||
const hue = seededRandom();
|
const hue = seededRandom();
|
||||||
const saturation = 0.6 + seededRandom() * 0.4;
|
const saturation = 0.6 + seededRandom() * 0.4;
|
||||||
const lightness = 0.3 + seededRandom() * 0.4;
|
const lightness = 0.3 + seededRandom() * 0.4;
|
||||||
@ -14,20 +11,20 @@ export function getRandomColor() {
|
|||||||
* @param {number} degrees
|
* @param {number} degrees
|
||||||
* @returns {number}
|
* @returns {number}
|
||||||
*/
|
*/
|
||||||
export function degToRad(degrees) {
|
function degToRad(degrees) {
|
||||||
return degrees * (Math.PI / 180);
|
return degrees * (Math.PI / 180);
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Seedable Random Number Generator (Mulberry32) ---
|
// --- Seedable Random Number Generator (Mulberry32) ---
|
||||||
export function seededRandom() {
|
function seededRandom() {
|
||||||
let t = state.seed += 0x6D2B79F5;
|
let t = seed += 0x6D2B79F5;
|
||||||
t = Math.imul(t ^ t >>> 15, t | 1);
|
t = Math.imul(t ^ t >>> 15, t | 1);
|
||||||
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
|
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
|
||||||
return ((t ^ t >>> 14) >>> 0) / 4294967296;
|
return ((t ^ t >>> 14) >>> 0) / 4294967296;
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Helper function to format seconds into MM:SS ---
|
// --- Helper function to format seconds into MM:SS ---
|
||||||
export function formatTime(seconds) {
|
function formatTime(seconds) {
|
||||||
if (isNaN(seconds) || seconds === Infinity || seconds < 0) return '--:--';
|
if (isNaN(seconds) || seconds === Infinity || seconds < 0) return '--:--';
|
||||||
const minutes = Math.floor(seconds / 60);
|
const minutes = Math.floor(seconds / 60);
|
||||||
const remainingSeconds = Math.floor(seconds % 60);
|
const remainingSeconds = Math.floor(seconds % 60);
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import * as THREE from 'three';
|
let vcrDisplayTexture;
|
||||||
import { state } from '../state.js';
|
let blinkState = false;
|
||||||
import { formatTime } from '../utils.js';
|
let lastBlinkToggleTime = 0;
|
||||||
|
|
||||||
// --- Segment Display Definitions ---
|
// --- Segment Display Definitions ---
|
||||||
|
|
||||||
// Define which segments (indexed 0-6: A, B, C, D, E, F, G) are active for each digit
|
// Define which segments (indexed 0-6: A, B, C, D, E, F, G) are active for each digit
|
||||||
@ -152,7 +151,7 @@ function drawSegmentDisplay(ctx, timeString) {
|
|||||||
const currentY = SEG_PADDING;
|
const currentY = SEG_PADDING;
|
||||||
|
|
||||||
// Draw Playback Arrow
|
// Draw Playback Arrow
|
||||||
if (state.isVideoLoaded && state.videoElement.readyState >= 3) {
|
if (isVideoLoaded && videoElement.readyState >= 3) {
|
||||||
drawPlaybackArrow(ctx, currentX, currentY, digitHeight);
|
drawPlaybackArrow(ctx, currentX, currentY, digitHeight);
|
||||||
}
|
}
|
||||||
currentX += arrowWidth + arrowPadding; // Move X after arrow and its padding
|
currentX += arrowWidth + arrowPadding; // Move X after arrow and its padding
|
||||||
@ -161,7 +160,7 @@ function drawSegmentDisplay(ctx, timeString) {
|
|||||||
const char = timeString[i];
|
const char = timeString[i];
|
||||||
|
|
||||||
if (char === ':') {
|
if (char === ':') {
|
||||||
drawColon(ctx, currentX, currentY, digitHeight, state.blinkState); // Pass blinkState
|
drawColon(ctx, currentX, currentY, digitHeight, blinkState); // Pass blinkState
|
||||||
currentX += colonWidth;
|
currentX += colonWidth;
|
||||||
} else if (char >= '0' && char <= '9') {
|
} else if (char >= '0' && char <= '9') {
|
||||||
drawSegmentDigit(ctx, char, currentX, currentY, digitHeight);
|
drawSegmentDigit(ctx, char, currentX, currentY, digitHeight);
|
||||||
@ -176,7 +175,7 @@ function drawSegmentDisplay(ctx, timeString) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// --- VCR Display Functions ---
|
// --- VCR Display Functions ---
|
||||||
export function createVcrDisplay() {
|
function createVcrDisplay() {
|
||||||
const canvas = document.createElement('canvas');
|
const canvas = document.createElement('canvas');
|
||||||
canvas.width = 160; // Increased width for arrow and better spacing
|
canvas.width = 160; // Increased width for arrow and better spacing
|
||||||
canvas.height = 32;
|
canvas.height = 32;
|
||||||
@ -185,28 +184,27 @@ export function createVcrDisplay() {
|
|||||||
ctx.fillStyle = '#0a0a0a';
|
ctx.fillStyle = '#0a0a0a';
|
||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
state.vcrDisplayTexture = new THREE.CanvasTexture(canvas);
|
vcrDisplayTexture = new THREE.CanvasTexture(canvas);
|
||||||
state.vcrDisplayTexture.needsUpdate = true;
|
vcrDisplayTexture.needsUpdate = true;
|
||||||
|
|
||||||
const displayGeometry = new THREE.PlaneGeometry(0.45, 0.1); // Adjust geometry width for new canvas size
|
const displayGeometry = new THREE.PlaneGeometry(0.45, 0.1); // Adjust geometry width for new canvas size
|
||||||
const displayMaterial = new THREE.MeshPhongMaterial({
|
const displayMaterial = new THREE.MeshBasicMaterial({
|
||||||
map: state.vcrDisplayTexture,
|
map: vcrDisplayTexture,
|
||||||
side: THREE.FrontSide,
|
side: THREE.FrontSide,
|
||||||
color: 0xffffff,
|
color: 0xffffff,
|
||||||
transparent: true,
|
transparent: true,
|
||||||
emissive: 0x00ff44,
|
emissive: 0x00ff44,
|
||||||
emissiveIntensity: 0.05,
|
emissiveIntensity: 0.1
|
||||||
shininess: 0
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const displayMesh = new THREE.Mesh(displayGeometry, displayMaterial);
|
const displayMesh = new THREE.Mesh(displayGeometry, displayMaterial);
|
||||||
return displayMesh;
|
return displayMesh;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function updateVcrDisplay(time) {
|
function updateVcrDisplay(time) {
|
||||||
if (!state.vcrDisplayTexture) return;
|
if (!vcrDisplayTexture) return;
|
||||||
|
|
||||||
const canvas = state.vcrDisplayTexture.image;
|
const canvas = vcrDisplayTexture.image;
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
const timeString = formatTime(time);
|
const timeString = formatTime(time);
|
||||||
@ -214,5 +212,5 @@ export function updateVcrDisplay(time) {
|
|||||||
// Uses the new segment drawing function with ghosting, including blinkState for colon
|
// Uses the new segment drawing function with ghosting, including blinkState for colon
|
||||||
drawSegmentDisplay(ctx, timeString);
|
drawSegmentDisplay(ctx, timeString);
|
||||||
|
|
||||||
state.vcrDisplayTexture.needsUpdate = true;
|
vcrDisplayTexture.needsUpdate = true;
|
||||||
}
|
}
|
||||||
112
tv-player/src/video-player.js
Normal file
112
tv-player/src/video-player.js
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
// --- Play video by index ---
|
||||||
|
function playVideoByIndex(index) {
|
||||||
|
currentVideoIndex = index;
|
||||||
|
const url = videoUrls[index];
|
||||||
|
|
||||||
|
// Dispose of previous texture to free resources
|
||||||
|
if (videoTexture) {
|
||||||
|
videoTexture.dispose();
|
||||||
|
videoTexture = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index < 0 || index >= videoUrls.length) {
|
||||||
|
console.info('End of playlist reached. Reload tapes to start again.');
|
||||||
|
screenLight.intensity = 0.0;
|
||||||
|
tvScreen.material.dispose();
|
||||||
|
tvScreen.material = new THREE.MeshPhongMaterial({
|
||||||
|
color: 0x0a0a0a, // Deep black
|
||||||
|
shininess: 5,
|
||||||
|
specular: 0x111111
|
||||||
|
});
|
||||||
|
tvScreen.material.needsUpdate = true;
|
||||||
|
isVideoLoaded = false;
|
||||||
|
lastUpdateTime = -1; // force VCR to redraw
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
videoElement.src = url;
|
||||||
|
videoElement.muted = true;
|
||||||
|
videoElement.load();
|
||||||
|
|
||||||
|
// Set loop property: only loop if it's the only video loaded
|
||||||
|
videoElement.loop = false; //videoUrls.length === 1;
|
||||||
|
|
||||||
|
|
||||||
|
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;
|
||||||
|
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
|
||||||
|
videoElement.play().then(() => {
|
||||||
|
isVideoLoaded = true;
|
||||||
|
// Use the defined base intensity for screen glow
|
||||||
|
screenLight.intensity = originalScreenIntensity;
|
||||||
|
// Initial status message with tape count
|
||||||
|
console.info(`Playing tape ${currentVideoIndex + 1} of ${videoUrls.length}.`);
|
||||||
|
}).catch(error => {
|
||||||
|
screenLight.intensity = originalScreenIntensity * 0.5; // Dim the light if playback fails
|
||||||
|
console.error(`Playback blocked for tape ${currentVideoIndex + 1}. Click Next Tape to try again.`);
|
||||||
|
console.error('Playback Error: Could not start video playback.', error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
videoElement.onerror = (e) => {
|
||||||
|
screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
|
||||||
|
console.error(`Error loading tape ${currentVideoIndex + 1}.`);
|
||||||
|
console.error('Video Load Error:', e);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Cycle to the next video ---
|
||||||
|
function playNextVideo() {
|
||||||
|
// Determine the next index, cycling back to 0 if we reach the end
|
||||||
|
let nextIndex = currentVideoIndex + 1;
|
||||||
|
if (nextIndex < videoUrls.length) {
|
||||||
|
baseTime += videoElement.duration;
|
||||||
|
}
|
||||||
|
playVideoByIndex(nextIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// --- Video Loading Logic (handles multiple files) ---
|
||||||
|
function loadVideoFile(event) {
|
||||||
|
const files = event.target.files;
|
||||||
|
if (files.length === 0) {
|
||||||
|
console.info('File selection cancelled.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Clear previous URLs and revoke object URLs to prevent memory leaks
|
||||||
|
videoUrls.forEach(url => URL.revokeObjectURL(url));
|
||||||
|
videoUrls = [];
|
||||||
|
|
||||||
|
// 2. Populate the new videoUrls array
|
||||||
|
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) {
|
||||||
|
console.info('No valid video files selected.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Start playback of the first video
|
||||||
|
console.info(`Loaded ${videoUrls.length} tapes. Starting playback...`);
|
||||||
|
loadTapeButton.classList.add("hidden");
|
||||||
|
|
||||||
|
const startDelay = 5;
|
||||||
|
console.info(`Video will start in ${startDelay} seconds.`);
|
||||||
|
setTimeout(() => { playVideoByIndex(0); }, startDelay * 1000);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user