310 lines
12 KiB
HTML
310 lines
12 KiB
HTML
<!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> |