Restructure. Fix vendor script versions.
This commit is contained in:
Dejvino
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Retro TV Video Player (3D)</title>
|
||||
<!-- Load Tailwind CSS for styling --><script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Load Three.js for 3D rendering --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Dark room aesthetic */
|
||||
body {
|
||||
background-color: #0d0d10;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 3D Canvas will be injected here by Three.js --><script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer;
|
||||
|
||||
const container = document.body;
|
||||
|
||||
// --- Initialization ---
|
||||
function init() {
|
||||
// 1. Scene Setup (Dark, Ambient)
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x000000);
|
||||
|
||||
// 2. Camera Setup
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.5, 4);
|
||||
|
||||
// 3. Renderer Setup
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
// Enable shadows on the renderer
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// 4. Lighting (Minimal and focused)
|
||||
const ambientLight = new THREE.AmbientLight(0x444444);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// 5. Build the entire scene
|
||||
createSceneObjects();
|
||||
|
||||
// 6. Event Listeners
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
// Start the animation loop
|
||||
animate();
|
||||
}
|
||||
|
||||
// --- Scene Modeling Function (omitted for brevity, assume content is stable) ---
|
||||
function createSceneObjects() {
|
||||
// 1. Floor
|
||||
const floorGeometry = new THREE.PlaneGeometry(20, 20);
|
||||
const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a, shininess: 5 });
|
||||
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
||||
floor.rotation.x = -Math.PI / 2;
|
||||
floor.position.y = 0;
|
||||
floor.receiveShadow = true;
|
||||
scene.add(floor);
|
||||
}
|
||||
|
||||
// --- Animation Loop ---
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// 1. Camera movement (omitted for brevity)
|
||||
const globalTime = Date.now() * 0.00005;
|
||||
const lookAtTime = Date.now() * 0.00003;
|
||||
const camAmplitude = 0.6; const lookAmplitude = 0.05;
|
||||
const baseX = 0; const baseY = 1.5; const baseZ = 4;
|
||||
const baseTargetX = 0; const baseTargetY = 1.7; const baseTargetZ = 0.96;
|
||||
const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
|
||||
const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.4;
|
||||
camera.position.x = baseX + camOffsetX;
|
||||
camera.position.y = baseY + camOffsetY;
|
||||
camera.position.z = baseZ;
|
||||
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
|
||||
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
|
||||
camera.lookAt(baseTargetX + lookOffsetX, baseTargetY + lookOffsetY, baseTargetZ);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// --- Window Resize Handler ---
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
// Start everything on window load
|
||||
window.onload = init;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,423 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fully Furnished Bookshelf Room (3D)</title>
|
||||
<!-- Load Tailwind CSS for styling --><script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Load Three.js for 3D rendering --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Light room aesthetic */
|
||||
body {
|
||||
background-color: #f0f0f5; /* Light grey background */
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 3D Canvas will be injected here by Three.js --><script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer;
|
||||
let fanPropeller; // Reference for the rotating fan blades
|
||||
|
||||
// --- Seedable Random Number Generator (Mulberry32) ---
|
||||
let seed = 12345; // Default seed, will be overridden per shelf
|
||||
function seededRandom() {
|
||||
let t = seed += 0x6D2B79F5;
|
||||
t = Math.imul(t ^ t >>> 15, t | 1);
|
||||
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
|
||||
return ((t ^ t >>> 14) >>> 0) / 4294967296;
|
||||
}
|
||||
|
||||
const container = document.body;
|
||||
|
||||
// --- Initialization ---
|
||||
function init() {
|
||||
// 1. Scene Setup (White Room)
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0xf0f0f0);
|
||||
|
||||
// 2. Camera Setup
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.7, 5);
|
||||
|
||||
// 3. Renderer Setup
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// 4. Lighting
|
||||
const ambientLight = new THREE.AmbientLight(0xaaaaaa, 0.8);
|
||||
scene.add(ambientLight);
|
||||
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
|
||||
directionalLight.position.set(10, 15, 10);
|
||||
directionalLight.castShadow = true;
|
||||
directionalLight.shadow.mapSize.width = 2048; // Increased shadow map for sharper book shadows
|
||||
directionalLight.shadow.mapSize.height = 2048;
|
||||
scene.add(directionalLight);
|
||||
|
||||
// 5. Build scene
|
||||
createSceneObjects();
|
||||
|
||||
// 6. Events
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
animate();
|
||||
}
|
||||
|
||||
// --- Utility: Random Color (seeded) ---
|
||||
function getRandomColor() {
|
||||
const hue = seededRandom();
|
||||
const saturation = 0.6 + seededRandom() * 0.4;
|
||||
const lightness = 0.3 + seededRandom() * 0.4;
|
||||
return new THREE.Color().setHSL(hue, saturation, lightness).getHex();
|
||||
}
|
||||
|
||||
// --- REVISED Procedural Bookshelf Generator ---
|
||||
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);
|
||||
|
||||
// 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) {
|
||||
const bookWidth = 0.02 + seededRandom() * 0.05; // 2cm to 7cm wide
|
||||
const bookHeight = (shelfSpacing * 0.6) + seededRandom() * (shelfSpacing * 0.3); // Vary height within shelf limits
|
||||
const bookDepth = 0.15 + seededRandom() * 0.1; // Vary depth
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
scene.add(shelfGroup);
|
||||
}
|
||||
|
||||
function createDoor(x, z) {
|
||||
const doorGroup = new THREE.Group();
|
||||
doorGroup.position.set(x, 1.1, z); // Centered vertically for a 2.2m door
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
function createDeskAndChair(x, z, rotationY) {
|
||||
const group = new THREE.Group();
|
||||
const woodMaterial = new THREE.MeshPhongMaterial({ color: 0x8b4513, shininess: 20 });
|
||||
const metalMaterial = new THREE.MeshPhongMaterial({ color: 0x777777, shininess: 50 });
|
||||
const fabricMaterial = new THREE.MeshPhongMaterial({ color: 0x2c3e50, shininess: 10 });
|
||||
|
||||
// Desk
|
||||
const deskTop = new THREE.Mesh(new THREE.BoxGeometry(1.5, 0.05, 0.6), woodMaterial);
|
||||
deskTop.position.set(0, 0.75, 0);
|
||||
deskTop.castShadow = true;
|
||||
group.add(deskTop);
|
||||
|
||||
const legGeo = new THREE.BoxGeometry(0.05, 0.75, 0.05);
|
||||
const leg1 = new THREE.Mesh(legGeo, metalMaterial); leg1.position.set(0.7, 0.375, 0.25); leg1.castShadow = true; group.add(leg1);
|
||||
const leg2 = new THREE.Mesh(legGeo, metalMaterial); leg2.position.set(-0.7, 0.375, 0.25); leg2.castShadow = true; group.add(leg2);
|
||||
|
||||
// Chair
|
||||
const chairSeat = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.05, 0.5), fabricMaterial);
|
||||
chairSeat.position.set(0, 0.45, 1.0); chairSeat.castShadow = true; group.add(chairSeat);
|
||||
const chairBack = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.5, 0.05), fabricMaterial);
|
||||
chairBack.position.set(0, 0.7, 0.75); chairBack.castShadow = true; group.add(chairBack);
|
||||
|
||||
const cLegGeo = new THREE.CylinderGeometry(0.02, 0.02, 0.45, 8);
|
||||
const cLeg1 = new THREE.Mesh(cLegGeo, metalMaterial); cLeg1.position.set(0.2, 0.225, 1.2); cLeg1.castShadow = true; group.add(cLeg1);
|
||||
const cLeg2 = new THREE.Mesh(cLegGeo, metalMaterial); cLeg2.position.set(-0.2, 0.225, 1.2); cLeg2.castShadow = true; group.add(cLeg2);
|
||||
|
||||
group.position.set(x, 0, z);
|
||||
group.rotation.y = rotationY;
|
||||
scene.add(group);
|
||||
}
|
||||
|
||||
function createWallDecor() {
|
||||
// 1. Purple Image on Left Wall
|
||||
const imagePlane = new THREE.Mesh(new THREE.PlaneGeometry(1.0, 0.7), new THREE.MeshPhongMaterial({ color: 0x9c27b0 }));
|
||||
imagePlane.rotation.y = Math.PI / 2;
|
||||
imagePlane.position.set(-4.95, 2.0, -3.0);
|
||||
scene.add(imagePlane);
|
||||
|
||||
const frame = new THREE.Mesh(new THREE.BoxGeometry(1.05, 0.75, 0.05), new THREE.MeshPhongMaterial({ color: 0x444444 }));
|
||||
frame.rotation.y = Math.PI / 2;
|
||||
frame.position.set(-4.98, 2.0, -3.0);
|
||||
scene.add(frame);
|
||||
|
||||
// 2. Calendar (Generated via Canvas Texture)
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 512;
|
||||
canvas.height = 768;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Paper background
|
||||
ctx.fillStyle = '#fdfdfd';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Red Header
|
||||
ctx.fillStyle = '#d32f2f';
|
||||
ctx.fillRect(0, 0, canvas.width, 150);
|
||||
|
||||
// Month Text
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.font = 'bold 80px Inter, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText('JANUARY', canvas.width / 2, 75);
|
||||
|
||||
// YEAR
|
||||
ctx.fillStyle = '#222222';
|
||||
ctx.font = 'bold 160px Inter, sans-serif';
|
||||
ctx.fillText('1987', canvas.width / 2, 280);
|
||||
|
||||
// Grid (simple representation of days)
|
||||
ctx.strokeStyle = '#999999';
|
||||
ctx.lineWidth = 4;
|
||||
const startY = 400;
|
||||
const endY = 720;
|
||||
const startX = 40;
|
||||
const endX = 472;
|
||||
const rows = 5;
|
||||
const cols = 7;
|
||||
|
||||
// Horizontal lines
|
||||
for (let i = 0; i <= rows; i++) {
|
||||
const y = startY + (i * (endY - startY) / rows);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(startX, y);
|
||||
ctx.lineTo(endX, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
// Vertical lines
|
||||
for (let i = 0; i <= cols; i++) {
|
||||
const x = startX + (i * (endX - startX) / cols);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, startY);
|
||||
ctx.lineTo(x, endY);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
const calendarTexture = new THREE.CanvasTexture(canvas);
|
||||
// Use MeshBasicMaterial so it's bright and legible regardless of lighting angles,
|
||||
// or MeshPhongMaterial with low shininess for a matte paper look.
|
||||
const calendarMat = new THREE.MeshPhongMaterial({
|
||||
map: calendarTexture,
|
||||
shininess: 5,
|
||||
color: 0xffffff // Ensure white tint doesn't darken texture
|
||||
});
|
||||
|
||||
const calendarGeo = new THREE.PlaneGeometry(1.5, 2.25); // Large size
|
||||
const calendar = new THREE.Mesh(calendarGeo, calendarMat);
|
||||
calendar.rotation.y = Math.PI / 2;
|
||||
// Positioned on the left wall, further forward so it's visible
|
||||
calendar.position.set(-4.95, 2.5, 2.0);
|
||||
scene.add(calendar);
|
||||
}
|
||||
|
||||
function createCeilingFan() {
|
||||
const fanGroup = new THREE.Group();
|
||||
const pole = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.02, 0.5, 8), new THREE.MeshPhongMaterial({ color: 0xaaaaaa }));
|
||||
pole.position.set(0, 4.75, 0); fanGroup.add(pole);
|
||||
|
||||
fanPropeller = new THREE.Group();
|
||||
const bladeGeo = new THREE.BoxGeometry(0.8, 0.02, 0.15);
|
||||
const bladeMat = new THREE.MeshPhongMaterial({ color: 0x555555 });
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const blade = new THREE.Mesh(bladeGeo, bladeMat);
|
||||
blade.position.set(0.4, 0, 0); blade.castShadow = true;
|
||||
const pivot = new THREE.Group(); pivot.add(blade); pivot.rotation.y = (i * Math.PI * 2) / 3;
|
||||
fanPropeller.add(pivot);
|
||||
}
|
||||
fanPropeller.position.set(0, 4.5, 0); fanGroup.add(fanPropeller);
|
||||
scene.add(fanGroup);
|
||||
}
|
||||
|
||||
// --- Main Scene ---
|
||||
function createSceneObjects() {
|
||||
// Room shell
|
||||
const wallMat = new THREE.MeshPhongMaterial({ color: 0xfcfcfc, side: THREE.DoubleSide });
|
||||
const floorMat = new THREE.MeshPhongMaterial({ color: 0xe0e0e0 });
|
||||
|
||||
const floor = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), floorMat);
|
||||
floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; scene.add(floor);
|
||||
|
||||
const backWall = new THREE.Mesh(new THREE.PlaneGeometry(10, 5), wallMat);
|
||||
backWall.position.set(0, 2.5, -5); backWall.receiveShadow = true; scene.add(backWall);
|
||||
|
||||
const rightWall = new THREE.Mesh(new THREE.PlaneGeometry(10, 5), wallMat);
|
||||
rightWall.rotation.y = -Math.PI / 2; rightWall.position.set(5, 2.5, 0); rightWall.receiveShadow = true; scene.add(rightWall);
|
||||
|
||||
const leftWall = new THREE.Mesh(new THREE.PlaneGeometry(10, 5), wallMat);
|
||||
leftWall.rotation.y = Math.PI / 2; leftWall.position.set(-5, 2.5, 0); leftWall.receiveShadow = true; scene.add(leftWall);
|
||||
|
||||
const ceiling = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), wallMat);
|
||||
ceiling.rotation.x = Math.PI / 2; ceiling.position.set(0, 5, 0); scene.add(ceiling);
|
||||
|
||||
// Placed Objects
|
||||
// Back Wall: Door on the left, shelves shifted right
|
||||
createDoor(-3.0, -4.95); // New door position
|
||||
|
||||
// Adjusted shelf positions to make room for the door
|
||||
createBookshelf(-1.2, -4.8, 0, 101);
|
||||
createBookshelf(0.6, -4.8, 0, 102);
|
||||
createBookshelf(2.4, -4.8, 0, 103);
|
||||
|
||||
// Right wall shelves (Seeds: 201, 202, 203)
|
||||
createBookshelf(4.8, -2.0, -Math.PI / 2, 201);
|
||||
createBookshelf(4.8, 0, -Math.PI / 2, 202);
|
||||
createBookshelf(4.8, 2.0, -Math.PI / 2, 203);
|
||||
|
||||
createDeskAndChair(-3.0, 2.5, -Math.PI * 0.15);
|
||||
createWallDecor();
|
||||
createCeilingFan();
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
if (fanPropeller) fanPropeller.rotation.y += 0.05;
|
||||
|
||||
// Camera sway
|
||||
const time = Date.now() * 0.0005;
|
||||
camera.position.x = Math.sin(time * 0.3) * 0.2;
|
||||
camera.position.y = 1.7 + Math.cos(time * 0.2) * 0.1;
|
||||
camera.lookAt(0, 1.7, 0);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
window.onload = init;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gloomy Room Shadow Scene</title>
|
||||
<!-- Load Tailwind CSS for utility styling -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Load Three.js library -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Custom styles for the 3D canvas */
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #0d0d10; /* Very dark background */
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="info" class="absolute top-4 left-1/2 transform -translate-x-1/2 p-2 bg-gray-900 bg-opacity-70 text-white rounded-lg shadow-xl text-xs sm:text-sm z-10">
|
||||
Bugs scattering in a gloomy, shadow-casting room. (Use mouse to look around)
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer;
|
||||
let ambientLight, lampLight, lampMesh;
|
||||
let pointer = new THREE.Vector2();
|
||||
let targetRotation = { x: 0, y: 0 };
|
||||
const BUGS_COUNT = 30;
|
||||
const bugs = [];
|
||||
const floorHeight = 0;
|
||||
|
||||
// --- Configuration ---
|
||||
const ROOM_SIZE = 15;
|
||||
const LAMP_HEIGHT = 4;
|
||||
const BUG_SPEED = 0.005;
|
||||
const DAMPING_FACTOR = 0.05;
|
||||
|
||||
// --- Utility Functions ---
|
||||
|
||||
/**
|
||||
* Converts degrees to radians.
|
||||
* @param {number} degrees
|
||||
* @returns {number}
|
||||
*/
|
||||
function degToRad(degrees) {
|
||||
return degrees * (Math.PI / 180);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the Three.js scene, camera, and renderer.
|
||||
*/
|
||||
function init() {
|
||||
// 1. Scene Setup
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x101015);
|
||||
|
||||
// 2. Renderer Setup (Enable Shadows)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// 3. Camera Setup (First-person perspective near the floor)
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.5, 5); // Stand a bit above the floor, facing into the room
|
||||
camera.lookAt(0, 1.5, 0);
|
||||
|
||||
// 4. Lighting Setup
|
||||
setupLighting();
|
||||
|
||||
// 5. Environment Setup
|
||||
setupRoom();
|
||||
setupTable();
|
||||
|
||||
// 6. Bugs Setup
|
||||
setupBugs();
|
||||
|
||||
// 7. Event Listeners
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
|
||||
console.log("Three.js Scene Initialized.");
|
||||
animate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the lighting: Ambient and the central PointLight (lamp).
|
||||
*/
|
||||
function setupLighting() {
|
||||
// Very dim ambient light for general visibility
|
||||
ambientLight = new THREE.AmbientLight(0x444444, 0.5);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Point Light (The Lamp)
|
||||
const lampColor = 0xffe9a0; // Warm, dim color
|
||||
const lampIntensity = 1.8;
|
||||
const lampDistance = 15;
|
||||
|
||||
lampLight = new THREE.PointLight(lampColor, lampIntensity, lampDistance);
|
||||
lampLight.position.set(0, LAMP_HEIGHT, 0);
|
||||
|
||||
// Enable shadow casting for the lamp
|
||||
lampLight.castShadow = true;
|
||||
|
||||
// Configure shadow camera properties for better shadow quality
|
||||
lampLight.shadow.mapSize.width = 1024;
|
||||
lampLight.shadow.mapSize.height = 1024;
|
||||
lampLight.shadow.camera.near = 0.5;
|
||||
lampLight.shadow.camera.far = 10;
|
||||
lampLight.shadow.bias = -0.0001; // Tiny bias to prevent shadow artifacts
|
||||
|
||||
scene.add(lampLight);
|
||||
|
||||
// Visual mesh for the light source (the bulb)
|
||||
const bulbGeometry = new THREE.SphereGeometry(0.1, 8, 8);
|
||||
const bulbMaterial = new THREE.MeshBasicMaterial({ color: lampColor });
|
||||
lampMesh = new THREE.Mesh(bulbGeometry, bulbMaterial);
|
||||
lampMesh.position.copy(lampLight.position);
|
||||
scene.add(lampMesh);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the room (walls and floor).
|
||||
*/
|
||||
function setupRoom() {
|
||||
const wallMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x333333,
|
||||
side: THREE.BackSide, // Render walls from the inside
|
||||
shininess: 5,
|
||||
});
|
||||
|
||||
// Floor
|
||||
const floorGeometry = new THREE.PlaneGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2);
|
||||
const floorMesh = new THREE.Mesh(floorGeometry, wallMaterial);
|
||||
floorMesh.rotation.x = degToRad(-90);
|
||||
floorMesh.position.y = floorHeight;
|
||||
floorMesh.receiveShadow = true;
|
||||
scene.add(floorMesh);
|
||||
|
||||
// Walls (Simple box around the camera position)
|
||||
const wallGeometry = new THREE.BoxGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2, ROOM_SIZE * 2);
|
||||
const wallsMesh = new THREE.Mesh(wallGeometry, wallMaterial);
|
||||
wallsMesh.position.y = ROOM_SIZE; // Center the box vertically
|
||||
wallsMesh.receiveShadow = true;
|
||||
scene.add(wallsMesh);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a simple table object for more complex shadows.
|
||||
*/
|
||||
function setupTable() {
|
||||
const tableMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x5a3d2b, // Dark wood color
|
||||
shininess: 10,
|
||||
});
|
||||
|
||||
// Table top
|
||||
const tableTop = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(3, 0.1, 1.5),
|
||||
tableMaterial
|
||||
);
|
||||
tableTop.position.set(2, 1.5 + 0.05, 0);
|
||||
tableTop.castShadow = true;
|
||||
tableTop.receiveShadow = true;
|
||||
scene.add(tableTop);
|
||||
|
||||
// Table legs (using a loop for simplicity)
|
||||
const legGeometry = new THREE.BoxGeometry(0.1, 1.5, 0.1);
|
||||
const positions = [
|
||||
[3.4, 0.75, 0.65], [-0.4, 0.75, 0.65],
|
||||
[3.4, 0.75, -0.65], [-0.4, 0.75, -0.65]
|
||||
];
|
||||
|
||||
positions.forEach(pos => {
|
||||
const leg = new THREE.Mesh(legGeometry, tableMaterial);
|
||||
leg.position.set(pos[0], pos[1], pos[2]);
|
||||
leg.castShadow = true;
|
||||
leg.receiveShadow = true;
|
||||
scene.add(leg);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and places the 'bugs' meshes.
|
||||
*/
|
||||
function setupBugs() {
|
||||
const bugGeometry = new THREE.BoxGeometry(0.1, 0.05, 0.15); // Simple block bug
|
||||
const bugMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x0a0a0a, // Almost black
|
||||
shininess: 20,
|
||||
});
|
||||
|
||||
for (let i = 0; i < BUGS_COUNT; i++) {
|
||||
const bug = new THREE.Mesh(bugGeometry, bugMaterial);
|
||||
|
||||
// Random position within the room limits
|
||||
bug.position.x = (Math.random() - 0.5) * (ROOM_SIZE - 2);
|
||||
bug.position.z = (Math.random() - 0.5) * (ROOM_SIZE - 2);
|
||||
bug.position.y = floorHeight + 0.025; // Resting on the floor
|
||||
|
||||
// Random initial rotation
|
||||
bug.rotation.y = Math.random() * Math.PI * 2;
|
||||
|
||||
// Enable shadow casting
|
||||
bug.castShadow = true;
|
||||
bug.receiveShadow = true;
|
||||
|
||||
// Add velocity/state data to the bug object
|
||||
bug.velocity = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * BUG_SPEED,
|
||||
0,
|
||||
(Math.random() - 0.5) * BUG_SPEED
|
||||
);
|
||||
|
||||
scene.add(bug);
|
||||
bugs.push(bug);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Main animation loop.
|
||||
*/
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Update bug positions and rotation
|
||||
bugs.forEach(bug => {
|
||||
// Apply current velocity
|
||||
bug.position.add(bug.velocity);
|
||||
|
||||
// Simple collision detection with room boundaries (bounce back)
|
||||
const limit = ROOM_SIZE / 2 - 0.2;
|
||||
if (bug.position.x > limit || bug.position.x < -limit) {
|
||||
bug.velocity.x *= -1;
|
||||
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
}
|
||||
if (bug.position.z > limit || bug.position.z < -limit) {
|
||||
bug.velocity.z *= -1;
|
||||
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
}
|
||||
|
||||
// Small random change in direction for erratic movement (like a real bug)
|
||||
bug.velocity.x += (Math.random() - 0.5) * 0.0005;
|
||||
bug.velocity.z += (Math.random() - 0.5) * 0.0005;
|
||||
|
||||
// Clamp velocity to prevent running too fast
|
||||
bug.velocity.clampLength(0, BUG_SPEED * 1.5);
|
||||
|
||||
// Smooth rotation towards the direction of travel
|
||||
const targetYRotation = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
bug.rotation.y += (targetYRotation - bug.rotation.y) * 0.1;
|
||||
});
|
||||
|
||||
// Camera Look Around (Dampened rotation)
|
||||
camera.rotation.y += (targetRotation.y - camera.rotation.y) * DAMPING_FACTOR;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// --- Event Handlers ---
|
||||
|
||||
/**
|
||||
* Handles window resize to maintain aspect ratio and prevent distortion.
|
||||
*/
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles mouse movement to control the camera's rotation (look around).
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
function onMouseMove(event) {
|
||||
// Calculate normalized device coordinates (-1 to +1)
|
||||
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
|
||||
|
||||
// Simple map of mouse position to target rotation angles
|
||||
targetRotation.y = -pointer.x * degToRad(30);
|
||||
// targetRotation.x = -pointer.y * degToRad(10); // Disabled X rotation for a simpler floor-view
|
||||
}
|
||||
|
||||
// Wait for the window to load before initializing the 3D scene
|
||||
window.onload = function() {
|
||||
try {
|
||||
init();
|
||||
} catch (e) {
|
||||
console.error("Three.js initialization failed:", e);
|
||||
document.body.innerHTML = `
|
||||
<div class="flex items-center justify-center h-screen bg-gray-900 text-white">
|
||||
<p class="text-xl p-4 bg-red-700 rounded-lg">Error loading 3D scene. Console has more details.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,381 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gloomy Room Shadow Scene</title>
|
||||
<!-- Load Tailwind CSS for utility styling -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Load Three.js library -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Custom styles for the 3D canvas */
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #0d0d10; /* Very dark background */
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="info" class="absolute top-4 left-1/2 transform -translate-x-1/2 p-2 bg-gray-900 bg-opacity-70 text-white rounded-lg shadow-xl text-xs sm:text-sm z-10">
|
||||
Spiders scattering in a gloomy, shadow-casting room. (Use mouse to look around)
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer;
|
||||
let ambientLight, lampLight, lampMesh;
|
||||
let pointer = new THREE.Vector2();
|
||||
let targetRotation = { x: 0, y: 0 };
|
||||
const BUGS_COUNT = 30;
|
||||
const bugs = [];
|
||||
const floorHeight = 0;
|
||||
|
||||
// --- Configuration ---
|
||||
const ROOM_SIZE = 15;
|
||||
const LAMP_HEIGHT = 4;
|
||||
const BUG_SPEED = 0.007; // Slightly faster for the larger bugs
|
||||
const DAMPING_FACTOR = 0.05;
|
||||
|
||||
// --- Utility Functions ---
|
||||
|
||||
/**
|
||||
* Converts degrees to radians.
|
||||
* @param {number} degrees
|
||||
* @returns {number}
|
||||
*/
|
||||
function degToRad(degrees) {
|
||||
return degrees * (Math.PI / 180);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the Three.js scene, camera, and renderer.
|
||||
*/
|
||||
function init() {
|
||||
// 1. Scene Setup
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x101015);
|
||||
|
||||
// 2. Renderer Setup (Enable Shadows)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// 3. Camera Setup (First-person perspective near the floor)
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.5, 5); // Stand a bit above the floor, facing into the room
|
||||
camera.lookAt(0, 1.5, 0);
|
||||
|
||||
// 4. Lighting Setup
|
||||
setupLighting();
|
||||
|
||||
// 5. Environment Setup
|
||||
setupRoom();
|
||||
setupTable();
|
||||
|
||||
// 6. Bugs Setup
|
||||
setupBugs();
|
||||
|
||||
// 7. Event Listeners
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
|
||||
console.log("Three.js Scene Initialized.");
|
||||
animate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the lighting: Ambient and the central PointLight (lamp).
|
||||
*/
|
||||
function setupLighting() {
|
||||
// Very dim ambient light for general visibility
|
||||
ambientLight = new THREE.AmbientLight(0x444444, 0.5);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Point Light (The Lamp)
|
||||
const lampColor = 0xffe9a0; // Warm, dim color
|
||||
const lampIntensity = 1.8;
|
||||
const lampDistance = 15;
|
||||
|
||||
lampLight = new THREE.PointLight(lampColor, lampIntensity, lampDistance);
|
||||
lampLight.position.set(0, LAMP_HEIGHT, 0);
|
||||
|
||||
// Enable shadow casting for the lamp
|
||||
lampLight.castShadow = true;
|
||||
|
||||
// Configure shadow camera properties for better shadow quality
|
||||
lampLight.shadow.mapSize.width = 1024;
|
||||
lampLight.shadow.mapSize.height = 1024;
|
||||
lampLight.shadow.camera.near = 0.5;
|
||||
lampLight.shadow.camera.far = 10;
|
||||
lampLight.shadow.bias = -0.0001; // Tiny bias to prevent shadow artifacts
|
||||
|
||||
scene.add(lampLight);
|
||||
|
||||
// Visual mesh for the light source (the bulb)
|
||||
const bulbGeometry = new THREE.SphereGeometry(0.1, 8, 8);
|
||||
const bulbMaterial = new THREE.MeshBasicMaterial({ color: lampColor });
|
||||
lampMesh = new THREE.Mesh(bulbGeometry, bulbMaterial);
|
||||
lampMesh.position.copy(lampLight.position);
|
||||
scene.add(lampMesh);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the room (walls and floor).
|
||||
*/
|
||||
function setupRoom() {
|
||||
const wallMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x333333,
|
||||
side: THREE.BackSide, // Render walls from the inside
|
||||
shininess: 5,
|
||||
});
|
||||
|
||||
// Floor
|
||||
const floorGeometry = new THREE.PlaneGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2);
|
||||
const floorMesh = new THREE.Mesh(floorGeometry, wallMaterial);
|
||||
floorMesh.rotation.x = degToRad(-90);
|
||||
floorMesh.position.y = floorHeight;
|
||||
floorMesh.receiveShadow = true;
|
||||
scene.add(floorMesh);
|
||||
|
||||
// Walls (Simple box around the camera position)
|
||||
const wallGeometry = new THREE.BoxGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2, ROOM_SIZE * 2);
|
||||
const wallsMesh = new THREE.Mesh(wallGeometry, wallMaterial);
|
||||
wallsMesh.position.y = ROOM_SIZE; // Center the box vertically
|
||||
wallsMesh.receiveShadow = true;
|
||||
scene.add(wallsMesh);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a simple table object for more complex shadows.
|
||||
*/
|
||||
function setupTable() {
|
||||
const tableMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x5a3d2b, // Dark wood color
|
||||
shininess: 10,
|
||||
});
|
||||
|
||||
// Table top
|
||||
const tableTop = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(3, 0.1, 1.5),
|
||||
tableMaterial
|
||||
);
|
||||
tableTop.position.set(2, 1.5 + 0.05, 0);
|
||||
tableTop.castShadow = true;
|
||||
tableTop.receiveShadow = true;
|
||||
scene.add(tableTop);
|
||||
|
||||
// Table legs (using a loop for simplicity)
|
||||
const legGeometry = new THREE.BoxGeometry(0.1, 1.5, 0.1);
|
||||
const positions = [
|
||||
[3.4, 0.75, 0.65], [-0.4, 0.75, 0.65],
|
||||
[3.4, 0.75, -0.65], [-0.4, 0.75, -0.65]
|
||||
];
|
||||
|
||||
positions.forEach(pos => {
|
||||
const leg = new THREE.Mesh(legGeometry, tableMaterial);
|
||||
leg.position.set(pos[0], pos[1], pos[2]);
|
||||
leg.castShadow = true;
|
||||
leg.receiveShadow = true;
|
||||
scene.add(leg);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a single, more detailed spider mesh (sphere body and 8 legs).
|
||||
* @returns {THREE.Group}
|
||||
*/
|
||||
function createBugMesh() {
|
||||
const bugGroup = new THREE.Group();
|
||||
|
||||
// Material for all parts
|
||||
const bugMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x0a0a0a, // Almost black
|
||||
shininess: 30,
|
||||
});
|
||||
|
||||
// --- 1. Body (Sphere) ---
|
||||
const bodyRadius = 0.15;
|
||||
const bodyGeometry = new THREE.SphereGeometry(bodyRadius, 16, 16);
|
||||
const body = new THREE.Mesh(bodyGeometry, bugMaterial);
|
||||
// Center the sphere body vertically (half its height)
|
||||
body.position.y = bodyRadius;
|
||||
|
||||
body.castShadow = true;
|
||||
body.receiveShadow = true;
|
||||
bugGroup.add(body);
|
||||
|
||||
// --- 2. Legs (8 thin cylinders) ---
|
||||
const legLength = 0.3; // Made longer for spider look
|
||||
const legWidth = 0.005;
|
||||
const legGeometry = new THREE.CylinderGeometry(legWidth, legWidth, legLength, 4);
|
||||
const numLegs = 8;
|
||||
// Slightly offset starting angle so legs aren't perfectly aligned with world axes
|
||||
const legAngleStart = degToRad(45 / 2);
|
||||
|
||||
// Radial distance from the center (0, 0) where the legs pivot on the sphere's base
|
||||
const legRadialPivot = 0.08;
|
||||
const legTiltDown = degToRad(15); // Tilt angle for a natural spider stance
|
||||
|
||||
for (let i = 0; i < numLegs; i++) {
|
||||
const leg = new THREE.Mesh(legGeometry, bugMaterial);
|
||||
|
||||
// Calculate the angle for this leg
|
||||
const angle = legAngleStart + (i * degToRad(360 / numLegs));
|
||||
|
||||
// 1. Calculate the pivot point on the sphere's base surface (X/Z plane)
|
||||
const pivotX = legRadialPivot * Math.sin(angle);
|
||||
const pivotZ = legRadialPivot * Math.cos(angle);
|
||||
|
||||
// 2. Set the initial position to the attachment point near the base of the sphere
|
||||
leg.position.set(pivotX, bodyRadius - 0.03, pivotZ);
|
||||
|
||||
// 3. Offset the leg center so the end point (pivot point) rests at the calculated position
|
||||
const halfLength = legLength / 2;
|
||||
|
||||
// Move the center of the leg (halfLength distance) along its rotation angle
|
||||
leg.position.x += halfLength * Math.sin(angle);
|
||||
leg.position.z += halfLength * Math.cos(angle);
|
||||
|
||||
// --- Rotation Calculation ---
|
||||
// Rotation 1: Align the vertical cylinder horizontally
|
||||
leg.rotation.x = degToRad(90);
|
||||
|
||||
// Rotation 2: Orient the leg outward (around Y axis)
|
||||
leg.rotation.y = angle;
|
||||
|
||||
// Rotation 3: Tilt the leg downwards on its local axis (Z) for a crawling look
|
||||
if (i % 2 === 0) {
|
||||
leg.rotation.z = legTiltDown; // Inward tilt
|
||||
} else {
|
||||
leg.rotation.z = -legTiltDown; // Outward tilt
|
||||
}
|
||||
|
||||
leg.castShadow = true;
|
||||
leg.receiveShadow = true;
|
||||
bugGroup.add(leg);
|
||||
}
|
||||
|
||||
bugGroup.position.y = floorHeight; // Group origin is on the floor
|
||||
return bugGroup;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and places the 'bugs' meshes.
|
||||
*/
|
||||
function setupBugs() {
|
||||
for (let i = 0; i < BUGS_COUNT; i++) {
|
||||
// Use the new detailed bug mesh
|
||||
const bug = createBugMesh();
|
||||
|
||||
// Random position within the room limits
|
||||
bug.position.x = (Math.random() - 0.5) * (ROOM_SIZE - 2);
|
||||
bug.position.z = (Math.random() - 0.5) * (ROOM_SIZE - 2);
|
||||
|
||||
// Random initial rotation
|
||||
bug.rotation.y = Math.random() * Math.PI * 2;
|
||||
|
||||
// Add velocity/state data to the bug object
|
||||
bug.velocity = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * BUG_SPEED,
|
||||
0,
|
||||
(Math.random() - 0.5) * BUG_SPEED
|
||||
);
|
||||
|
||||
scene.add(bug);
|
||||
bugs.push(bug);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Main animation loop.
|
||||
*/
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Update bug positions and rotation
|
||||
bugs.forEach(bug => {
|
||||
// Apply current velocity
|
||||
bug.position.add(bug.velocity);
|
||||
|
||||
// Simple collision detection with room boundaries (bounce back)
|
||||
const limit = ROOM_SIZE / 2 - 0.2;
|
||||
if (bug.position.x > limit || bug.position.x < -limit) {
|
||||
bug.velocity.x *= -1;
|
||||
// Adjust bug rotation to face the new direction
|
||||
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
}
|
||||
if (bug.position.z > limit || bug.position.z < -limit) {
|
||||
bug.velocity.z *= -1;
|
||||
// Adjust bug rotation to face the new direction
|
||||
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
}
|
||||
|
||||
// Small random change in direction for erratic movement (like a real bug)
|
||||
bug.velocity.x += (Math.random() - 0.5) * 0.0005;
|
||||
bug.velocity.z += (Math.random() - 0.5) * 0.0005;
|
||||
|
||||
// Clamp velocity to prevent running too fast
|
||||
bug.velocity.clampLength(0, BUG_SPEED * 1.5);
|
||||
|
||||
// Smooth rotation towards the direction of travel
|
||||
const targetYRotation = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
bug.rotation.y += (targetYRotation - bug.rotation.y) * 0.1;
|
||||
});
|
||||
|
||||
// Camera Look Around (Dampened rotation)
|
||||
camera.rotation.y += (targetRotation.y - camera.rotation.y) * DAMPING_FACTOR;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// --- Event Handlers ---
|
||||
|
||||
/**
|
||||
* Handles window resize to maintain aspect ratio and prevent distortion.
|
||||
*/
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles mouse movement to control the camera's rotation (look around).
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
function onMouseMove(event) {
|
||||
// Calculate normalized device coordinates (-1 to +1)
|
||||
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
|
||||
|
||||
// Simple map of mouse position to target rotation angles
|
||||
targetRotation.y = -pointer.x * degToRad(30);
|
||||
// targetRotation.x = -pointer.y * degToRad(10); // Disabled X rotation for a simpler floor-view
|
||||
}
|
||||
|
||||
// Wait for the window to load before initializing the 3D scene
|
||||
window.onload = function() {
|
||||
try {
|
||||
init();
|
||||
} catch (e) {
|
||||
console.error("Three.js initialization failed:", e);
|
||||
document.body.innerHTML = `
|
||||
<div class="flex items-center justify-center h-screen bg-gray-900 text-white">
|
||||
<p class="text-xl p-4 bg-red-700 rounded-lg">Error loading 3D scene. Console has more details.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,538 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gloomy Room Shadow Scene</title>
|
||||
<!-- Load Tailwind CSS for utility styling -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Load Three.js library -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Custom styles for the 3D canvas */
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #0d0d10; /* Very dark background */
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="info" class="absolute top-4 left-1/2 transform -translate-x-1/2 p-2 bg-gray-900 bg-opacity-70 text-white rounded-lg shadow-xl text-xs sm:text-sm z-10">
|
||||
Spiders and flies scattering in a gloomy, shadow-casting room. (Use mouse to look around)
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer;
|
||||
let ambientLight, lampLight, lampMesh;
|
||||
let pointer = new THREE.Vector2();
|
||||
let targetRotation = { x: 0, y: 0 };
|
||||
const BUGS_COUNT = 30; // Spiders
|
||||
const FLIES_COUNT = 20; // Flies
|
||||
const bugs = [];
|
||||
const flies = [];
|
||||
const floorHeight = 0;
|
||||
let landingSurfaces = []; // Array to hold floor and table for fly landings
|
||||
const raycaster = new THREE.Raycaster();
|
||||
|
||||
|
||||
// --- Configuration ---
|
||||
const ROOM_SIZE = 15;
|
||||
const LAMP_HEIGHT = 4;
|
||||
const BUG_SPEED = 0.007;
|
||||
const FLIGHT_HEIGHT_MIN = 1.0; // Min height for flying
|
||||
const FLIGHT_HEIGHT_MAX = 3.0; // Max height for flying
|
||||
const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
|
||||
const DAMPING_FACTOR = 0.05;
|
||||
|
||||
// --- Utility Functions ---
|
||||
|
||||
/**
|
||||
* Converts degrees to radians.
|
||||
* @param {number} degrees
|
||||
* @returns {number}
|
||||
*/
|
||||
function degToRad(degrees) {
|
||||
return degrees * (Math.PI / 180);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the Three.js scene, camera, and renderer.
|
||||
*/
|
||||
function init() {
|
||||
// 1. Scene Setup
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x101015);
|
||||
|
||||
// 2. Renderer Setup (Enable Shadows)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// 3. Camera Setup (First-person perspective near the floor)
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.5, 5); // Stand a bit above the floor, facing into the room
|
||||
camera.lookAt(0, 1.5, 0);
|
||||
|
||||
// 4. Lighting Setup
|
||||
setupLighting();
|
||||
|
||||
// 5. Environment Setup (Sets up landingSurfaces array)
|
||||
setupRoom();
|
||||
setupTable();
|
||||
|
||||
// 6. Creatures Setup
|
||||
setupBugs(); // Spiders
|
||||
setupFlies(); // Flies
|
||||
|
||||
// 7. Event Listeners
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
|
||||
console.log("Three.js Scene Initialized.");
|
||||
animate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the lighting: Ambient and the central PointLight (lamp).
|
||||
*/
|
||||
function setupLighting() {
|
||||
// Very dim ambient light for general visibility
|
||||
ambientLight = new THREE.AmbientLight(0x444444, 0.5);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Point Light (The Lamp)
|
||||
const lampColor = 0xffe9a0; // Warm, dim color
|
||||
const lampIntensity = 1.8;
|
||||
const lampDistance = 15;
|
||||
|
||||
lampLight = new THREE.PointLight(lampColor, lampIntensity, lampDistance);
|
||||
lampLight.position.set(0, LAMP_HEIGHT, 0);
|
||||
|
||||
// Enable shadow casting for the lamp
|
||||
lampLight.castShadow = true;
|
||||
|
||||
// Configure shadow camera properties for better shadow quality
|
||||
lampLight.shadow.mapSize.width = 1024;
|
||||
lampLight.shadow.mapSize.height = 1024;
|
||||
lampLight.shadow.camera.near = 0.5;
|
||||
lampLight.shadow.camera.far = 10;
|
||||
lampLight.shadow.bias = -0.0001; // Tiny bias to prevent shadow artifacts
|
||||
|
||||
scene.add(lampLight);
|
||||
|
||||
// Visual mesh for the light source (the bulb)
|
||||
const bulbGeometry = new THREE.SphereGeometry(0.1, 8, 8);
|
||||
const bulbMaterial = new THREE.MeshBasicMaterial({ color: lampColor });
|
||||
lampMesh = new THREE.Mesh(bulbGeometry, bulbMaterial);
|
||||
lampMesh.position.copy(lampLight.position);
|
||||
scene.add(lampMesh);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the room (walls and floor).
|
||||
*/
|
||||
function setupRoom() {
|
||||
const wallMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x333333,
|
||||
side: THREE.BackSide, // Render walls from the inside
|
||||
shininess: 5,
|
||||
});
|
||||
|
||||
// Floor
|
||||
const floorGeometry = new THREE.PlaneGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2);
|
||||
const floorMesh = new THREE.Mesh(floorGeometry, wallMaterial);
|
||||
floorMesh.rotation.x = degToRad(-90);
|
||||
floorMesh.position.y = floorHeight;
|
||||
floorMesh.receiveShadow = true;
|
||||
floorMesh.name = 'landingSurface'; // Tag for fly landing
|
||||
scene.add(floorMesh);
|
||||
landingSurfaces.push(floorMesh); // Add to list of landing spots
|
||||
|
||||
// Walls (Simple box around the camera position)
|
||||
const wallGeometry = new THREE.BoxGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2, ROOM_SIZE * 2);
|
||||
const wallsMesh = new THREE.Mesh(wallGeometry, wallMaterial);
|
||||
wallsMesh.position.y = ROOM_SIZE; // Center the box vertically
|
||||
wallsMesh.receiveShadow = true;
|
||||
scene.add(wallsMesh);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a simple table object for more complex shadows.
|
||||
*/
|
||||
function setupTable() {
|
||||
const tableMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x5a3d2b, // Dark wood color
|
||||
shininess: 10,
|
||||
});
|
||||
|
||||
// Table top
|
||||
const tableTop = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(3, 0.1, 1.5),
|
||||
tableMaterial
|
||||
);
|
||||
tableTop.position.set(2, 1.5 + 0.05, 0);
|
||||
tableTop.castShadow = true;
|
||||
tableTop.receiveShadow = true;
|
||||
tableTop.name = 'landingSurface'; // Tag for fly landing
|
||||
scene.add(tableTop);
|
||||
landingSurfaces.push(tableTop); // Add to list of landing spots
|
||||
|
||||
// Table legs (using a loop for simplicity)
|
||||
const legGeometry = new THREE.BoxGeometry(0.1, 1.5, 0.1);
|
||||
const positions = [
|
||||
[3.4, 0.75, 0.65], [-0.4, 0.75, 0.65],
|
||||
[3.4, 0.75, -0.65], [-0.4, 0.75, -0.65]
|
||||
];
|
||||
|
||||
positions.forEach(pos => {
|
||||
const leg = new THREE.Mesh(legGeometry, tableMaterial);
|
||||
leg.position.set(pos[0], pos[1], pos[2]);
|
||||
leg.castShadow = true;
|
||||
leg.receiveShadow = true;
|
||||
scene.add(leg);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a single, more detailed spider mesh (sphere body and 8 legs).
|
||||
* @returns {THREE.Group}
|
||||
*/
|
||||
function createBugMesh() {
|
||||
const bugGroup = new THREE.Group();
|
||||
|
||||
// Material for all parts
|
||||
const bugMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x0a0a0a, // Almost black
|
||||
shininess: 30,
|
||||
});
|
||||
|
||||
// --- 1. Body (Sphere) ---
|
||||
const bodyRadius = 0.15;
|
||||
const bodyGeometry = new THREE.SphereGeometry(bodyRadius, 16, 16);
|
||||
const body = new THREE.Mesh(bodyGeometry, bugMaterial);
|
||||
body.position.y = bodyRadius;
|
||||
|
||||
body.castShadow = true;
|
||||
body.receiveShadow = true;
|
||||
bugGroup.add(body);
|
||||
|
||||
// --- 2. Legs (8 thin cylinders) ---
|
||||
const legLength = 0.3;
|
||||
const legWidth = 0.005;
|
||||
const legGeometry = new THREE.CylinderGeometry(legWidth, legWidth, legLength, 4);
|
||||
const numLegs = 8;
|
||||
const legAngleStart = degToRad(45 / 2);
|
||||
const legRadialPivot = 0.08;
|
||||
const legTiltDown = degToRad(15);
|
||||
|
||||
for (let i = 0; i < numLegs; i++) {
|
||||
const leg = new THREE.Mesh(legGeometry, bugMaterial);
|
||||
const angle = legAngleStart + (i * degToRad(360 / numLegs));
|
||||
const pivotX = legRadialPivot * Math.sin(angle);
|
||||
const pivotZ = legRadialPivot * Math.cos(angle);
|
||||
leg.position.set(pivotX, bodyRadius - 0.03, pivotZ);
|
||||
const halfLength = legLength / 2;
|
||||
leg.position.x += halfLength * Math.sin(angle);
|
||||
leg.position.z += halfLength * Math.cos(angle);
|
||||
|
||||
leg.rotation.x = degToRad(90);
|
||||
leg.rotation.y = angle;
|
||||
leg.rotation.z = (i % 2 === 0) ? legTiltDown : -legTiltDown;
|
||||
|
||||
leg.castShadow = true;
|
||||
leg.receiveShadow = true;
|
||||
bugGroup.add(leg);
|
||||
}
|
||||
|
||||
bugGroup.position.y = floorHeight;
|
||||
return bugGroup;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.05, 0.1, 4);
|
||||
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)
|
||||
curve: null,
|
||||
landCheckTimer: 0,
|
||||
oscillationTime: Math.random() * 100, // For smooth y-axis buzzing
|
||||
};
|
||||
|
||||
// Initial random position
|
||||
flyGroup.position.set(
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4),
|
||||
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4)
|
||||
);
|
||||
|
||||
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 'bugs' (spiders) meshes.
|
||||
*/
|
||||
function setupBugs() {
|
||||
for (let i = 0; i < BUGS_COUNT; i++) {
|
||||
const bug = createBugMesh();
|
||||
bug.position.x = (Math.random() - 0.5) * (ROOM_SIZE - 2);
|
||||
bug.position.z = (Math.random() - 0.5) * (ROOM_SIZE - 2);
|
||||
bug.rotation.y = Math.random() * Math.PI * 2;
|
||||
bug.velocity = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * BUG_SPEED,
|
||||
0,
|
||||
(Math.random() - 0.5) * BUG_SPEED
|
||||
);
|
||||
scene.add(bug);
|
||||
bugs.push(bug);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
const boundaryLimit = ROOM_SIZE / 2 - 0.1;
|
||||
|
||||
flies.forEach(fly => {
|
||||
const data = fly.userData;
|
||||
|
||||
if (data.state === 'flying') {
|
||||
|
||||
if (!data.curve) {
|
||||
// Initialize the first curve
|
||||
const newTargetPos = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4),
|
||||
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4)
|
||||
);
|
||||
createFlyCurve(fly, newTargetPos);
|
||||
}
|
||||
|
||||
// Advance curve progression
|
||||
data.t += FLY_FLIGHT_SPEED_FACTOR;
|
||||
|
||||
// Check for landing readiness during the flight path
|
||||
data.landCheckTimer--;
|
||||
|
||||
if (data.t >= 1) {
|
||||
// Path finished
|
||||
|
||||
// 1. Check for landing decision
|
||||
if (data.landCheckTimer <= 0 && Math.random() < 0.8) {
|
||||
|
||||
// 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 = 'landed';
|
||||
// Land slightly above the surface
|
||||
fly.position.y = intersect.point.y + 0.05;
|
||||
data.landTimer = 50 + Math.random() * 200; // Land for a random duration
|
||||
return; // Stop updates for this fly
|
||||
}
|
||||
}
|
||||
|
||||
// 2. If not landing, generate a new random flight path
|
||||
const newTargetPos = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4),
|
||||
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4)
|
||||
);
|
||||
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 = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4),
|
||||
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4)
|
||||
);
|
||||
createFlyCurve(fly, newTargetPos);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Main animation loop.
|
||||
*/
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Update bug positions and rotation
|
||||
bugs.forEach(bug => {
|
||||
// Apply current velocity
|
||||
bug.position.add(bug.velocity);
|
||||
|
||||
// Simple collision detection with room boundaries (bounce back)
|
||||
const limit = ROOM_SIZE / 2 - 0.2;
|
||||
if (bug.position.x > limit || bug.position.x < -limit) {
|
||||
bug.velocity.x *= -1;
|
||||
// Adjust bug rotation to face the new direction
|
||||
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
}
|
||||
if (bug.position.z > limit || bug.position.z < -limit) {
|
||||
bug.velocity.z *= -1;
|
||||
// Adjust bug rotation to face the new direction
|
||||
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
}
|
||||
|
||||
// Small random change in direction for erratic movement (like a real bug)
|
||||
bug.velocity.x += (Math.random() - 0.5) * 0.0005;
|
||||
bug.velocity.z += (Math.random() - 0.5) * 0.0005;
|
||||
|
||||
// Clamp velocity to prevent running too fast
|
||||
bug.velocity.clampLength(0, BUG_SPEED * 1.5);
|
||||
|
||||
// Smooth rotation towards the direction of travel
|
||||
const targetYRotation = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
bug.rotation.y += (targetYRotation - bug.rotation.y) * 0.1;
|
||||
});
|
||||
|
||||
// Update fly positions and state
|
||||
updateFlies();
|
||||
|
||||
// Camera Look Around (Dampened rotation)
|
||||
camera.rotation.y += (targetRotation.y - camera.rotation.y) * DAMPING_FACTOR;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// --- Event Handlers ---
|
||||
|
||||
/**
|
||||
* Handles window resize to maintain aspect ratio and prevent distortion.
|
||||
*/
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles mouse movement to control the camera's rotation (look around).
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
function onMouseMove(event) {
|
||||
// Calculate normalized device coordinates (-1 to +1)
|
||||
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
|
||||
|
||||
// Simple map of mouse position to target rotation angles
|
||||
targetRotation.y = -pointer.x * degToRad(30);
|
||||
}
|
||||
|
||||
// Wait for the window to load before initializing the 3D scene
|
||||
window.onload = function() {
|
||||
try {
|
||||
init();
|
||||
} catch (e) {
|
||||
console.error("Three.js initialization failed:", e);
|
||||
document.body.innerHTML = `
|
||||
<div class="flex items-center justify-center h-screen bg-gray-900 text-white">
|
||||
<p class="text-xl p-4 bg-red-700 rounded-lg">Error loading 3D scene. Console has more details.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,582 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gloomy Room Shadow Scene with Bloom</title>
|
||||
<!-- Load Tailwind CSS for utility styling --><script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Load Three.js library --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<!-- Load Three.js Post-processing modules --><script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
|
||||
<!-- FIX: Added missing dependency for UnrealBloomPass -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/FXAAShader.js"></script>
|
||||
<style>
|
||||
/* Custom styles for the 3D canvas */
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #0d0d10; /* Very dark background */
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="info" class="absolute top-4 left-1/2 transform -translate-x-1/2 p-2 bg-gray-900 bg-opacity-70 text-white rounded-lg shadow-xl text-xs sm:text-sm z-10">
|
||||
Spiders and flies scattering in a gloomy, shadow-casting room with bloom. (Use mouse to look around)
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer, composer;
|
||||
let ambientLight, lampLight, lampMesh;
|
||||
let pointer = new THREE.Vector2();
|
||||
let targetRotation = { x: 0, y: 0 };
|
||||
const BUGS_COUNT = 30; // Spiders
|
||||
const FLIES_COUNT = 20; // Flies
|
||||
const bugs = [];
|
||||
const flies = [];
|
||||
const floorHeight = 0;
|
||||
let landingSurfaces = []; // Array to hold floor and table for fly landings
|
||||
const raycaster = new THREE.Raycaster();
|
||||
|
||||
|
||||
// --- Configuration ---
|
||||
const ROOM_SIZE = 15;
|
||||
const LAMP_HEIGHT = 4;
|
||||
const BUG_SPEED = 0.007;
|
||||
const FLIGHT_HEIGHT_MIN = 1.0; // Min height for flying
|
||||
const FLIGHT_HEIGHT_MAX = 3.0; // Max height for flying
|
||||
const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
|
||||
const DAMPING_FACTOR = 0.05;
|
||||
|
||||
// Bloom parameters
|
||||
const bloomParams = {
|
||||
exposure: 1,
|
||||
bloomStrength: 1.5, // How intense the bloom is
|
||||
bloomThreshold: 0.8, // Only pixels brighter than this will bloom
|
||||
bloomRadius: 0.5 // How far the bloom spreads
|
||||
};
|
||||
|
||||
// --- Utility Functions ---
|
||||
|
||||
/**
|
||||
* Converts degrees to radians.
|
||||
* @param {number} degrees
|
||||
* @returns {number}
|
||||
*/
|
||||
function degToRad(degrees) {
|
||||
return degrees * (Math.PI / 180);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the Three.js scene, camera, and renderer.
|
||||
*/
|
||||
function init() {
|
||||
// 1. Scene Setup
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x101015);
|
||||
|
||||
// 2. Renderer Setup (Enable Shadows)
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true }); // Antialiasing is handled by FXAA now
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// 3. Camera Setup (First-person perspective near the floor)
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.5, 5); // Stand a bit above the floor, facing into the room
|
||||
camera.lookAt(0, 1.5, 0);
|
||||
|
||||
// 4. Lighting Setup
|
||||
setupLighting();
|
||||
|
||||
// 5. Environment Setup (Sets up landingSurfaces array)
|
||||
setupRoom();
|
||||
setupTable();
|
||||
|
||||
// 6. Creatures Setup
|
||||
setupBugs(); // Spiders
|
||||
setupFlies(); // Flies
|
||||
|
||||
// 7. Post-processing (Bloom) Setup
|
||||
setupPostProcessing();
|
||||
|
||||
// 8. Event Listeners
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
|
||||
console.log("Three.js Scene Initialized.");
|
||||
animate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the lighting: Ambient and the central PointLight (lamp).
|
||||
*/
|
||||
function setupLighting() {
|
||||
// Very dim ambient light for general visibility
|
||||
ambientLight = new THREE.AmbientLight(0x444444, 0.5);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Point Light (The Lamp)
|
||||
const lampColor = 0xffe9a0; // Warm, dim color
|
||||
const lampIntensity = 1.8;
|
||||
const lampDistance = 15;
|
||||
|
||||
lampLight = new THREE.PointLight(lampColor, lampIntensity, lampDistance);
|
||||
lampLight.position.set(0, LAMP_HEIGHT, 0);
|
||||
|
||||
// Enable shadow casting for the lamp
|
||||
lampLight.castShadow = true;
|
||||
|
||||
// Configure shadow camera properties for better shadow quality
|
||||
lampLight.shadow.mapSize.width = 1024;
|
||||
lampLight.shadow.mapSize.height = 1024;
|
||||
lampLight.shadow.camera.near = 0.5;
|
||||
lampLight.shadow.camera.far = 10;
|
||||
lampLight.shadow.bias = -0.0001; // Tiny bias to prevent shadow artifacts
|
||||
|
||||
scene.add(lampLight);
|
||||
|
||||
// Visual mesh for the light source (the bulb)
|
||||
const bulbGeometry = new THREE.SphereGeometry(0.1, 8, 8);
|
||||
const bulbMaterial = new THREE.MeshBasicMaterial({ color: lampColor });
|
||||
lampMesh = new THREE.Mesh(bulbGeometry, bulbMaterial);
|
||||
lampMesh.position.copy(lampLight.position);
|
||||
scene.add(lampMesh);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the room (walls and floor).
|
||||
*/
|
||||
function setupRoom() {
|
||||
const wallMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x333333,
|
||||
side: THREE.BackSide, // Render walls from the inside
|
||||
shininess: 5,
|
||||
});
|
||||
|
||||
// Floor
|
||||
const floorGeometry = new THREE.PlaneGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2);
|
||||
const floorMesh = new THREE.Mesh(floorGeometry, wallMaterial);
|
||||
floorMesh.rotation.x = degToRad(-90);
|
||||
floorMesh.position.y = floorHeight;
|
||||
floorMesh.receiveShadow = true;
|
||||
floorMesh.name = 'landingSurface'; // Tag for fly landing
|
||||
scene.add(floorMesh);
|
||||
landingSurfaces.push(floorMesh); // Add to list of landing spots
|
||||
|
||||
// Walls (Simple box around the camera position)
|
||||
const wallGeometry = new THREE.BoxGeometry(ROOM_SIZE * 2, ROOM_SIZE * 2, ROOM_SIZE * 2);
|
||||
const wallsMesh = new THREE.Mesh(wallGeometry, wallMaterial);
|
||||
wallsMesh.position.y = ROOM_SIZE; // Center the box vertically
|
||||
wallsMesh.receiveShadow = true;
|
||||
scene.add(wallsMesh);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a simple table object for more complex shadows.
|
||||
*/
|
||||
function setupTable() {
|
||||
const tableMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x5a3d2b, // Dark wood color
|
||||
shininess: 10,
|
||||
});
|
||||
|
||||
// Table top
|
||||
const tableTop = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(3, 0.1, 1.5),
|
||||
tableMaterial
|
||||
);
|
||||
tableTop.position.set(2, 1.5 + 0.05, 0);
|
||||
tableTop.castShadow = true;
|
||||
tableTop.receiveShadow = true;
|
||||
tableTop.name = 'landingSurface'; // Tag for fly landing
|
||||
scene.add(tableTop);
|
||||
landingSurfaces.push(tableTop); // Add to list of landing spots
|
||||
|
||||
// Table legs (using a loop for simplicity)
|
||||
const legGeometry = new THREE.BoxGeometry(0.1, 1.5, 0.1);
|
||||
const positions = [
|
||||
[3.4, 0.75, 0.65], [-0.4, 0.75, 0.65],
|
||||
[3.4, 0.75, -0.65], [-0.4, 0.75, -0.65]
|
||||
];
|
||||
|
||||
positions.forEach(pos => {
|
||||
const leg = new THREE.Mesh(legGeometry, tableMaterial);
|
||||
leg.position.set(pos[0], pos[1], pos[2]);
|
||||
leg.castShadow = true;
|
||||
leg.receiveShadow = true;
|
||||
scene.add(leg);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a single, more detailed spider mesh (sphere body and 8 legs).
|
||||
* @returns {THREE.Group}
|
||||
*/
|
||||
function createBugMesh() {
|
||||
const bugGroup = new THREE.Group();
|
||||
|
||||
// Material for all parts
|
||||
const bugMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x0a0a0a, // Almost black
|
||||
shininess: 30,
|
||||
});
|
||||
|
||||
// --- 1. Body (Sphere) ---
|
||||
const bodyRadius = 0.15;
|
||||
const bodyGeometry = new THREE.SphereGeometry(bodyRadius, 16, 16);
|
||||
const body = new THREE.Mesh(bodyGeometry, bugMaterial);
|
||||
body.position.y = bodyRadius;
|
||||
|
||||
body.castShadow = true;
|
||||
body.receiveShadow = true;
|
||||
bugGroup.add(body);
|
||||
|
||||
// --- 2. Legs (8 thin cylinders) ---
|
||||
const legLength = 0.3;
|
||||
const legWidth = 0.005;
|
||||
const legGeometry = new THREE.CylinderGeometry(legWidth, legWidth, legLength, 4);
|
||||
const numLegs = 8;
|
||||
const legAngleStart = degToRad(45 / 2);
|
||||
const legRadialPivot = 0.08;
|
||||
const legTiltDown = degToRad(15);
|
||||
|
||||
for (let i = 0; i < numLegs; i++) {
|
||||
const leg = new THREE.Mesh(legGeometry, bugMaterial);
|
||||
const angle = legAngleStart + (i * degToRad(360 / numLegs));
|
||||
const pivotX = legRadialPivot * Math.sin(angle);
|
||||
const pivotZ = legRadialPivot * Math.cos(angle);
|
||||
leg.position.set(pivotX, bodyRadius - 0.03, pivotZ);
|
||||
const halfLength = legLength / 2;
|
||||
leg.position.x += halfLength * Math.sin(angle);
|
||||
leg.position.z += halfLength * Math.cos(angle);
|
||||
|
||||
leg.rotation.x = degToRad(90);
|
||||
leg.rotation.y = angle;
|
||||
leg.rotation.z = (i % 2 === 0) ? legTiltDown : -legTiltDown;
|
||||
|
||||
leg.castShadow = true;
|
||||
leg.receiveShadow = true;
|
||||
bugGroup.add(leg);
|
||||
}
|
||||
|
||||
bugGroup.position.y = floorHeight;
|
||||
return bugGroup;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.05, 0.1, 4);
|
||||
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)
|
||||
curve: null,
|
||||
landCheckTimer: 0,
|
||||
oscillationTime: Math.random() * 100, // For smooth y-axis buzzing
|
||||
};
|
||||
|
||||
// Initial random position
|
||||
flyGroup.position.set(
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4),
|
||||
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4)
|
||||
);
|
||||
|
||||
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 'bugs' (spiders) meshes.
|
||||
*/
|
||||
function setupBugs() {
|
||||
for (let i = 0; i < BUGS_COUNT; i++) {
|
||||
const bug = createBugMesh();
|
||||
bug.position.x = (Math.random() - 0.5) * (ROOM_SIZE - 2);
|
||||
bug.position.z = (Math.random() - 0.5) * (ROOM_SIZE - 2);
|
||||
bug.rotation.y = Math.random() * Math.PI * 2;
|
||||
bug.velocity = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * BUG_SPEED,
|
||||
0,
|
||||
(Math.random() - 0.5) * BUG_SPEED
|
||||
);
|
||||
scene.add(bug);
|
||||
bugs.push(bug);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
const boundaryLimit = ROOM_SIZE / 2 - 0.1;
|
||||
|
||||
flies.forEach(fly => {
|
||||
const data = fly.userData;
|
||||
|
||||
if (data.state === 'flying') {
|
||||
|
||||
if (!data.curve) {
|
||||
// Initialize the first curve
|
||||
const newTargetPos = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4),
|
||||
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4)
|
||||
);
|
||||
createFlyCurve(fly, newTargetPos);
|
||||
}
|
||||
|
||||
// Advance curve progression
|
||||
data.t += FLY_FLIGHT_SPEED_FACTOR;
|
||||
|
||||
// Check for landing readiness during the flight path
|
||||
data.landCheckTimer--;
|
||||
|
||||
if (data.t >= 1) {
|
||||
// Path finished
|
||||
|
||||
// 1. Check for landing decision
|
||||
if (data.landCheckTimer <= 0 && Math.random() < 0.8) {
|
||||
|
||||
// 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 = 'landed';
|
||||
// Land slightly above the surface
|
||||
fly.position.y = intersect.point.y + 0.05;
|
||||
data.landTimer = 50 + Math.random() * 200; // Land for a random duration
|
||||
return; // Stop updates for this fly
|
||||
}
|
||||
}
|
||||
|
||||
// 2. If not landing, generate a new random flight path
|
||||
const newTargetPos = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4),
|
||||
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4)
|
||||
);
|
||||
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 = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4),
|
||||
FLIGHT_HEIGHT_MIN + Math.random() * (FLIGHT_HEIGHT_MAX - FLIGHT_HEIGHT_MIN),
|
||||
(Math.random() - 0.5) * (ROOM_SIZE - 4)
|
||||
);
|
||||
createFlyCurve(fly, newTargetPos);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the post-processing effects (Bloom).
|
||||
*/
|
||||
function setupPostProcessing() {
|
||||
composer = new THREE.EffectComposer(renderer);
|
||||
composer.addPass(new THREE.RenderPass(scene, camera));
|
||||
|
||||
const bloomPass = new THREE.UnrealBloomPass(
|
||||
new THREE.Vector2(window.innerWidth, window.innerHeight),
|
||||
bloomParams.bloomStrength,
|
||||
bloomParams.bloomRadius,
|
||||
bloomParams.bloomThreshold
|
||||
);
|
||||
composer.addPass(bloomPass);
|
||||
|
||||
// FXAA Pass for anti-aliasing after post-processing
|
||||
const fxaaPass = new THREE.ShaderPass(THREE.FXAAShader);
|
||||
fxaaPass.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
|
||||
composer.addPass(fxaaPass);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Main animation loop.
|
||||
*/
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Update bug positions and rotation
|
||||
bugs.forEach(bug => {
|
||||
// Apply current velocity
|
||||
bug.position.add(bug.velocity);
|
||||
|
||||
// Simple collision detection with room boundaries (bounce back)
|
||||
const limit = ROOM_SIZE / 2 - 0.2;
|
||||
if (bug.position.x > limit || bug.position.x < -limit) {
|
||||
bug.velocity.x *= -1;
|
||||
// Adjust bug rotation to face the new direction
|
||||
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
}
|
||||
if (bug.position.z > limit || bug.position.z < -limit) {
|
||||
bug.velocity.z *= -1;
|
||||
// Adjust bug rotation to face the new direction
|
||||
bug.rotation.y = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
}
|
||||
|
||||
// Small random change in direction for erratic movement (like a real bug)
|
||||
bug.velocity.x += (Math.random() - 0.5) * 0.0005;
|
||||
bug.velocity.z += (Math.random() - 0.5) * 0.0005;
|
||||
|
||||
// Clamp velocity to prevent running too fast
|
||||
bug.velocity.clampLength(0, BUG_SPEED * 1.5);
|
||||
|
||||
// Smooth rotation towards the direction of travel
|
||||
const targetYRotation = Math.atan2(bug.velocity.x, bug.velocity.z);
|
||||
bug.rotation.y += (targetYRotation - bug.rotation.y) * 0.1;
|
||||
});
|
||||
|
||||
// Update fly positions and state
|
||||
updateFlies();
|
||||
|
||||
// Camera Look Around (Dampened rotation)
|
||||
camera.rotation.y += (targetRotation.y - camera.rotation.y) * DAMPING_FACTOR;
|
||||
|
||||
// Render the scene with post-processing effects
|
||||
composer.render();
|
||||
}
|
||||
|
||||
// --- Event Handlers ---
|
||||
|
||||
/**
|
||||
* Handles window resize to maintain aspect ratio and prevent distortion.
|
||||
*/
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
composer.setSize(window.innerWidth, window.innerHeight); // Update composer size too
|
||||
// Also update FXAA resolution uniform
|
||||
if (composer && composer.passes && composer.passes.length > 2) { // Check if FXAA pass exists
|
||||
composer.passes[2].uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles mouse movement to control the camera's rotation (look around).
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
function onMouseMove(event) {
|
||||
// Calculate normalized device coordinates (-1 to +1)
|
||||
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
|
||||
|
||||
// Simple map of mouse position to target rotation angles
|
||||
targetRotation.y = -pointer.x * degToRad(30);
|
||||
}
|
||||
|
||||
// Wait for the window to load before initializing the 3D scene
|
||||
window.onload = function() {
|
||||
try {
|
||||
init();
|
||||
} catch (e) {
|
||||
console.error("Three.js initialization failed:", e);
|
||||
document.body.innerHTML = `
|
||||
<div class="flex items-center justify-center h-screen bg-gray-900 text-white">
|
||||
<p class="text-xl p-4 bg-red-700 rounded-lg">Error loading 3D scene. Console has more details.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,413 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>3D Guinea Pig Garden</title>
|
||||
<!-- Load Tailwind CSS for modern styling -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Load Three.js library -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Custom CSS to ensure the canvas fills the viewport */
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
#info-box {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 10px 15px;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
border-left: 4px solid #38A169; /* Garden color accent */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<div id="info-box">
|
||||
<h2 class="font-bold text-lg mb-1">Guinea Pig Garden Frolic</h2>
|
||||
<p class="text-sm">Click and drag to look around the field.</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Global variables for Three.js
|
||||
let scene, camera, renderer, controls;
|
||||
const guineaPigs = [];
|
||||
const NUM_PIGS = 80;
|
||||
const ROOM_SIZE = 15; // Defines the half-width/depth of the movement area (now a field)
|
||||
|
||||
// --- Utility Functions (TTS Helpers kept for completeness) ---
|
||||
|
||||
function base64ToArrayBuffer(base64) {
|
||||
const binaryString = atob(base64);
|
||||
const len = binaryString.length;
|
||||
const bytes = new Uint8Array(len);
|
||||
for (let i = 0; i < len; i++) {
|
||||
bytes[i] = binaryString.charCodeAt(i);
|
||||
}
|
||||
return bytes.buffer;
|
||||
}
|
||||
|
||||
function pcmToWav(int16Array, sampleRate) {
|
||||
const numChannels = 1;
|
||||
const bytesPerSample = 2;
|
||||
const blockAlign = numChannels * bytesPerSample;
|
||||
const dataSize = int16Array.length * bytesPerSample;
|
||||
const buffer = new ArrayBuffer(44 + dataSize);
|
||||
const view = new DataView(buffer);
|
||||
|
||||
writeString(view, 0, 'RIFF');
|
||||
view.setUint32(4, 36 + dataSize, true);
|
||||
writeString(view, 8, 'WAVE');
|
||||
writeString(view, 12, 'fmt ');
|
||||
view.setUint32(16, 16, true);
|
||||
view.setUint16(20, 1, true);
|
||||
view.setUint16(22, numChannels, true);
|
||||
view.setUint32(24, sampleRate, true);
|
||||
view.setUint32(28, sampleRate * blockAlign, true);
|
||||
view.setUint16(32, blockAlign, true);
|
||||
view.setUint16(34, 16, true);
|
||||
writeString(view, 36, 'data');
|
||||
view.setUint32(40, dataSize, true);
|
||||
|
||||
for (let i = 0; i < int16Array.length; i++) {
|
||||
view.setInt16(44 + i * 2, int16Array[i], true);
|
||||
}
|
||||
|
||||
return new Blob([buffer], { type: 'audio/wav' });
|
||||
|
||||
function writeString(view, offset, string) {
|
||||
for (let i = 0; i < string.length; i++) {
|
||||
view.setUint8(offset + i, string.charCodeAt(i));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// --- Three.js Setup and Geometry ---
|
||||
|
||||
function init() {
|
||||
// 1. Scene Setup
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x87ceeb); // Lighter Sky Blue
|
||||
|
||||
// 2. Camera Setup
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 5, 20);
|
||||
|
||||
// 3. Renderer Setup
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.shadowMap.enabled = true; // Enable shadows
|
||||
document.getElementById('container').appendChild(renderer.domElement);
|
||||
|
||||
// 4. Lighting (Sunlight simulation)
|
||||
const ambientLight = new THREE.AmbientLight(0x404040, 1.5); // Soft white light
|
||||
scene.add(ambientLight);
|
||||
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5); // Brighter sun
|
||||
directionalLight.position.set(5, 20, 10);
|
||||
directionalLight.castShadow = true;
|
||||
directionalLight.shadow.mapSize.width = 2048;
|
||||
directionalLight.shadow.mapSize.height = 2048;
|
||||
directionalLight.shadow.camera.near = 0.5;
|
||||
directionalLight.shadow.camera.far = 50;
|
||||
directionalLight.shadow.camera.left = -ROOM_SIZE * 2;
|
||||
directionalLight.shadow.camera.right = ROOM_SIZE * 2;
|
||||
directionalLight.shadow.camera.top = ROOM_SIZE * 2;
|
||||
directionalLight.shadow.camera.bottom = -ROOM_SIZE * 2;
|
||||
scene.add(directionalLight);
|
||||
|
||||
// 5. Garden Setup
|
||||
createGarden();
|
||||
|
||||
// 6. Guinea Pigs
|
||||
createGuineaPigs();
|
||||
|
||||
// 7. Camera Controls (using custom mouse drag controls)
|
||||
setupControls();
|
||||
|
||||
// Event Listeners
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a simple, low-poly geometry for a single guinea pig.
|
||||
* The pig is returned as a THREE.Group.
|
||||
*/
|
||||
function createGuineaPigMesh() {
|
||||
const pigGroup = new THREE.Group();
|
||||
|
||||
// Body (Capsule/Cylinder)
|
||||
const bodyGeometry = new THREE.CylinderGeometry(0.5, 0.6, 1.5, 8);
|
||||
const color = new THREE.Color(Math.random(), Math.random(), Math.random()).lerp(new THREE.Color(0.6, 0.6, 0.6), 0.5); // Mixed fur colors
|
||||
const bodyMaterial = new THREE.MeshLambertMaterial({ color: color });
|
||||
const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
|
||||
body.rotation.z = Math.PI / 2; // Lay it flat along the X-axis
|
||||
body.position.y = 0.3; // Lift off floor
|
||||
body.castShadow = true;
|
||||
body.receiveShadow = true;
|
||||
pigGroup.add(body);
|
||||
|
||||
// Head (Sphere)
|
||||
const headGeometry = new THREE.SphereGeometry(0.4, 8, 8);
|
||||
const headMaterial = new THREE.MeshLambertMaterial({ color: color.clone().offsetHSL(0, 0, 0.1) });
|
||||
const head = new THREE.Mesh(headGeometry, headMaterial);
|
||||
head.position.set(0.8, 0.3, 0); // Head positioned along the positive X-axis
|
||||
head.castShadow = true;
|
||||
pigGroup.add(head);
|
||||
|
||||
// Ears (Cones)
|
||||
const earGeometry = new THREE.ConeGeometry(0.1, 0.2, 4);
|
||||
const earMaterial = new THREE.MeshLambertMaterial({ color: 0xcb997e }); // Pinkish
|
||||
const earL = new THREE.Mesh(earGeometry, earMaterial);
|
||||
earL.position.set(0.8, 0.5, 0.3);
|
||||
earL.rotation.x = Math.PI / 2;
|
||||
earL.rotation.y = -Math.PI / 8;
|
||||
earL.rotation.z = -Math.PI / 4;
|
||||
pigGroup.add(earL);
|
||||
|
||||
const earR = new THREE.Mesh(earGeometry, earMaterial);
|
||||
earR.position.set(0.8, 0.5, -0.3);
|
||||
earR.rotation.x = Math.PI / 2;
|
||||
earR.rotation.y = Math.PI / 8;
|
||||
earR.rotation.z = Math.PI / 4;
|
||||
pigGroup.add(earR);
|
||||
|
||||
// FIX: Rotate the entire pig group -90 degrees around the Y-axis.
|
||||
// This aligns the pig's "forward" direction (originally +X) with the scene's +Z axis,
|
||||
// which correctly matches the orientation calculated by the movement logic.
|
||||
pigGroup.rotation.y = -Math.PI / 2;
|
||||
|
||||
return pigGroup;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and adds NUM_PIGS instances to the scene with initial random positions.
|
||||
*/
|
||||
function createGuineaPigs() {
|
||||
for (let i = 0; i < NUM_PIGS; i++) {
|
||||
const pigMesh = createGuineaPigMesh();
|
||||
|
||||
// Initial random position within the room bounds
|
||||
pigMesh.position.x = (Math.random() - 0.5) * ROOM_SIZE * 1.8;
|
||||
pigMesh.position.z = (Math.random() - 0.5) * ROOM_SIZE * 1.8;
|
||||
pigMesh.rotation.y = Math.random() * Math.PI * 2; // Random initial direction
|
||||
|
||||
// Attach movement properties to the mesh
|
||||
pigMesh.velocity = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * 0.05,
|
||||
0,
|
||||
(Math.random() - 0.5) * 0.05
|
||||
);
|
||||
pigMesh.turnCooldown = Math.random() * 60 + 60; // Pigs turn every 60-120 frames
|
||||
pigMesh.turnTimer = 0;
|
||||
pigMesh.runAnimation = 0;
|
||||
|
||||
scene.add(pigMesh);
|
||||
guineaPigs.push(pigMesh);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds randomized grass and flower meshes to the garden.
|
||||
*/
|
||||
function addFoliage() {
|
||||
const FOLIAGE_COUNT = 300;
|
||||
const MAX_BOUND = ROOM_SIZE * 1.8; // Area where foliage can spawn
|
||||
|
||||
// Simple Grass Mesh (tall, thin cylinder)
|
||||
const grassGeometry = new THREE.CylinderGeometry(0.05, 0.05, 1, 4);
|
||||
const grassMaterial = new THREE.MeshLambertMaterial({ color: 0x68a87b }); // Slightly different green
|
||||
|
||||
// Simple Flower Mesh (stem + petal sphere)
|
||||
const stemGeometry = new THREE.CylinderGeometry(0.03, 0.03, 0.5, 4);
|
||||
const petalGeometry = new THREE.SphereGeometry(0.15, 6, 6);
|
||||
const flowerMaterials = [
|
||||
new THREE.MeshLambertMaterial({ color: 0xffd700 }), // Yellow
|
||||
new THREE.MeshLambertMaterial({ color: 0xff69b4 }), // Pink
|
||||
new THREE.MeshLambertMaterial({ color: 0x7b68ee }) // Lavender
|
||||
];
|
||||
const stemMaterial = new THREE.MeshLambertMaterial({ color: 0x8fbc8f });
|
||||
|
||||
for (let i = 0; i < FOLIAGE_COUNT; i++) {
|
||||
const x = (Math.random() - 0.5) * MAX_BOUND;
|
||||
const z = (Math.random() - 0.5) * MAX_BOUND;
|
||||
|
||||
// Alternate between grass and flowers
|
||||
if (i % 3 === 0) {
|
||||
// Add Flower
|
||||
const stem = new THREE.Mesh(stemGeometry, stemMaterial);
|
||||
stem.position.set(x, 0.25, z);
|
||||
stem.receiveShadow = true;
|
||||
scene.add(stem);
|
||||
|
||||
const petals = new THREE.Mesh(petalGeometry, flowerMaterials[i % 3]);
|
||||
petals.position.set(x, 0.5 + Math.random() * 0.1, z);
|
||||
petals.castShadow = true;
|
||||
scene.add(petals);
|
||||
} else {
|
||||
// Add Grass
|
||||
const grass = new THREE.Mesh(grassGeometry, grassMaterial);
|
||||
const height = Math.random() * 0.5 + 0.5;
|
||||
grass.scale.y = height;
|
||||
grass.position.set(x, height / 2, z);
|
||||
grass.rotation.y = Math.random() * Math.PI * 2;
|
||||
grass.receiveShadow = true;
|
||||
scene.add(grass);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the garden ground (replaces the room walls and floor).
|
||||
*/
|
||||
function createGarden() {
|
||||
const grassMaterial = new THREE.MeshLambertMaterial({ color: 0x4f8e5b }); // Rich Grass Green
|
||||
|
||||
// Ground
|
||||
const groundGeometry = new THREE.PlaneGeometry(ROOM_SIZE * 4, ROOM_SIZE * 4); // Large ground plane
|
||||
const ground = new THREE.Mesh(groundGeometry, grassMaterial);
|
||||
ground.rotation.x = -Math.PI / 2;
|
||||
ground.position.y = 0;
|
||||
ground.receiveShadow = true;
|
||||
scene.add(ground);
|
||||
|
||||
// Add flowers and grass
|
||||
addFoliage();
|
||||
}
|
||||
|
||||
// --- Interaction / Controls ---
|
||||
|
||||
function setupControls() {
|
||||
let isDragging = false;
|
||||
let previousMousePosition = { x: 0, y: 0 };
|
||||
const rotationSpeed = 0.005;
|
||||
|
||||
// Create a target for the camera to look at, placed roughly in the center of the scene.
|
||||
const pivot = new THREE.Group();
|
||||
pivot.position.set(0, 0, 0);
|
||||
scene.add(pivot);
|
||||
pivot.add(camera);
|
||||
|
||||
const mouseDownHandler = (e) => {
|
||||
isDragging = true;
|
||||
previousMousePosition.x = e.clientX;
|
||||
previousMousePosition.y = e.clientY;
|
||||
};
|
||||
|
||||
const mouseUpHandler = () => {
|
||||
isDragging = false;
|
||||
};
|
||||
|
||||
const mouseMoveHandler = (e) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const deltaX = e.clientX - previousMousePosition.x;
|
||||
const deltaY = e.clientY - previousMousePosition.y;
|
||||
|
||||
// Rotate the pivot around the Y axis for horizontal movement
|
||||
pivot.rotation.y += deltaX * rotationSpeed;
|
||||
|
||||
// Calculate vertical rotation (tilt the camera up/down)
|
||||
let newXRotation = pivot.rotation.x + deltaY * rotationSpeed;
|
||||
|
||||
// Clamp the vertical rotation to prevent flipping
|
||||
const PI_HALF = Math.PI / 2;
|
||||
newXRotation = Math.max(-PI_HALF + 0.1, Math.min(PI_HALF - 0.1, newXRotation));
|
||||
pivot.rotation.x = newXRotation;
|
||||
|
||||
previousMousePosition.x = e.clientX;
|
||||
previousMousePosition.y = e.clientY;
|
||||
};
|
||||
|
||||
renderer.domElement.addEventListener('mousedown', mouseDownHandler, false);
|
||||
renderer.domElement.addEventListener('mouseup', mouseUpHandler, false);
|
||||
renderer.domElement.addEventListener('mousemove', mouseMoveHandler, false);
|
||||
renderer.domElement.addEventListener('mouseout', mouseUpHandler, false); // Stop dragging if mouse leaves
|
||||
}
|
||||
|
||||
// --- Animation Loop ---
|
||||
|
||||
function updateGuineaPigs() {
|
||||
const boundary = ROOM_SIZE * 0.9;
|
||||
const speed = 0.05;
|
||||
|
||||
guineaPigs.forEach(pig => {
|
||||
// 1. Movement and Rotation
|
||||
pig.position.x += pig.velocity.x * speed;
|
||||
pig.position.z += pig.velocity.z * speed;
|
||||
|
||||
// 2. Bound Checking (Check if near edges of the field)
|
||||
let needsTurn = false;
|
||||
if (pig.position.x > boundary || pig.position.x < -boundary) {
|
||||
pig.velocity.x *= -1;
|
||||
needsTurn = true;
|
||||
pig.position.x = Math.max(-boundary, Math.min(boundary, pig.position.x));
|
||||
}
|
||||
if (pig.position.z > boundary || pig.position.z < -boundary) {
|
||||
pig.velocity.z *= -1;
|
||||
needsTurn = true;
|
||||
pig.position.z = Math.max(-boundary, Math.min(boundary, pig.position.z));
|
||||
}
|
||||
|
||||
// 3. Random Turning
|
||||
pig.turnTimer++;
|
||||
if (pig.turnTimer > pig.turnCooldown || needsTurn) {
|
||||
pig.turnTimer = 0;
|
||||
// Calculate new random velocity and rotation
|
||||
pig.velocity.x = (Math.random() - 0.5) * 2;
|
||||
pig.velocity.z = (Math.random() - 0.5) * 2;
|
||||
pig.velocity.normalize(); // Keep consistent speed
|
||||
|
||||
// Set rotation based on new velocity direction (no offset needed as the mesh is pre-rotated)
|
||||
pig.rotation.y = Math.atan2(pig.velocity.x, pig.velocity.z)-Math.PI/2;
|
||||
|
||||
pig.turnCooldown = Math.random() * 60 + 60;
|
||||
}
|
||||
|
||||
// 4. Simple 'Run' Animation (wobbling)
|
||||
pig.runAnimation += 0.1;
|
||||
pig.rotation.x = Math.sin(pig.runAnimation) * 0.05; // Head wobble
|
||||
pig.position.y = Math.abs(Math.sin(pig.runAnimation * 0.5)) * 0.05 + 0.3; // Slight bounce
|
||||
});
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
updateGuineaPigs(); // Move and update the pigs
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
// Start the application when the window loads
|
||||
window.onload = function () {
|
||||
// Check if Three.js is loaded
|
||||
if (typeof THREE === 'undefined') {
|
||||
console.error("Three.js not loaded. Please ensure the CDN link is correct.");
|
||||
return;
|
||||
}
|
||||
init();
|
||||
animate();
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,436 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>3D CRT Television Model (Video Player)</title>
|
||||
<!-- Load Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Load Three.js -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Apply Inter font and ensure full viewport size */
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: 'Inter', sans-serif;
|
||||
overflow: hidden; /* Prevent scrolling */
|
||||
}
|
||||
/* Style for the canvas container */
|
||||
#tv-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* The canvas itself will be appended here by three.js */
|
||||
}
|
||||
/* Custom styling for the file input button */
|
||||
#controls input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
#controls label {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #ef4444; /* red-500 */
|
||||
color: white;
|
||||
border-radius: 0.375rem; /* rounded-md */
|
||||
font-weight: 600;
|
||||
transition: background-color 0.2s;
|
||||
box-shadow: 0 4px #b91c1c; /* darker red for 3D press effect */
|
||||
user-select: none;
|
||||
}
|
||||
#controls label:hover {
|
||||
background-color: #dc2626; /* red-600 */
|
||||
}
|
||||
#controls label:active {
|
||||
box-shadow: 0 1px #b91c1c;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-900 text-gray-100 antialiased">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="absolute top-0 left-0 right-0 p-4 text-center z-10">
|
||||
<h1 class="text-3xl font-extrabold text-red-500">Nostalgic CRT Display (Video Player)</h1>
|
||||
<p class="text-sm text-gray-400 mt-1">Click and drag to rotate the bulky set. Load a video to replace the static!</p>
|
||||
</header>
|
||||
|
||||
<!-- Controls (Load Button) -->
|
||||
<div id="controls" class="absolute bottom-4 left-0 right-0 p-4 flex justify-center z-10">
|
||||
<input type="file" id="videoFileInput" accept="video/*">
|
||||
<label for="videoFileInput" id="loadVideoLabel">
|
||||
Load Video File
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Hidden Video Element for decoding the video file -->
|
||||
<video id="videoElement" class="hidden" loop muted playsinline></video>
|
||||
|
||||
<!-- 3D Canvas Container -->
|
||||
<div id="tv-container">
|
||||
<!-- Three.js will inject the canvas here -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer;
|
||||
let tvModel;
|
||||
let isDragging = false;
|
||||
let previousMousePosition = { x: 0, y: 0 };
|
||||
let screenMesh; // Reference to the screen mesh for texture updates
|
||||
|
||||
// Dimensions for a bulky CRT
|
||||
const TV_WIDTH = 12;
|
||||
const TV_HEIGHT = 9;
|
||||
const TV_DEPTH = 10;
|
||||
|
||||
// Variables for textures
|
||||
let staticTexture;
|
||||
let videoTexture;
|
||||
let isStaticActive = true; // Flag to control rendering loop
|
||||
|
||||
// --- Utility Functions (Kept for environment compatibility) ---
|
||||
function pcmToWav(pcm16, sampleRate) { /* ... omitted for brevity ... */ }
|
||||
function base64ToArrayBuffer(base64) { /* ... omitted for brevity ... */ }
|
||||
|
||||
// --- Core 3D Functions ---
|
||||
|
||||
function init() {
|
||||
const container = document.getElementById('tv-container');
|
||||
|
||||
// 1. Scene Setup
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x111827); // Dark background matching Tailwind bg-gray-900
|
||||
|
||||
// 2. Camera Setup
|
||||
camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 100);
|
||||
camera.position.z = 25;
|
||||
camera.position.y = 0;
|
||||
|
||||
// 3. Renderer Setup
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// 4. Create TV Model
|
||||
tvModel = createTV();
|
||||
scene.add(tvModel);
|
||||
|
||||
// 5. Setup controls
|
||||
setupVideoControls();
|
||||
|
||||
// 6. Add Lighting
|
||||
addLights();
|
||||
|
||||
// 7. Event Listeners for Interaction and Resizing
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
renderer.domElement.addEventListener('mousedown', onMouseDown, false);
|
||||
renderer.domElement.addEventListener('mousemove', onMouseMove, false);
|
||||
renderer.domElement.addEventListener('mouseup', onMouseUp, false);
|
||||
renderer.domElement.addEventListener('touchstart', onTouchStart, false);
|
||||
renderer.domElement.addEventListener('touchmove', onTouchMove, false);
|
||||
renderer.domElement.addEventListener('touchend', onMouseUp, false);
|
||||
|
||||
// Initial view rotation
|
||||
tvModel.rotation.y = Math.PI / 4;
|
||||
tvModel.rotation.x = -Math.PI / 16;
|
||||
}
|
||||
|
||||
function createTV() {
|
||||
const tvGroup = new THREE.Group();
|
||||
|
||||
// --- 1. CRT Body Casing (Bulky Box) ---
|
||||
const bodyGeometry = new THREE.BoxGeometry(TV_WIDTH, TV_HEIGHT, TV_DEPTH);
|
||||
const bodyMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x554433, // Brown/Beige plastic casing
|
||||
specular: 0x111111,
|
||||
shininess: 10
|
||||
});
|
||||
const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial);
|
||||
tvGroup.add(bodyMesh);
|
||||
|
||||
// --- 2. Screen (Dynamic Canvas Texture for initial static) ---
|
||||
|
||||
// Create the initial dynamic static canvas (512x512 resolution for texture)
|
||||
const screenCanvas = document.createElement('canvas');
|
||||
screenCanvas.width = 512;
|
||||
screenCanvas.height = 512;
|
||||
const screenContext = screenCanvas.getContext('2d');
|
||||
staticTexture = new THREE.CanvasTexture(screenCanvas); // Store global reference to static texture
|
||||
|
||||
// Parameters for CRT screen curvature
|
||||
const screenRadius = 25; // Large radius for a subtle curve
|
||||
const screenWidth = TV_WIDTH - 1.5;
|
||||
const screenHeight = TV_HEIGHT - 1.5;
|
||||
const screenOffset = TV_DEPTH / 2 + 0.01;
|
||||
|
||||
// Calculate the angle needed to span the screen width on the curved surface
|
||||
const screenArcAngle = screenWidth / screenRadius;
|
||||
|
||||
// Geometry: Segment of a cylinder to create a concave screen
|
||||
const screenGeometry = new THREE.CylinderGeometry(
|
||||
screenRadius, screenRadius,
|
||||
screenHeight, // Cylinder height corresponds to screen height (Y axis)
|
||||
32, // Radial segments (for smoothness)
|
||||
1,
|
||||
true, // Open ended
|
||||
-screenArcAngle / 2, // Start angle
|
||||
screenArcAngle // Total angle (arc length)
|
||||
);
|
||||
|
||||
// Use a Basic Material with the static texture initially
|
||||
const screenMaterial = new THREE.MeshBasicMaterial({
|
||||
map: staticTexture,
|
||||
// Setting DoubleSide ensures the concave side of the geometry renders.
|
||||
side: THREE.DoubleSide
|
||||
});
|
||||
screenMesh = new THREE.Mesh(screenGeometry, screenMaterial); // Store global reference
|
||||
screenMesh.userData.context = screenContext; // Store context for static update
|
||||
screenMesh.name = 'crtScreen'; // Give it a name for easy lookup
|
||||
|
||||
// Rotation and Positioning:
|
||||
// Rotate 180 degrees around Y to flip the mesh so the CONCAVE side faces the camera (+Z).
|
||||
screenMesh.rotation.y = Math.PI;
|
||||
|
||||
// Position: Move back by the radius so the front-center aligns with the front of the TV
|
||||
screenMesh.position.z = screenOffset - screenRadius;
|
||||
|
||||
tvGroup.add(screenMesh);
|
||||
|
||||
|
||||
// --- 3. Knobs/Dials on the side ---
|
||||
const knobGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.5, 16);
|
||||
const knobMaterial = new THREE.MeshPhongMaterial({ color: 0x333333, shininess: 30 });
|
||||
|
||||
// Channel Knob
|
||||
const channelKnob = new THREE.Mesh(knobGeometry, knobMaterial);
|
||||
channelKnob.rotation.z = Math.PI / 2; // Rotate to stick out from the side
|
||||
channelKnob.position.set(TV_WIDTH / 2 + 0.25, TV_HEIGHT / 2 - 2, 0);
|
||||
tvGroup.add(channelKnob);
|
||||
|
||||
// Volume Knob
|
||||
const volumeKnob = new THREE.Mesh(knobGeometry, knobMaterial);
|
||||
volumeKnob.rotation.z = Math.PI / 2;
|
||||
volumeKnob.position.set(TV_WIDTH / 2 + 0.25, TV_HEIGHT / 2 - 3.5, 0);
|
||||
tvGroup.add(volumeKnob);
|
||||
|
||||
// --- 4. Antenna (Rabbit Ears) ---
|
||||
const antennaMaterial = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, shininess: 80 });
|
||||
const antennaGeometry = new THREE.CylinderGeometry(0.05, 0.05, 5, 8);
|
||||
|
||||
// Base connection point
|
||||
const antennaBase = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.3, 16), knobMaterial);
|
||||
antennaBase.position.set(0, TV_HEIGHT / 2 + 0.15 + TV_HEIGHT / 2, 0);
|
||||
tvGroup.add(antennaBase);
|
||||
|
||||
// Left Ear
|
||||
const leftEar = new THREE.Mesh(antennaGeometry, antennaMaterial);
|
||||
leftEar.rotation.z = Math.PI / 4;
|
||||
leftEar.position.set(-1.5, TV_HEIGHT / 2 + 2.5 + TV_HEIGHT / 2, 0);
|
||||
tvGroup.add(leftEar);
|
||||
|
||||
// Right Ear
|
||||
const rightEar = new THREE.Mesh(antennaGeometry, antennaMaterial);
|
||||
rightEar.rotation.z = -Math.PI / 4;
|
||||
rightEar.position.set(1.5, TV_HEIGHT / 2 + 2.5 + TV_HEIGHT / 2, 0);
|
||||
tvGroup.add(rightEar);
|
||||
|
||||
return tvGroup;
|
||||
}
|
||||
|
||||
function setupVideoControls() {
|
||||
const input = document.getElementById('videoFileInput');
|
||||
const video = document.getElementById('videoElement');
|
||||
const label = document.getElementById('loadVideoLabel');
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
label.textContent = "Loading...";
|
||||
loadVideoTexture(file, video);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadVideoTexture(file, video) {
|
||||
// Stop any existing video playback and revoke old URL
|
||||
if (video.src) {
|
||||
video.pause();
|
||||
URL.revokeObjectURL(video.src);
|
||||
}
|
||||
|
||||
// Create new blob URL for the selected file
|
||||
const videoUrl = URL.createObjectURL(file);
|
||||
video.src = videoUrl;
|
||||
|
||||
// When video metadata is loaded, create the texture and assign it
|
||||
video.onloadeddata = () => {
|
||||
isStaticActive = false; // Stop static rendering
|
||||
|
||||
// Dispose of previous video texture if it exists
|
||||
if (videoTexture) {
|
||||
videoTexture.dispose();
|
||||
}
|
||||
|
||||
// Create new VideoTexture
|
||||
videoTexture = new THREE.VideoTexture(video);
|
||||
videoTexture.minFilter = THREE.LinearFilter;
|
||||
videoTexture.magFilter = THREE.LinearFilter;
|
||||
videoTexture.format = THREE.RGBAFormat;
|
||||
|
||||
// Update the screen mesh material map
|
||||
if (screenMesh) {
|
||||
screenMesh.material.map = videoTexture;
|
||||
screenMesh.material.needsUpdate = true;
|
||||
document.getElementById('loadVideoLabel').textContent = "Video Playing (Click to change)";
|
||||
|
||||
// Attempt to play the video (it must be muted/playsinline for auto-play in most browsers)
|
||||
video.play().catch(e => {
|
||||
console.error("Video playback failed (User interaction required):", e);
|
||||
document.getElementById('loadVideoLabel').textContent = "Playback blocked (Click screen to play)";
|
||||
// Handle browsers blocking auto-play by waiting for user interaction
|
||||
renderer.domElement.addEventListener('click', () => {
|
||||
video.play().then(() => {
|
||||
document.getElementById('loadVideoLabel').textContent = "Video Playing (Click to change)";
|
||||
}).catch(err => console.error("Manual playback failed:", err));
|
||||
}, { once: true });
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function updateStaticTexture() {
|
||||
if (!screenMesh || !isStaticActive) return;
|
||||
|
||||
const screenContext = screenMesh.userData.context;
|
||||
const screenCanvas = staticTexture.image;
|
||||
|
||||
const w = screenCanvas.width;
|
||||
const h = screenCanvas.height;
|
||||
const imageData = screenContext.getImageData(0, 0, w, h);
|
||||
const data = imageData.data;
|
||||
const numPixels = w * h;
|
||||
|
||||
// Time-based shift for "color bloom/misalignment" effect
|
||||
const time = Date.now() * 0.005;
|
||||
const rShift = Math.sin(time * 0.5) * 5;
|
||||
const gShift = Math.sin(time * 0.5 + 2) * 5;
|
||||
const bShift = Math.sin(time * 0.5 + 4) * 5;
|
||||
|
||||
// Generate random noise
|
||||
for (let i = 0; i < numPixels; i++) {
|
||||
const noise = Math.random() * 200 + 55;
|
||||
const dataIndex = i * 4;
|
||||
|
||||
// Apply color shift
|
||||
data[dataIndex] = Math.min(255, noise + rShift + Math.random() * 10);
|
||||
data[dataIndex + 1] = Math.min(255, noise + gShift + Math.random() * 10);
|
||||
data[dataIndex + 2] = Math.min(255, noise + bShift + Math.random() * 10);
|
||||
data[dataIndex + 3] = 255; // Alpha
|
||||
}
|
||||
|
||||
screenContext.putImageData(imageData, 0, 0);
|
||||
staticTexture.needsUpdate = true; // Update the static texture
|
||||
}
|
||||
|
||||
function addLights() {
|
||||
// Ambient light for general scene illumination
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Directional light from the front-top-right
|
||||
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);
|
||||
directionalLight1.position.set(5, 10, 10);
|
||||
scene.add(directionalLight1);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
if (isStaticActive) {
|
||||
updateStaticTexture();
|
||||
} else if (videoTexture) {
|
||||
// Ensure video texture updates when playing
|
||||
videoTexture.needsUpdate = true;
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// --- Event Handlers (Drag/Resize Logic) ---
|
||||
|
||||
function onWindowResize() {
|
||||
const container = document.getElementById('tv-container');
|
||||
camera.aspect = container.clientWidth / container.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
isDragging = true;
|
||||
previousMousePosition.x = event.clientX;
|
||||
previousMousePosition.y = event.clientY;
|
||||
}
|
||||
|
||||
function onTouchStart(event) {
|
||||
if (event.touches.length === 1) {
|
||||
isDragging = true;
|
||||
previousMousePosition.x = event.touches[0].clientX;
|
||||
previousMousePosition.y = event.touches[0].clientY;
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseMove(event) {
|
||||
if (!isDragging) return;
|
||||
|
||||
const deltaX = event.clientX - previousMousePosition.x;
|
||||
const deltaY = event.clientY - previousMousePosition.y;
|
||||
|
||||
const rotationSpeed = 0.005;
|
||||
|
||||
tvModel.rotation.y += deltaX * rotationSpeed;
|
||||
tvModel.rotation.x += deltaY * rotationSpeed;
|
||||
tvModel.rotation.x = Math.max(-Math.PI / 4, Math.min(Math.PI / 4, tvModel.rotation.x));
|
||||
|
||||
|
||||
previousMousePosition.x = event.clientX;
|
||||
previousMousePosition.y = event.clientY;
|
||||
}
|
||||
|
||||
function onTouchMove(event) {
|
||||
if (!isDragging || event.touches.length !== 1) return;
|
||||
|
||||
const touch = event.touches[0];
|
||||
const deltaX = touch.clientX - previousMousePosition.x;
|
||||
const deltaY = touch.clientY - previousMousePosition.y;
|
||||
|
||||
const rotationSpeed = 0.007;
|
||||
|
||||
tvModel.rotation.y += deltaX * rotationSpeed;
|
||||
tvModel.rotation.x += deltaY * rotationSpeed;
|
||||
tvModel.rotation.x = Math.max(-Math.PI / 4, Math.min(Math.PI / 4, tvModel.rotation.x));
|
||||
|
||||
previousMousePosition.x = touch.clientX;
|
||||
previousMousePosition.y = touch.clientY;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
|
||||
function onMouseUp(event) {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
|
||||
// Start the application when the window loads
|
||||
window.onload = function () {
|
||||
init();
|
||||
animate();
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Retro TV Video Player (3D)</title>
|
||||
<!-- Load Tailwind CSS for styling -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Load Three.js for 3D rendering -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Dark room aesthetic */
|
||||
body {
|
||||
background-color: #0d0d10;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
#info-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
z-index: 10;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.container {
|
||||
max-width: 90%;
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Hidden Video Element -->
|
||||
<!-- FIX: Changed hiding strategy from display:none to opacity:0 to ensure decoding still runs -->
|
||||
<video id="video" loop playsinline muted class="hidden"></video>
|
||||
|
||||
<!-- Overlay for User Interaction (File Picker) -->
|
||||
<div id="info-overlay" class="text-white opacity-100">
|
||||
<div class="container bg-gray-800 p-8 rounded-xl shadow-2xl border border-gray-700">
|
||||
<h1 class="text-3xl font-bold mb-4 text-gray-100">Retro TV Scene</h1>
|
||||
<p class="mb-6 text-gray-400">
|
||||
Load a local MP4 file to play it on the 3D TV screen. The room is dark and dusty.
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
accept="video/mp4"
|
||||
class="block w-full text-sm text-gray-300
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-lg file:border-0
|
||||
file:text-sm file:font-semibold
|
||||
file:bg-indigo-600 file:text-white
|
||||
hover:file:bg-indigo-700 cursor-pointer"
|
||||
>
|
||||
|
||||
<p id="status" class="mt-4 text-sm text-yellow-400">Awaiting video file...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3D Canvas will be injected here by Three.js -->
|
||||
|
||||
<script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer, tvScreen, video, videoTexture, dust, screenLight;
|
||||
let isVideoLoaded = false;
|
||||
|
||||
const container = document.body;
|
||||
const videoElement = document.getElementById('video');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const overlay = document.getElementById('info-overlay');
|
||||
const statusText = document.getElementById('status');
|
||||
|
||||
// --- Initialization ---
|
||||
function init() {
|
||||
// 1. Scene Setup (Dark, Ambient)
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x050508); // Deep blue-black
|
||||
|
||||
// 2. Camera Setup
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.5, 4);
|
||||
|
||||
// 3. Renderer Setup
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// 4. Lighting (Minimal and focused)
|
||||
const ambientLight = new THREE.AmbientLight(0x444444);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Light from the screen
|
||||
screenLight = new THREE.PointLight(0xffffff, 0, 10);
|
||||
screenLight.position.set(0, 1.3, 0.5);
|
||||
scene.add(screenLight);
|
||||
|
||||
// 5. Build the TV Set
|
||||
createTV(screenLight);
|
||||
|
||||
// 6. Create the Dust Particle System
|
||||
createDust();
|
||||
|
||||
// 7. Event Listeners
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
fileInput.addEventListener('change', loadVideoFile);
|
||||
|
||||
// Start the animation loop
|
||||
animate();
|
||||
}
|
||||
|
||||
// --- TV Modeling Function ---
|
||||
function createTV(light) {
|
||||
// --- The main TV cabinet (bulky) ---
|
||||
const cabinetGeometry = new THREE.BoxGeometry(2.8, 2, 1.5);
|
||||
const cabinetMaterial = new THREE.MeshLambertMaterial({
|
||||
color: 0x242429, // Dark gray/black
|
||||
flatShading: true
|
||||
});
|
||||
const cabinet = new THREE.Mesh(cabinetGeometry, cabinetMaterial);
|
||||
cabinet.position.y = 1.3; // Centered vertically
|
||||
|
||||
// --- Screen Frame (Recessed) ---
|
||||
const frameGeometry = new THREE.BoxGeometry(2.3, 1.6, 0.2);
|
||||
const frameMaterial = new THREE.MeshLambertMaterial({ color: 0x111111 });
|
||||
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
|
||||
frame.position.set(0, 1.3, 0.8); // Positioned slightly forward and covering the screen
|
||||
|
||||
// --- Screen Placeholder ---
|
||||
const screenGeometry = new THREE.PlaneGeometry(2.0, 1.3);
|
||||
const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); // Initially black
|
||||
tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
|
||||
tvScreen.position.set(0, 1.3, 0.96); // Just slightly in front of the frame
|
||||
|
||||
scene.add(cabinet, frame, tvScreen);
|
||||
}
|
||||
|
||||
// --- Dust Particle System Function ---
|
||||
function createDust() {
|
||||
const particleCount = 2000;
|
||||
const particlesGeometry = new THREE.BufferGeometry();
|
||||
const positions = [];
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
positions.push(
|
||||
(Math.random() - 0.5) * 15, // X
|
||||
Math.random() * 10, // Y (height)
|
||||
(Math.random() - 0.5) * 15 // Z
|
||||
);
|
||||
}
|
||||
particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
||||
|
||||
const particleMaterial = new THREE.PointsMaterial({
|
||||
color: 0xffffff,
|
||||
size: 0.015,
|
||||
transparent: true,
|
||||
opacity: 0.08,
|
||||
blending: THREE.AdditiveBlending
|
||||
});
|
||||
|
||||
dust = new THREE.Points(particlesGeometry, particleMaterial);
|
||||
scene.add(dust);
|
||||
}
|
||||
|
||||
// --- Video Loading Logic ---
|
||||
function loadVideoFile(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
statusText.textContent = 'Loading video...';
|
||||
|
||||
const fileURL = URL.createObjectURL(file);
|
||||
videoElement.src = fileURL;
|
||||
|
||||
// Ensure video is muted for reliable playback
|
||||
videoElement.muted = true;
|
||||
videoElement.load();
|
||||
|
||||
videoElement.onloadeddata = () => {
|
||||
// 1. Create the Three.js texture
|
||||
videoTexture = new THREE.VideoTexture(videoElement);
|
||||
videoTexture.minFilter = THREE.LinearFilter;
|
||||
videoTexture.magFilter = THREE.LinearFilter;
|
||||
videoTexture.format = THREE.RGBAFormat;
|
||||
|
||||
// FIX: Explicitly flag the texture for update immediately
|
||||
videoTexture.needsUpdate = true;
|
||||
|
||||
// 2. Apply the video texture to the screen mesh
|
||||
tvScreen.material.dispose();
|
||||
tvScreen.material = new THREE.MeshBasicMaterial({ map: videoTexture });
|
||||
tvScreen.material.needsUpdate = true;
|
||||
|
||||
// 3. Start playback and fade out the overlay
|
||||
videoElement.play().then(() => {
|
||||
isVideoLoaded = true;
|
||||
screenLight.intensity = 1.5; // Turn on screen light
|
||||
|
||||
overlay.style.opacity = 0;
|
||||
setTimeout(() => overlay.style.display = 'none', 500);
|
||||
statusText.textContent = 'Video playing.';
|
||||
}).catch(error => {
|
||||
statusText.textContent = 'Playback blocked by browser (Check console).';
|
||||
console.error('Playback Error: Could not start video playback.', error);
|
||||
});
|
||||
};
|
||||
|
||||
videoElement.onerror = (e) => {
|
||||
statusText.textContent = 'Error loading video file.';
|
||||
console.error('Video Load Error:', e);
|
||||
};
|
||||
}
|
||||
|
||||
// --- Animation Loop ---
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// 1. Dust animation: slow downward drift
|
||||
if (dust) {
|
||||
const positions = dust.geometry.attributes.position.array;
|
||||
for (let i = 1; i < positions.length; i += 3) {
|
||||
positions[i] -= 0.005;
|
||||
if (positions[i] < -2) {
|
||||
positions[i] = 8;
|
||||
}
|
||||
}
|
||||
dust.geometry.attributes.position.needsUpdate = true;
|
||||
}
|
||||
|
||||
// 2. Camera movement (subtle orbit for depth perception)
|
||||
const time = Date.now() * 0.001;
|
||||
camera.position.x = Math.cos(time) * 4;
|
||||
camera.position.z = Math.sin(time) * 4 + 2;
|
||||
camera.lookAt(0, 1.3, 0);
|
||||
|
||||
// 3. Update video texture (essential to grab the next frame)
|
||||
if (videoTexture) {
|
||||
videoTexture.needsUpdate = true;
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// --- Window Resize Handler ---
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
// Start everything on window load
|
||||
window.onload = init;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,719 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Retro TV Video Player (3D)</title>
|
||||
<!-- Load Tailwind CSS for styling --><script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
// Configure Tailwind for the button
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'tape-red': '#cc3333',
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Load Three.js for 3D rendering --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Dark room aesthetic */
|
||||
body {
|
||||
background-color: #0d0d10;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
/* Custom styles for the Load Tape button */
|
||||
.tape-button {
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.tape-button:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Hidden Video Element --><video id="video" playsinline muted class="hidden"></video>
|
||||
|
||||
<!-- Controls for loading video --><div id="controls" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 flex flex-col items-center space-y-2">
|
||||
<!-- Hidden File Input that will be triggered by the button --><input type="file" id="fileInput" accept="video/mp4" class="hidden" multiple>
|
||||
|
||||
<div class="flex space-x-4">
|
||||
<!-- Load Tapes Button --><button id="loadTapeButton" class="tape-button px-8 py-3 bg-tape-red text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150">
|
||||
Load tapes
|
||||
</button>
|
||||
|
||||
<!-- Next Tape Button (still allows manual skip) --><button id="nextTapeButton" class="tape-button px-6 py-3 bg-gray-600 text-white font-bold text-lg uppercase tracking-wider rounded-lg opacity-50 cursor-not-allowed" disabled>
|
||||
Next (0/0)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status message area --><p id="status" class="text-sm text-yellow-300 text-center font-mono opacity-80">Ready.</p>
|
||||
</div>
|
||||
|
||||
<!-- 3D Canvas will be injected here by Three.js --><script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer, tvScreen, videoTexture, dust, screenLight, lampLight;
|
||||
let isVideoLoaded = false;
|
||||
let videoUrls = []; // Array to hold all video URLs
|
||||
let currentVideoIndex = -1; // Index of the currently playing video
|
||||
|
||||
const originalLampIntensity = 1.5; // Base intensity for the flickering lamp
|
||||
const originalScreenIntensity = 1.5; // Base intensity for the screen glow
|
||||
|
||||
const container = document.body;
|
||||
const videoElement = document.getElementById('video');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const statusText = document.getElementById('status');
|
||||
const loadTapeButton = document.getElementById('loadTapeButton');
|
||||
const nextTapeButton = document.getElementById('nextTapeButton');
|
||||
|
||||
// --- Initialization ---
|
||||
function init() {
|
||||
// 1. Scene Setup (Dark, Ambient)
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x000000);
|
||||
|
||||
// 2. Camera Setup
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.5, 4);
|
||||
|
||||
// 3. Renderer Setup
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
// Enable shadows on the renderer
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// 4. Lighting (Minimal and focused)
|
||||
const ambientLight = new THREE.AmbientLight(0x444444);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Light from the screen (initially low intensity, will increase when video loads)
|
||||
screenLight = new THREE.PointLight(0xffffff, 0.1, 10);
|
||||
// UPDATED POSITION: Moved further forward (Z=1.2) to make the screen glow more directional
|
||||
screenLight.position.set(0, 1.7, 1.2);
|
||||
// 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 = 10;
|
||||
scene.add(screenLight);
|
||||
|
||||
// 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 (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 lampHelper = new THREE.PointLightHelper(lampLight, 0.1, 0x00ff00); // Green for lamp
|
||||
scene.add(lampHelper);
|
||||
}
|
||||
|
||||
// 9. Event Listeners
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
fileInput.addEventListener('change', loadVideoFile);
|
||||
|
||||
// Button logic
|
||||
loadTapeButton.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
nextTapeButton.addEventListener('click', playNextVideo);
|
||||
|
||||
// Auto-advance to the next video when the current one finishes.
|
||||
videoElement.addEventListener('ended', playNextVideo);
|
||||
|
||||
// Start the animation loop
|
||||
animate();
|
||||
}
|
||||
|
||||
// --- Procedural Texture Function ---
|
||||
function createStainTexture() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 256;
|
||||
canvas.height = 256;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// 1. Dark Gray Base
|
||||
ctx.fillStyle = '#444444'; // Base dark gray
|
||||
ctx.fillRect(0, 0, 256, 256);
|
||||
|
||||
// 2. Add Stains/Noise
|
||||
for (let i = 0; i < 70; i++) {
|
||||
// Random dark spots (simulating stains/irregularity)
|
||||
const x = Math.random() * 256;
|
||||
const y = Math.random() * 256;
|
||||
const radius = Math.random() * 25 + 10;
|
||||
const opacity = Math.random() * 0.4 + 0.1;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(10, 10, 10, ${opacity})`; // Very dark, transparent gray
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
texture.wrapS = THREE.RepeatWrapping;
|
||||
texture.wrapT = THREE.RepeatWrapping;
|
||||
texture.repeat.set(4, 4); // Repeat the texture on the large planes
|
||||
return texture;
|
||||
}
|
||||
|
||||
// --- Room Walls Function ---
|
||||
function createRoomWalls() {
|
||||
const wallTexture = createStainTexture();
|
||||
|
||||
// USING MeshPhongMaterial for specular highlights on walls
|
||||
const wallMaterial = new THREE.MeshPhongMaterial({
|
||||
map: wallTexture,
|
||||
side: THREE.FrontSide,
|
||||
shininess: 5,
|
||||
specular: 0x111111 // Subtle reflection
|
||||
});
|
||||
|
||||
const roomSize = 15;
|
||||
const roomHeight = 8;
|
||||
|
||||
// 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 = createStainTexture();
|
||||
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(-2.5, roomHeight * 0.5 + 0.5, windowZ);
|
||||
scene.add(windowPane);
|
||||
|
||||
// USING MeshPhongMaterial for the frame
|
||||
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x4d3934, shininess: 10 });
|
||||
|
||||
// Horizontal bar
|
||||
const hBarGeometry = new THREE.BoxGeometry(windowWidth + 0.1, 0.05, 0.05);
|
||||
const hBar = new THREE.Mesh(hBarGeometry, frameMaterial);
|
||||
hBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
|
||||
hBar.castShadow = true;
|
||||
scene.add(hBar);
|
||||
|
||||
// Vertical bar
|
||||
const vBarGeometry = new THREE.BoxGeometry(0.05, windowHeight + 0.1, 0.05);
|
||||
const vBar = new THREE.Mesh(vBarGeometry, frameMaterial);
|
||||
vBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
|
||||
vBar.castShadow = true;
|
||||
scene.add(vBar);
|
||||
}
|
||||
|
||||
// --- 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 floorMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a, shininess: 5 });
|
||||
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
||||
floor.rotation.x = -Math.PI / 2;
|
||||
floor.position.y = 0;
|
||||
floor.receiveShadow = true;
|
||||
scene.add(floor);
|
||||
|
||||
// --- 2. Table (TV stand) ---
|
||||
const tableGeometry = new THREE.BoxGeometry(4.0, 0.7, 2.5);
|
||||
const table = new THREE.Mesh(tableGeometry, darkWood);
|
||||
table.position.y = 0.35;
|
||||
table.castShadow = true;
|
||||
table.receiveShadow = true;
|
||||
scene.add(table);
|
||||
|
||||
// --- 3. The TV Set ---
|
||||
const cabinetGeometry = new THREE.BoxGeometry(2.8, 2, 1.5);
|
||||
const cabinet = new THREE.Mesh(cabinetGeometry, tvPlastic);
|
||||
cabinet.position.y = 1.7;
|
||||
cabinet.castShadow = true;
|
||||
cabinet.receiveShadow = true;
|
||||
scene.add(cabinet);
|
||||
|
||||
// Screen Frame
|
||||
const frameGeometry = new THREE.BoxGeometry(2.3, 1.6, 0.2);
|
||||
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 20 });
|
||||
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
|
||||
frame.position.set(0, 1.7, 0.68);
|
||||
frame.castShadow = true;
|
||||
frame.receiveShadow = true;
|
||||
scene.add(frame);
|
||||
|
||||
// --- 4. Curved Screen (CRT Effect) ---
|
||||
const screenRadius = 3.0; // Radius for the subtle curve
|
||||
const screenWidth = 2.3;
|
||||
const screenHeight = 1.5;
|
||||
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, 1.7, -2);
|
||||
scene.add(tvScreen);
|
||||
|
||||
|
||||
// --- 5. Lamp (On the table, right side) ---
|
||||
const lampBase = new THREE.CylinderGeometry(0.1, 0.2, 0.1, 12);
|
||||
const lampPole = new THREE.CylinderGeometry(0.05, 0.05, 0.6, 8);
|
||||
const lampShade = new THREE.ConeGeometry(0.3, 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;
|
||||
|
||||
poleMesh.position.y = 0.3;
|
||||
shadeMesh.position.y = 0.8 + 0.1;
|
||||
shadeMesh.rotation.x = Math.PI;
|
||||
|
||||
const lampGroup = new THREE.Group();
|
||||
lampGroup.add(baseMesh, poleMesh, shadeMesh);
|
||||
lampGroup.position.set(2.5, 0.7, -0.6);
|
||||
|
||||
// Lamp Light (Warm Glow) - Configured to cast shadows
|
||||
lampLight = new THREE.PointLight(0xffaa00, originalLampIntensity, 4);
|
||||
lampLight.position.set(2.5, 1.35, -0.6);
|
||||
lampLight.castShadow = true;
|
||||
// Optimization: Reduced map size and far plane to ease resource burden
|
||||
lampLight.shadow.mapSize.width = 512;
|
||||
lampLight.shadow.mapSize.height = 512;
|
||||
lampLight.shadow.camera.near = 0.1;
|
||||
lampLight.shadow.camera.far = 4; // Matches the light's attenuation distance (4)
|
||||
|
||||
// Crucially, add the lamp group and its light to the scene
|
||||
scene.add(lampGroup, lampLight);
|
||||
|
||||
|
||||
// --- 6. Vase with a Flower (On the table, left side) ---
|
||||
const vaseGeometry = new THREE.CylinderGeometry(0.2, 0.15, 0.4, 12);
|
||||
const vaseMaterial = new THREE.MeshPhongMaterial({ color: 0x356644, shininess: 15 });
|
||||
const vase = new THREE.Mesh(vaseGeometry, vaseMaterial);
|
||||
vase.position.set(0, -0.2, 0);
|
||||
vase.castShadow = true; vase.receiveShadow = true;
|
||||
|
||||
// Flower
|
||||
const flowerStem = new THREE.CylinderGeometry(0.01, 0.01, 0.3, 8);
|
||||
const flowerHead = new THREE.SphereGeometry(0.08, 10, 10);
|
||||
const stemMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22, shininess: 10 });
|
||||
const headMaterial = new THREE.MeshPhongMaterial({ color: 0xdd2222, shininess: 30 });
|
||||
|
||||
const stem = new THREE.Mesh(flowerStem, stemMaterial);
|
||||
stem.position.y = 0.1;
|
||||
const head = new THREE.Mesh(flowerHead, headMaterial);
|
||||
head.position.y = 0.3;
|
||||
stem.castShadow = true; head.castShadow = true;
|
||||
stem.receiveShadow = true; head.receiveShadow = true;
|
||||
|
||||
const flowerGroup = new THREE.Group();
|
||||
flowerGroup.add(stem, head, vase);
|
||||
flowerGroup.position.set(-1.65, 1.1, 1);
|
||||
|
||||
scene.add(flowerGroup);
|
||||
|
||||
// --- 7. Old Camera (On the table) ---
|
||||
const cameraBody = new THREE.BoxGeometry(0.4, 0.3, 0.2);
|
||||
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;
|
||||
|
||||
cameraMesh.add(lensMesh);
|
||||
cameraMesh.position.set(-2.0, 0.7 + 0.15, -0.4);
|
||||
cameraMesh.rotation.y = -Math.PI / 10;
|
||||
cameraMesh.castShadow = true; cameraMesh.receiveShadow = true;
|
||||
scene.add(cameraMesh);
|
||||
|
||||
// --- 8. Pizza Box (On the table) ---
|
||||
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.7 + 0.025, 0.8);
|
||||
pizzaBox.rotation.y = Math.PI / 5;
|
||||
pizzaBox.castShadow = true; pizzaBox.receiveShadow = true;
|
||||
scene.add(pizzaBox);
|
||||
}
|
||||
|
||||
// --- 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);
|
||||
}
|
||||
|
||||
// --- Helper function to format seconds into MM:SS ---
|
||||
function formatTime(seconds) {
|
||||
if (isNaN(seconds) || seconds === Infinity || seconds < 0) return '--:--';
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = Math.floor(seconds % 60);
|
||||
const paddedMinutes = String(minutes).padStart(2, '0');
|
||||
const paddedSeconds = String(remainingSeconds).padStart(2, '0');
|
||||
return `${paddedMinutes}:${paddedSeconds}`;
|
||||
}
|
||||
|
||||
// --- Helper function to update the control buttons' state and text ---
|
||||
function updateControls() {
|
||||
const total = videoUrls.length;
|
||||
const current = currentVideoIndex + 1;
|
||||
|
||||
if (total > 1) {
|
||||
nextTapeButton.disabled = false;
|
||||
nextTapeButton.classList.remove('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
|
||||
nextTapeButton.classList.add('bg-tape-red', 'hover:bg-red-700');
|
||||
} else {
|
||||
nextTapeButton.disabled = true;
|
||||
nextTapeButton.classList.add('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
|
||||
nextTapeButton.classList.remove('bg-tape-red', 'hover:bg-red-700');
|
||||
}
|
||||
// Always show the current tape count
|
||||
nextTapeButton.textContent = `Next (${current}/${total})`;
|
||||
}
|
||||
|
||||
|
||||
// --- Play video by index ---
|
||||
function playVideoByIndex(index) {
|
||||
if (index < 0 || index >= videoUrls.length) {
|
||||
statusText.textContent = 'End of playlist reached. Reload tapes to start again.';
|
||||
screenLight.intensity = 0.1; // Keep minimum intensity for shadow map
|
||||
return;
|
||||
}
|
||||
|
||||
currentVideoIndex = index;
|
||||
const url = videoUrls[index];
|
||||
|
||||
// Dispose of previous texture to free resources
|
||||
if (videoTexture) {
|
||||
videoTexture.dispose();
|
||||
videoTexture = null;
|
||||
}
|
||||
|
||||
videoElement.src = url;
|
||||
videoElement.muted = true;
|
||||
videoElement.load();
|
||||
|
||||
// Set loop property: only loop if it's the only video loaded
|
||||
videoElement.loop = 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
|
||||
statusText.textContent = `Playing tape ${currentVideoIndex + 1} of ${videoUrls.length}.`;
|
||||
updateControls();
|
||||
}).catch(error => {
|
||||
screenLight.intensity = 0.5; // Dim the light if playback fails
|
||||
statusText.textContent = `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
|
||||
statusText.textContent = `Error loading tape ${currentVideoIndex + 1}.`;
|
||||
console.error('Video Load Error:', e);
|
||||
};
|
||||
}
|
||||
|
||||
// --- Cycle to the next video ---
|
||||
function playNextVideo() {
|
||||
if (videoUrls.length > 0) {
|
||||
// Determine the next index, cycling back to 0 if we reach the end
|
||||
let nextIndex = (currentVideoIndex + 1) % videoUrls.length;
|
||||
playVideoByIndex(nextIndex);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// --- Video Loading Logic (handles multiple files) ---
|
||||
function loadVideoFile(event) {
|
||||
const files = event.target.files;
|
||||
if (files.length === 0) {
|
||||
statusText.textContent = '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) {
|
||||
statusText.textContent = 'No valid video files selected.';
|
||||
updateControls();
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. Start playback of the first video
|
||||
statusText.textContent = `Loaded ${videoUrls.length} tapes. Starting playback...`;
|
||||
playVideoByIndex(0);
|
||||
}
|
||||
|
||||
// --- Animation Loop ---
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// 1. Dust animation: slow downward drift
|
||||
if (dust) {
|
||||
const positions = dust.geometry.attributes.position.array;
|
||||
for (let i = 1; i < positions.length; i += 3) {
|
||||
positions[i] -= 0.005;
|
||||
if (positions[i] < -2) {
|
||||
positions[i] = 8;
|
||||
}
|
||||
}
|
||||
dust.geometry.attributes.position.needsUpdate = true;
|
||||
}
|
||||
|
||||
// 2. Camera movement (Gentle, random hovering)
|
||||
const globalTime = Date.now() * 0.00005;
|
||||
const lookAtTime = Date.now() * 0.00003;
|
||||
|
||||
const camAmplitude = 0.6;
|
||||
const lookAmplitude = 0.05;
|
||||
|
||||
// Base Camera Position in front of the TV
|
||||
const baseX = 0;
|
||||
const baseY = 1.5;
|
||||
const baseZ = 4;
|
||||
|
||||
// Base LookAt target (Center of the screen)
|
||||
const baseTargetX = 0;
|
||||
const baseTargetY = 1.7;
|
||||
const baseTargetZ = 0.96;
|
||||
|
||||
// Camera Position Offsets (Drift)
|
||||
const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
|
||||
const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.4;
|
||||
|
||||
camera.position.x = baseX + camOffsetX;
|
||||
camera.position.y = baseY + camOffsetY;
|
||||
camera.position.z = baseZ;
|
||||
|
||||
// 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)
|
||||
lampLight.intensity = originalLampIntensity * (0.3 + Math.random() * 0.7);
|
||||
} else if (lampLight.intensity < originalLampIntensity) {
|
||||
// Smoothly restore original intensity
|
||||
lampLight.intensity = THREE.MathUtils.lerp(lampLight.intensity, originalLampIntensity, restoreRate);
|
||||
}
|
||||
|
||||
// 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) * 0.7;
|
||||
// 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.002;
|
||||
const radius = 0.05; // Small circle radius (5 cm)
|
||||
const centerX = 0;
|
||||
const centerY = 1.7;
|
||||
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);
|
||||
statusText.textContent =
|
||||
`Tape ${currentVideoIndex + 1} of ${videoUrls.length}. Time: ${currentTime} / ${duration}`;
|
||||
}
|
||||
}
|
||||
|
||||
// RENDER!
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// --- Window Resize Handler ---
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
// Start everything on window load
|
||||
window.onload = init;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,731 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Retro TV Video Player (3D)</title>
|
||||
<!-- Load Tailwind CSS for styling --><script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
// Configure Tailwind for the button
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'tape-red': '#cc3333',
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Load Three.js for 3D rendering --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
/* Dark room aesthetic */
|
||||
body {
|
||||
background-color: #0d0d10;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
/* Custom styles for the Load Tape button */
|
||||
.tape-button {
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.tape-button:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Hidden Video Element --><video id="video" playsinline muted class="hidden"></video>
|
||||
|
||||
<!-- Controls for loading video --><div id="controls" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 flex flex-col items-center space-y-2">
|
||||
<!-- Hidden File Input that will be triggered by the button --><input type="file" id="fileInput" accept="video/mp4" class="hidden" multiple>
|
||||
|
||||
<div class="flex space-x-4">
|
||||
<!-- Load Tapes Button --><button id="loadTapeButton" class="tape-button px-8 py-3 bg-tape-red text-white font-bold text-lg uppercase tracking-wider rounded-lg hover:bg-red-700 transition duration-150">
|
||||
Load tapes
|
||||
</button>
|
||||
|
||||
<!-- Next Tape Button (still allows manual skip) --><button id="nextTapeButton" class="tape-button px-6 py-3 bg-gray-600 text-white font-bold text-lg uppercase tracking-wider rounded-lg opacity-50 cursor-not-allowed" disabled>
|
||||
Next (0/0)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status message area --><p id="status" class="text-sm text-yellow-300 text-center font-mono opacity-80">Ready.</p>
|
||||
</div>
|
||||
|
||||
<!-- 3D Canvas will be injected here by Three.js --><script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer, tvScreen, videoTexture, dust, screenLight, lampLight;
|
||||
let isVideoLoaded = false;
|
||||
let videoUrls = []; // Array to hold all video URLs
|
||||
let currentVideoIndex = -1; // Index of the currently playing video
|
||||
let vcrDisplayTexture; // Global reference for the VCR canvas texture
|
||||
let vcrDisplayMesh;
|
||||
|
||||
const originalLampIntensity = 1.5; // Base intensity for the flickering lamp
|
||||
const originalScreenIntensity = 1.5; // Base intensity for the screen glow
|
||||
|
||||
const container = document.body;
|
||||
const videoElement = document.getElementById('video');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const statusText = document.getElementById('status');
|
||||
const loadTapeButton = document.getElementById('loadTapeButton');
|
||||
const nextTapeButton = document.getElementById('nextTapeButton');
|
||||
|
||||
// --- Initialization ---
|
||||
function init() {
|
||||
// 1. Scene Setup (Dark, Ambient)
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x000000);
|
||||
|
||||
// 2. Camera Setup
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.5, 4);
|
||||
|
||||
// 3. Renderer Setup
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
// Enable shadows on the renderer
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
|
||||
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// 4. Lighting (Minimal and focused)
|
||||
const ambientLight = new THREE.AmbientLight(0x444444);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Light from the screen (initially low intensity, will increase when video loads)
|
||||
screenLight = new THREE.PointLight(0xffffff, 0.1, 10);
|
||||
// UPDATED POSITION: Moved further forward (Z=1.2) to make the screen glow more directional
|
||||
screenLight.position.set(0, 1.7, 1.2);
|
||||
// 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 = 10;
|
||||
scene.add(screenLight);
|
||||
|
||||
// 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 (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 lampHelper = new THREE.PointLightHelper(lampLight, 0.1, 0x00ff00); // Green for lamp
|
||||
scene.add(lampHelper);
|
||||
}
|
||||
|
||||
// 9. Event Listeners
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
fileInput.addEventListener('change', loadVideoFile);
|
||||
|
||||
// Button logic
|
||||
loadTapeButton.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
nextTapeButton.addEventListener('click', playNextVideo);
|
||||
|
||||
// Auto-advance to the next video when the current one finishes.
|
||||
videoElement.addEventListener('ended', playNextVideo);
|
||||
|
||||
// Start the animation loop
|
||||
animate();
|
||||
}
|
||||
|
||||
// --- Procedural Texture Function (for walls) ---
|
||||
function createStainTexture() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 256;
|
||||
canvas.height = 256;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// 1. Dark Gray Base
|
||||
ctx.fillStyle = '#444444'; // Base dark gray
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 2. Add Stains/Noise
|
||||
for (let i = 0; i < 70; i++) {
|
||||
// Random dark spots (simulating stains/irregularity)
|
||||
const x = Math.random() * canvas.width;
|
||||
const y = Math.random() * canvas.height;
|
||||
const radius = Math.random() * 25 + 10;
|
||||
const opacity = Math.random() * 0.4 + 0.1;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(10, 10, 10, ${opacity})`; // Very dark, transparent gray
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
texture.wrapS = THREE.RepeatWrapping;
|
||||
texture.wrapT = THREE.RepeatWrapping;
|
||||
texture.repeat.set(4, 4); // Repeat the texture on the large planes
|
||||
return texture;
|
||||
}
|
||||
|
||||
// --- Room Walls Function (omitted for brevity, assume content is stable) ---
|
||||
function createRoomWalls() {
|
||||
const wallTexture = createStainTexture();
|
||||
const wallMaterial = new THREE.MeshPhongMaterial({
|
||||
map: wallTexture,
|
||||
side: THREE.FrontSide,
|
||||
shininess: 5,
|
||||
specular: 0x111111
|
||||
});
|
||||
|
||||
const roomSize = 15;
|
||||
const roomHeight = 8;
|
||||
|
||||
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);
|
||||
|
||||
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);
|
||||
|
||||
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);
|
||||
|
||||
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);
|
||||
|
||||
const ceilingGeometry = new THREE.PlaneGeometry(roomSize, roomSize);
|
||||
const ceilingTexture = createStainTexture();
|
||||
ceilingTexture.repeat.set(4, 4);
|
||||
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);
|
||||
|
||||
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(-2.5, roomHeight * 0.5 + 0.5, windowZ);
|
||||
scene.add(windowPane);
|
||||
|
||||
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x4d3934, shininess: 10 });
|
||||
|
||||
const hBarGeometry = new THREE.BoxGeometry(windowWidth + 0.1, 0.05, 0.05);
|
||||
const hBar = new THREE.Mesh(hBarGeometry, frameMaterial);
|
||||
hBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
|
||||
hBar.castShadow = true;
|
||||
scene.add(hBar);
|
||||
|
||||
const vBarGeometry = new THREE.BoxGeometry(0.05, windowHeight + 0.1, 0.05);
|
||||
const vBar = new THREE.Mesh(vBarGeometry, frameMaterial);
|
||||
vBar.position.set(windowPane.position.x, windowPane.position.y, windowZ);
|
||||
vBar.castShadow = true;
|
||||
scene.add(vBar);
|
||||
}
|
||||
|
||||
// --- VCR Display Functions ---
|
||||
|
||||
function createVcrDisplay() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 128;
|
||||
canvas.height = 32;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Initial draw: set dark background
|
||||
ctx.fillStyle = '#1a1a1a';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
vcrDisplayTexture = new THREE.CanvasTexture(canvas);
|
||||
vcrDisplayTexture.needsUpdate = true;
|
||||
|
||||
// Create the display mesh (small plane)
|
||||
const displayGeometry = new THREE.PlaneGeometry(0.35, 0.1);
|
||||
const displayMaterial = new THREE.MeshBasicMaterial({
|
||||
map: vcrDisplayTexture,
|
||||
side: THREE.FrontSide,
|
||||
color: 0xffffff,
|
||||
transparent: true,
|
||||
// Initial high emissive/color will be set in animate for debugging visibility
|
||||
emissive: 0xff0000,
|
||||
emissiveIntensity: 0.1,
|
||||
name: 'VCR_Display_Material'
|
||||
});
|
||||
|
||||
const displayMesh = new THREE.Mesh(displayGeometry, displayMaterial);
|
||||
return displayMesh;
|
||||
}
|
||||
|
||||
function updateVcrDisplay(currentTime) {
|
||||
if (!vcrDisplayTexture) return;
|
||||
|
||||
const canvas = vcrDisplayTexture.image;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const timeString = formatTime(currentTime);
|
||||
const isNotPlaying = timeString === '00:00' && !isVideoLoaded;
|
||||
|
||||
// Clear display (use a slightly brighter background for contrast)
|
||||
ctx.fillStyle = '#1a1a1a';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw the time (MM:SS) - increased font size for visibility
|
||||
ctx.font = 'bold 28px "monospace"';
|
||||
ctx.textAlign = 'right';
|
||||
|
||||
// If not playing, use a bright reddish color for initial visibility/highlighting
|
||||
ctx.fillStyle = isNotPlaying ? '#ff6666' : '#00ff44'; // Red glow if idle, green if playing
|
||||
|
||||
// Center the text vertically and place it to the right
|
||||
ctx.fillText(timeString, canvas.width - 5, canvas.height / 2 + 10);
|
||||
|
||||
vcrDisplayTexture.needsUpdate = true;
|
||||
}
|
||||
|
||||
|
||||
// --- VCR Model Function ---
|
||||
function createVcr() {
|
||||
// VCR Body (Metallic Gray)
|
||||
const vcrBodyGeometry = new THREE.BoxGeometry(1.0, 0.2, 0.7);
|
||||
const vcrBodyMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x222222, // Dark metallic gray
|
||||
shininess: 70,
|
||||
specular: 0x444444
|
||||
});
|
||||
|
||||
const vcrBody = new THREE.Mesh(vcrBodyGeometry, vcrBodyMaterial);
|
||||
|
||||
// Cassette Slot / Front Face (Black)
|
||||
const slotGeometry = new THREE.BoxGeometry(0.9, 0.05, 0.01);
|
||||
const slotMaterial = new THREE.MeshPhongMaterial({
|
||||
color: 0x0a0a0a, // Deep black
|
||||
shininess: 5,
|
||||
specular: 0x111111
|
||||
});
|
||||
const slotMesh = new THREE.Mesh(slotGeometry, slotMaterial);
|
||||
// Position on the front face (VCR depth is 0.7)
|
||||
slotMesh.position.set(0, -0.05, 0.35 + 0.005);
|
||||
|
||||
// VCR Display Mesh (named 'vcr_display_mesh' inside the function)
|
||||
const displayMesh = createVcrDisplay();
|
||||
vcrDisplayMesh = displayMesh;
|
||||
// Position relative to the center of the VCR front face
|
||||
displayMesh.position.z = 0.35 + 0.006; // Push forward slightly more than the slot
|
||||
displayMesh.position.x = 0.3; // Right side of the VCR
|
||||
displayMesh.position.y = 0.03; // Slightly higher than center
|
||||
|
||||
// VCR Group
|
||||
const vcrGroup = new THREE.Group();
|
||||
vcrGroup.add(vcrBody, slotMesh, displayMesh);
|
||||
|
||||
// Position VCR on the table, to the left of the TV
|
||||
vcrGroup.position.set(-1.4, 0.7 + 0.1, 0.3);
|
||||
vcrGroup.castShadow = true;
|
||||
vcrGroup.receiveShadow = true;
|
||||
|
||||
return vcrGroup;
|
||||
}
|
||||
|
||||
// --- Scene Modeling Function (omitted for brevity, assume content is stable) ---
|
||||
function createSceneObjects() {
|
||||
// --- Materials (MeshPhongMaterial) ---
|
||||
const darkWood = new THREE.MeshPhongMaterial({ color: 0x3d352e, shininess: 10 });
|
||||
const tvPlastic = new THREE.MeshPhongMaterial({
|
||||
color: 0x242429, flatShading: true, shininess: 40, specular: 0x444444
|
||||
});
|
||||
|
||||
// 1. Floor
|
||||
const floorGeometry = new THREE.PlaneGeometry(20, 20);
|
||||
const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a, shininess: 5 });
|
||||
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
||||
floor.rotation.x = -Math.PI / 2;
|
||||
floor.position.y = 0;
|
||||
floor.receiveShadow = true;
|
||||
scene.add(floor);
|
||||
|
||||
// 2. Table (TV stand)
|
||||
const tableGeometry = new THREE.BoxGeometry(4.0, 0.7, 2.5);
|
||||
const table = new THREE.Mesh(tableGeometry, darkWood);
|
||||
table.position.y = 0.35;
|
||||
table.castShadow = true; table.receiveShadow = true;
|
||||
scene.add(table);
|
||||
|
||||
// 3. The TV Set
|
||||
const cabinetGeometry = new THREE.BoxGeometry(2.8, 2, 1.5);
|
||||
const cabinet = new THREE.Mesh(cabinetGeometry, tvPlastic);
|
||||
cabinet.position.y = 1.7;
|
||||
cabinet.castShadow = true; cabinet.receiveShadow = true;
|
||||
scene.add(cabinet);
|
||||
|
||||
// Screen Frame
|
||||
const frameGeometry = new THREE.BoxGeometry(2.3, 1.6, 0.2);
|
||||
const frameMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 20 });
|
||||
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
|
||||
frame.position.set(0, 1.7, 0.8);
|
||||
frame.castShadow = true; frame.receiveShadow = true;
|
||||
scene.add(frame);
|
||||
|
||||
// 4. Curved Screen (CRT Effect)
|
||||
const screenRadius = 3.0; const screenWidth = 2.0; const screenHeight = 1.3;
|
||||
const thetaLength = screenWidth / screenRadius;
|
||||
const screenGeometry = new THREE.CylinderGeometry(
|
||||
screenRadius, screenRadius, screenHeight, 32, 1, true,
|
||||
(Math.PI / 2) - (thetaLength / 2), thetaLength
|
||||
);
|
||||
screenGeometry.rotateX(Math.PI / 2); screenGeometry.rotateY(Math.PI / 2);
|
||||
const screenMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
|
||||
tvScreen = new THREE.Mesh(screenGeometry, screenMaterial);
|
||||
tvScreen.position.set(0, 1.7, 0.96);
|
||||
scene.add(tvScreen);
|
||||
|
||||
// 5. VCR
|
||||
scene.add(createVcr());
|
||||
|
||||
// 6. Lamp
|
||||
const darkMetal = new THREE.MeshPhongMaterial({ color: 0x6b6b6b, shininess: 80, specular: 0x888888 });
|
||||
const lampBase = new THREE.CylinderGeometry(0.1, 0.2, 0.1, 12);
|
||||
const lampPole = new THREE.CylinderGeometry(0.05, 0.05, 0.6, 8);
|
||||
const lampShade = new THREE.ConeGeometry(0.3, 0.4, 16);
|
||||
const baseMesh = new THREE.Mesh(lampBase, darkMetal);
|
||||
const poleMesh = new THREE.Mesh(lampPole, darkMetal);
|
||||
const shadeMesh = new THREE.Mesh(lampShade, darkMetal);
|
||||
baseMesh.castShadow = true; baseMesh.receiveShadow = true;
|
||||
poleMesh.castShadow = true; poleMesh.receiveShadow = true;
|
||||
shadeMesh.castShadow = true; shadeMesh.receiveShadow = true;
|
||||
poleMesh.position.y = 0.3; shadeMesh.position.y = 0.8 + 0.1; shadeMesh.rotation.x = Math.PI;
|
||||
const lampGroup = new THREE.Group();
|
||||
lampGroup.add(baseMesh, poleMesh, shadeMesh);
|
||||
lampGroup.position.set(2.5, 0.7, -0.6);
|
||||
lampLight = new THREE.PointLight(0xffaa00, originalLampIntensity, 4);
|
||||
lampLight.position.set(2.5, 1.35, -0.6);
|
||||
lampLight.castShadow = true;
|
||||
lampLight.shadow.mapSize.width = 512; lampLight.shadow.mapSize.height = 512;
|
||||
lampLight.shadow.camera.near = 0.1; lampLight.shadow.camera.far = 4;
|
||||
scene.add(lampGroup, lampLight);
|
||||
|
||||
// 7. Vase with a Flower
|
||||
const vaseGeometry = new THREE.CylinderGeometry(0.2, 0.15, 0.4, 12);
|
||||
const vaseMaterial = new THREE.MeshPhongMaterial({ color: 0x356644, shininess: 15 });
|
||||
const vase = new THREE.Mesh(vaseGeometry, vaseMaterial);
|
||||
vase.position.set(1.5, 0.7 + 0.2, 0.8);
|
||||
vase.castShadow = true; vase.receiveShadow = true;
|
||||
const flowerStem = new THREE.CylinderGeometry(0.01, 0.01, 0.3, 8);
|
||||
const flowerHead = new THREE.SphereGeometry(0.08, 10, 10);
|
||||
const stemMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22, shininess: 10 });
|
||||
const headMaterial = new THREE.MeshPhongMaterial({ color: 0xdd2222, shininess: 30 });
|
||||
const stem = new THREE.Mesh(flowerStem, stemMaterial);
|
||||
stem.position.y = 0.1;
|
||||
const head = new THREE.Mesh(flowerHead, headMaterial);
|
||||
head.position.y = 0.3;
|
||||
stem.castShadow = true; head.castShadow = true;
|
||||
stem.receiveShadow = true; head.receiveShadow = true;
|
||||
const flowerGroup = new THREE.Group();
|
||||
flowerGroup.add(stem, head);
|
||||
flowerGroup.position.set(1.5, 1.1, 0.8);
|
||||
scene.add(vase, flowerGroup);
|
||||
|
||||
// 8. Old Camera
|
||||
const cameraBody = new THREE.BoxGeometry(0.4, 0.3, 0.2);
|
||||
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;
|
||||
cameraMesh.add(lensMesh);
|
||||
cameraMesh.position.set(2.0, 0.7 + 0.15, -0.4);
|
||||
cameraMesh.rotation.y = -Math.PI / 10;
|
||||
cameraMesh.castShadow = true; cameraMesh.receiveShadow = true;
|
||||
scene.add(cameraMesh);
|
||||
|
||||
// 9. 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.0, 0.7 + 0.025, -0.8);
|
||||
pizzaBox.rotation.y = Math.PI / 5;
|
||||
pizzaBox.castShadow = true; pizzaBox.receiveShadow = true;
|
||||
scene.add(pizzaBox);
|
||||
}
|
||||
|
||||
// --- Dust Particle System Function (omitted for brevity, assume content is stable) ---
|
||||
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
|
||||
);
|
||||
}
|
||||
particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
||||
const particleMaterial = new THREE.PointsMaterial({
|
||||
color: 0xffffff,
|
||||
size: 0.015,
|
||||
transparent: true,
|
||||
opacity: 0.08,
|
||||
blending: THREE.AdditiveBlending
|
||||
});
|
||||
dust = new THREE.Points(particlesGeometry, particleMaterial);
|
||||
scene.add(dust);
|
||||
}
|
||||
|
||||
// --- Helper function to format seconds into MM:SS ---
|
||||
function formatTime(seconds) {
|
||||
if (isNaN(seconds) || seconds === Infinity || seconds < 0) return '00:00'; // Default to 00:00 if invalid
|
||||
const totalSeconds = Math.floor(seconds);
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const remainingSeconds = totalSeconds % 60;
|
||||
const paddedMinutes = String(minutes).padStart(2, '0');
|
||||
const paddedSeconds = String(remainingSeconds).padStart(2, '0');
|
||||
return `${paddedMinutes}:${paddedSeconds}`;
|
||||
}
|
||||
|
||||
// --- Helper function to update the control buttons' state and text ---
|
||||
function updateControls() {
|
||||
const total = videoUrls.length;
|
||||
const current = currentVideoIndex + 1;
|
||||
|
||||
if (total > 1) {
|
||||
nextTapeButton.disabled = false;
|
||||
nextTapeButton.classList.remove('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
|
||||
nextTapeButton.classList.add('bg-tape-red', 'hover:bg-red-700');
|
||||
} else {
|
||||
nextTapeButton.disabled = true;
|
||||
nextTapeButton.classList.add('opacity-50', 'cursor-not-allowed', 'bg-gray-600');
|
||||
nextTapeButton.classList.remove('bg-tape-red', 'hover:bg-red-700');
|
||||
}
|
||||
// Always show the current tape count
|
||||
nextTapeButton.textContent = `Next (${current}/${total})`;
|
||||
}
|
||||
|
||||
|
||||
// --- Play video by index ---
|
||||
function playVideoByIndex(index) {
|
||||
if (index < 0 || index >= videoUrls.length) {
|
||||
statusText.textContent = 'End of playlist reached. Reload tapes to start again.';
|
||||
updateVcrDisplay(0);
|
||||
screenLight.intensity = 0.1;
|
||||
return;
|
||||
}
|
||||
|
||||
currentVideoIndex = index;
|
||||
const url = videoUrls[index];
|
||||
|
||||
if (videoTexture) {
|
||||
videoTexture.dispose();
|
||||
videoTexture = null;
|
||||
}
|
||||
|
||||
videoElement.src = url;
|
||||
videoElement.muted = true;
|
||||
videoElement.load();
|
||||
|
||||
videoElement.loop = videoUrls.length === 1;
|
||||
|
||||
|
||||
videoElement.onloadeddata = () => {
|
||||
videoTexture = new THREE.VideoTexture(videoElement);
|
||||
videoTexture.minFilter = THREE.LinearFilter;
|
||||
videoTexture.magFilter = THREE.LinearFilter;
|
||||
videoTexture.format = THREE.RGBAFormat;
|
||||
videoTexture.needsUpdate = true;
|
||||
|
||||
if (tvScreen.material.map) tvScreen.material.map.dispose();
|
||||
tvScreen.material.dispose();
|
||||
tvScreen.material = new THREE.MeshBasicMaterial({ map: videoTexture, name: 'Screen_Playing_Material' });
|
||||
tvScreen.material.needsUpdate = true;
|
||||
|
||||
videoElement.play().then(() => {
|
||||
isVideoLoaded = true;
|
||||
screenLight.intensity = originalScreenIntensity;
|
||||
statusText.textContent = `Playing tape ${currentVideoIndex + 1} of ${videoUrls.length}.`;
|
||||
updateControls();
|
||||
}).catch(error => {
|
||||
isVideoLoaded = false;
|
||||
screenLight.intensity = 0.5;
|
||||
statusText.textContent = `Playback blocked for tape ${currentVideoIndex + 1}. Click Load or Next Tape.`;
|
||||
console.error('Playback Error: Could not start video playback.', error);
|
||||
});
|
||||
};
|
||||
|
||||
videoElement.onerror = (e) => {
|
||||
isVideoLoaded = false;
|
||||
screenLight.intensity = 0.1;
|
||||
statusText.textContent = `Error loading tape ${currentVideoIndex + 1}.`;
|
||||
console.error('Video Load Error:', e);
|
||||
};
|
||||
}
|
||||
|
||||
// --- Cycle to the next video ---
|
||||
function playNextVideo() {
|
||||
if (videoUrls.length > 0) {
|
||||
let nextIndex = (currentVideoIndex + 1) % videoUrls.length;
|
||||
playVideoByIndex(nextIndex);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// --- Video Loading Logic (handles multiple files) ---
|
||||
function loadVideoFile(event) {
|
||||
const files = event.target.files;
|
||||
if (files.length === 0) {
|
||||
statusText.textContent = 'File selection cancelled.';
|
||||
return;
|
||||
}
|
||||
|
||||
videoUrls.forEach(url => URL.revokeObjectURL(url));
|
||||
videoUrls = [];
|
||||
|
||||
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) {
|
||||
statusText.textContent = 'No valid video files selected.';
|
||||
updateControls();
|
||||
return;
|
||||
}
|
||||
|
||||
statusText.textContent = `Loaded ${videoUrls.length} tapes. Starting playback...`;
|
||||
playVideoByIndex(0);
|
||||
}
|
||||
|
||||
// --- Animation Loop ---
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// 1. Dust animation: slow downward drift (omitted for brevity)
|
||||
if (dust) {
|
||||
const positions = dust.geometry.attributes.position.array;
|
||||
for (let i = 1; i < positions.length; i += 3) {
|
||||
positions[i] -= 0.005;
|
||||
if (positions[i] < -2) { positions[i] = 8; }
|
||||
}
|
||||
dust.geometry.attributes.position.needsUpdate = true;
|
||||
}
|
||||
|
||||
// 2. Camera movement (omitted for brevity)
|
||||
const globalTime = Date.now() * 0.00005;
|
||||
const lookAtTime = Date.now() * 0.00003;
|
||||
const camAmplitude = 0.6; const lookAmplitude = 0.05;
|
||||
const baseX = 0; const baseY = 1.5; const baseZ = 4;
|
||||
const baseTargetX = 0; const baseTargetY = 1.7; const baseTargetZ = 0.96;
|
||||
const camOffsetX = Math.sin(globalTime * 3.1) * camAmplitude;
|
||||
const camOffsetY = Math.cos(globalTime * 2.5) * camAmplitude * 0.4;
|
||||
camera.position.x = baseX + camOffsetX;
|
||||
camera.position.y = baseY + camOffsetY;
|
||||
camera.position.z = baseZ;
|
||||
const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude;
|
||||
const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
|
||||
camera.lookAt(baseTargetX + lookOffsetX, baseTargetY + lookOffsetY, baseTargetZ);
|
||||
|
||||
// 3. Lamp Flicker Effect (omitted for brevity)
|
||||
const flickerChance = 0.995;
|
||||
const restoreRate = 0.15;
|
||||
if (Math.random() > flickerChance) {
|
||||
lampLight.intensity = originalLampIntensity * (0.3 + Math.random() * 0.7);
|
||||
} else if (lampLight.intensity < originalLampIntensity) {
|
||||
lampLight.intensity = THREE.MathUtils.lerp(lampLight.intensity, originalLampIntensity, restoreRate);
|
||||
}
|
||||
|
||||
// 4. Screen Light Pulse and VCR Highlight/Update Effect
|
||||
|
||||
if (isVideoLoaded && screenLight.intensity > 0) {
|
||||
// A. Screen Pulse Effect (omitted for brevity)
|
||||
const pulseTarget = originalScreenIntensity + (Math.random() - 0.5) * 0.3;
|
||||
screenLight.intensity = THREE.MathUtils.lerp(screenLight.intensity, pulseTarget, 0.1);
|
||||
const lightTime = Date.now() * 0.002;
|
||||
const radius = 0.05;
|
||||
const centerX = 0; const centerY = 1.7; const centerZ = 1.2;
|
||||
screenLight.position.x = centerX + Math.cos(lightTime) * radius;
|
||||
screenLight.position.y = centerY + Math.sin(lightTime * 1.5) * radius * 0.5;
|
||||
screenLight.position.z = centerZ;
|
||||
|
||||
// B. VCR NORMAL STATE (Playing video)
|
||||
if (vcrDisplayMesh) {
|
||||
//vcrDisplayMesh.material.emissive.setHex(0x00ff44); // Green glow
|
||||
//vcrDisplayMesh.material.emissiveIntensity = 0.1;
|
||||
}
|
||||
|
||||
// C. Update time display in the animation loop
|
||||
if (videoTexture && videoElement.readyState >= 3) {
|
||||
updateVcrDisplay(videoElement.currentTime);
|
||||
const formattedCurrentTime = formatTime(videoElement.currentTime);
|
||||
const formattedDuration = formatTime(videoElement.duration);
|
||||
statusText.textContent =
|
||||
`Tape ${currentVideoIndex + 1} of ${videoUrls.length}. Time: ${formattedCurrentTime} / ${formattedDuration}`;
|
||||
}
|
||||
|
||||
} else {
|
||||
// VCR DEBUG HIGHLIGHT STATE (Not playing video)
|
||||
updateVcrDisplay(0); // Ensure '00:00' is drawn
|
||||
if (vcrDisplayMesh) {
|
||||
// This is the highlight: Bright Red Glow to locate the display
|
||||
//vcrDisplayMesh.material.emissive.setHex(0xff0000);
|
||||
//vcrDisplayMesh.material.emissiveIntensity = 3.0; // Very intense glow
|
||||
}
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// --- Window Resize Handler ---
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
// Start everything on window load
|
||||
window.onload = init;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,380 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VCR Playback Time (3D)</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #0d0d10;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
// --- Global Variables ---
|
||||
let scene, camera, renderer, vcrDisplayTexture;
|
||||
let vcrDisplayLight;
|
||||
let simulatedPlaybackTime = 0;
|
||||
let lastUpdateTime = 0;
|
||||
let blinkState = false; // For blinking colon
|
||||
let lastBlinkToggleTime = 0;
|
||||
|
||||
// --- Segment Display Definitions ---
|
||||
|
||||
// Define which segments (indexed 0-6: A, B, C, D, E, F, G) are active for each digit
|
||||
// A=Top, B=TR, C=BR, D=Bottom, E=BL, F=TL, G=Middle
|
||||
const SEGMENTS = {
|
||||
'0': [1, 1, 1, 1, 1, 1, 0],
|
||||
'1': [0, 1, 1, 0, 0, 0, 0],
|
||||
'2': [1, 1, 0, 1, 1, 0, 1],
|
||||
'3': [1, 1, 1, 1, 0, 0, 1],
|
||||
'4': [0, 1, 1, 0, 0, 1, 1],
|
||||
'5': [1, 0, 1, 1, 0, 1, 1],
|
||||
'6': [1, 0, 1, 1, 1, 1, 1],
|
||||
'7': [1, 1, 1, 0, 0, 0, 0],
|
||||
'8': [1, 1, 1, 1, 1, 1, 1],
|
||||
'9': [1, 1, 1, 1, 0, 1, 1],
|
||||
' ': [0, 0, 0, 0, 0, 0, 0]
|
||||
};
|
||||
|
||||
const SEG_THICKNESS = 3; // Thickness of the segment line in canvas pixels
|
||||
const SEG_PADDING = 2; // Padding within a digit segment's box
|
||||
|
||||
// Colors for active and inactive segments
|
||||
const COLOR_ACTIVE = '#00ff44'; // Bright Fluorescent Green
|
||||
const COLOR_INACTIVE = '#1a1a1a'; // Dim dark gray for 'ghost' segments
|
||||
|
||||
/**
|
||||
* Draws a single 7-segment digit by drawing active segments.
|
||||
* Now includes drawing of inactive (ghost) segments for better readability.
|
||||
* @param {CanvasRenderingContext2D} ctx
|
||||
* @param {string} digit The digit character (0-9).
|
||||
* @param {number} x Left position of the digit area.
|
||||
* @param {number} y Top position of the digit area.
|
||||
* @param {number} H Total height of the digit area.
|
||||
*/
|
||||
function drawSegmentDigit(ctx, digit, x, y, H) {
|
||||
const segments = SEGMENTS[digit] || SEGMENTS[' '];
|
||||
const W = H / 2; // Width is half the height for standard aspect ratio
|
||||
|
||||
// Segment dimensions relative to W and H
|
||||
const hLength = W - 2 * SEG_PADDING;
|
||||
// Vertical length calculation: (Total height - 2 paddings - 3 horizontal thicknesses) / 2
|
||||
const vLength = (H - (2 * SEG_PADDING) - (3 * SEG_THICKNESS)) / 2;
|
||||
|
||||
// Helper to draw horizontal segment (A, G, D)
|
||||
const drawH = (index, x_start, y_start) => {
|
||||
ctx.fillStyle = segments[index] ? COLOR_ACTIVE : COLOR_INACTIVE;
|
||||
ctx.fillRect(x_start + SEG_PADDING, y_start, hLength, SEG_THICKNESS);
|
||||
};
|
||||
|
||||
// Helper to draw vertical segment (F, B, E, C)
|
||||
const drawV = (index, x_start, y_start) => {
|
||||
ctx.fillStyle = segments[index] ? COLOR_ACTIVE : COLOR_INACTIVE;
|
||||
ctx.fillRect(x_start, y_start, SEG_THICKNESS, vLength);
|
||||
};
|
||||
|
||||
// Define segment positions
|
||||
|
||||
// Horizontal segments
|
||||
// A (Top) - index 0
|
||||
drawH(0, x, y + SEG_PADDING);
|
||||
// G (Middle) - index 6
|
||||
drawH(6, x, y + H/2 - SEG_THICKNESS/2);
|
||||
// D (Bottom) - index 3
|
||||
drawH(3, x, y + H - SEG_PADDING - SEG_THICKNESS);
|
||||
|
||||
// Vertical segments (Top Half)
|
||||
const topVStart = y + SEG_PADDING + SEG_THICKNESS;
|
||||
const rightVStart = x + W - SEG_PADDING - SEG_THICKNESS;
|
||||
|
||||
// F (Top-Left) - index 5
|
||||
drawV(5, x + SEG_PADDING, topVStart);
|
||||
|
||||
// B (Top-Right) - index 1
|
||||
drawV(1, rightVStart, topVStart);
|
||||
|
||||
// Vertical segments (Bottom Half)
|
||||
const bottomVStart = y + H/2 + SEG_THICKNESS/2;
|
||||
|
||||
// E (Bottom-Left) - index 4
|
||||
drawV(4, x + SEG_PADDING, bottomVStart);
|
||||
|
||||
// C (Bottom-Right) - index 2
|
||||
drawV(2, rightVStart, bottomVStart);
|
||||
}
|
||||
|
||||
// Function to draw the colon (two dots), now with blinking logic
|
||||
function drawColon(ctx, x, y, H, isVisible) {
|
||||
const dotSize = 4;
|
||||
ctx.fillStyle = COLOR_ACTIVE;
|
||||
|
||||
if (isVisible) {
|
||||
// Top dot
|
||||
ctx.fillRect(x, y + H * 0.3 - dotSize / 2, dotSize, dotSize);
|
||||
// Bottom dot
|
||||
ctx.fillRect(x, y + H * 0.7 - dotSize / 2, dotSize, dotSize);
|
||||
} else {
|
||||
// Draw inactive colon if not visible, for consistency
|
||||
ctx.fillStyle = COLOR_INACTIVE;
|
||||
ctx.fillRect(x, y + H * 0.3 - dotSize / 2, dotSize, dotSize);
|
||||
ctx.fillRect(x, y + H * 0.7 - dotSize / 2, dotSize, dotSize);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws a simple playback arrow (triangle)
|
||||
* @param {CanvasRenderingContext2D} ctx
|
||||
* @param {number} x Left position of the arrow area.
|
||||
* @param {number} y Top position of the arrow area.
|
||||
* @param {number} H Total height of the arrow area.
|
||||
*/
|
||||
function drawPlaybackArrow(ctx, x, y, H) {
|
||||
const arrowWidth = H * 0.4; // Arrow width relative to digit height
|
||||
const arrowHeight = H * 0.4; // Arrow height relative to digit height
|
||||
|
||||
ctx.fillStyle = COLOR_ACTIVE;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y + H * 0.5 - arrowHeight / 2); // Top point
|
||||
ctx.lineTo(x + arrowWidth, y + H * 0.5); // Right point (center)
|
||||
ctx.lineTo(x, y + H * 0.5 + arrowHeight / 2); // Bottom point
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
|
||||
// Main function to render the entire time string using segments
|
||||
function drawSegmentDisplay(ctx, timeString) {
|
||||
const canvasWidth = ctx.canvas.width;
|
||||
const canvasHeight = ctx.canvas.height;
|
||||
const timeStringLength = timeString.length;
|
||||
|
||||
// Clear display to dark background
|
||||
ctx.fillStyle = '#0a0a0a';
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
||||
|
||||
// Constants for layout
|
||||
const charSpacing = 8; // Spacing between digits
|
||||
const digitHeight = canvasHeight - 2 * SEG_PADDING;
|
||||
const digitWidth = digitHeight / 2 + SEG_PADDING; // Total width slot for one digit
|
||||
const colonWidth = 6;
|
||||
const arrowWidth = digitHeight * 0.7; // Approx width for the arrow
|
||||
const arrowPadding = 10; // Space between arrow and first digit
|
||||
|
||||
// Calculate total display width including arrow and spaces
|
||||
const totalDisplayWidth = arrowWidth + arrowPadding + (4 * digitWidth) + colonWidth + ((timeStringLength - 1) * charSpacing);
|
||||
|
||||
// Calculate starting X to center the display
|
||||
let currentX = (canvasWidth - totalDisplayWidth) / 2;
|
||||
const currentY = SEG_PADDING;
|
||||
|
||||
// Draw Playback Arrow
|
||||
drawPlaybackArrow(ctx, currentX, currentY, digitHeight);
|
||||
currentX += arrowWidth + arrowPadding; // Move X after arrow and its padding
|
||||
|
||||
for (let i = 0; i < timeStringLength; i++) {
|
||||
const char = timeString[i];
|
||||
|
||||
if (char === ':') {
|
||||
drawColon(ctx, currentX, currentY, digitHeight, blinkState); // Pass blinkState
|
||||
currentX += colonWidth;
|
||||
} else if (char >= '0' && char <= '9') {
|
||||
drawSegmentDigit(ctx, char, currentX, currentY, digitHeight);
|
||||
currentX += digitWidth;
|
||||
}
|
||||
|
||||
// Add spacing only if it's not the last element
|
||||
if (i < timeStringLength - 1) {
|
||||
currentX += charSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Initialization ---
|
||||
function init() {
|
||||
// 1. Scene Setup
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x000000);
|
||||
|
||||
// 2. Camera Setup
|
||||
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 0.5, 2);
|
||||
camera.lookAt(0, 0, 0);
|
||||
|
||||
// 3. Renderer Setup
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// 4. Lighting (Simplified)
|
||||
const ambientLight = new THREE.AmbientLight(0x444444);
|
||||
scene.add(ambientLight);
|
||||
|
||||
// Light from the VCR display itself
|
||||
vcrDisplayLight = new THREE.PointLight(0x00ff44, 0.5, 1);
|
||||
vcrDisplayLight.position.set(0.3, 0.03, 0.35 + 0.005); // Move light slightly closer to VCR surface
|
||||
vcrDisplayLight.castShadow = true;
|
||||
vcrDisplayLight.shadow.mapSize.width = 256;
|
||||
vcrDisplayLight.shadow.mapSize.height = 256;
|
||||
scene.add(vcrDisplayLight);
|
||||
|
||||
// 5. Create the VCR
|
||||
createVcr();
|
||||
|
||||
// 6. Event Listener
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
// Start the animation loop
|
||||
animate();
|
||||
}
|
||||
|
||||
// --- VCR Display Functions ---
|
||||
function createVcrDisplay() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 160; // Increased width for arrow and better spacing
|
||||
canvas.height = 32;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.fillStyle = '#0a0a0a';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
vcrDisplayTexture = new THREE.CanvasTexture(canvas);
|
||||
vcrDisplayTexture.needsUpdate = true;
|
||||
|
||||
const displayGeometry = new THREE.PlaneGeometry(0.45, 0.1); // Adjust geometry width for new canvas size
|
||||
const displayMaterial = new THREE.MeshBasicMaterial({
|
||||
map: vcrDisplayTexture,
|
||||
side: THREE.FrontSide,
|
||||
color: 0xffffff,
|
||||
transparent: true,
|
||||
emissive: 0x00ff44,
|
||||
emissiveIntensity: 0.1
|
||||
});
|
||||
|
||||
const displayMesh = new THREE.Mesh(displayGeometry, displayMaterial);
|
||||
return displayMesh;
|
||||
}
|
||||
|
||||
function updateVcrDisplay(time) {
|
||||
if (!vcrDisplayTexture) return;
|
||||
|
||||
const canvas = vcrDisplayTexture.image;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const timeString = formatTime(time);
|
||||
|
||||
// Uses the new segment drawing function with ghosting, including blinkState for colon
|
||||
drawSegmentDisplay(ctx, timeString);
|
||||
|
||||
vcrDisplayTexture.needsUpdate = true;
|
||||
}
|
||||
|
||||
// --- 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
|
||||
});
|
||||
const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a, shininess: 5 });
|
||||
|
||||
// Floor (for shadows)
|
||||
const floorGeometry = new THREE.PlaneGeometry(5, 5);
|
||||
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
||||
floor.rotation.x = -Math.PI / 2;
|
||||
floor.position.y = -0.1; // Slightly below VCR
|
||||
floor.receiveShadow = true;
|
||||
scene.add(floor);
|
||||
|
||||
|
||||
// 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
|
||||
|
||||
scene.add(vcrGroup);
|
||||
}
|
||||
|
||||
// --- Helper function to format seconds into MM:SS ---
|
||||
function formatTime(seconds) {
|
||||
if (isNaN(seconds) || seconds < 0) return '00:00';
|
||||
const totalSeconds = Math.floor(seconds);
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const remainingSeconds = totalSeconds % 60;
|
||||
const paddedMinutes = String(minutes).padStart(2, '0');
|
||||
const paddedSeconds = String(remainingSeconds).padStart(2, '0');
|
||||
return `${paddedMinutes}:${paddedSeconds}`;
|
||||
}
|
||||
|
||||
// --- Animation Loop ---
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
const currentTime = performance.now() * 0.001; // Time in seconds
|
||||
|
||||
// Simulate playback time
|
||||
if (currentTime - lastUpdateTime > 0.1) {
|
||||
simulatedPlaybackTime = currentTime;
|
||||
updateVcrDisplay(simulatedPlaybackTime);
|
||||
lastUpdateTime = currentTime;
|
||||
}
|
||||
|
||||
// Blink the colon every second
|
||||
if (currentTime - lastBlinkToggleTime > 0.5) { // Blink every 0.5 seconds
|
||||
blinkState = !blinkState;
|
||||
lastBlinkToggleTime = currentTime;
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// --- Window Resize Handler ---
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
|
||||
// Start everything on window load
|
||||
window.onload = init;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user