padding: 0;
backgrxzxzxzczasdasasasads
height: 100vh;
position: relative;
}
#controls {
position: absolute;
top: 10px;
left: 10px;
color: #ff4444;
background: rgba(0, 0, 0, 0.7);
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<bo
Click to lock cursor
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let scene, camera, renderer, controls;
let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
let canJump = false, isRunning = false;
let velocity = new THREE.Vector3();
let direction = new THREE.Vector3();
let raycaster = new THREE.Raycaster();
let objects = [];
const clock = new THREE.Clock();
let prevTime = performance.now();
init();
animate();
function init() {
// Scene setup
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x330000, 20, 200);
// Camera setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1,
1000);
camera.position.set(0, 10, 50);
// Renderer setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x330000);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.getElementById('container').appendChild(renderer.domElement);
// Lighting
const ambientLight = new THREE.AmbientLight(0x441111, 0.3);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xff4444, 0.8);
directionalLight.position.set(-50, 100, -50);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
scene.add(directionalLight);
// Point lights for hellish glow
for (let i = 0; i < 10; i++) {
const pointLight = new THREE.PointLight(0xff2200, 0.5, 50);
pointLight.position.set(
(Math.random() - 0.5) * 200,
Math.random() * 20 + 5,
(Math.random() - 0.5) * 200
);
scene.add(pointLight);
}
createTerrain();
createHellishStructures();
createParticleEffects();
// Controls
setupControls();
// Hide loading
document.getElementById('loading').style.display = 'none';
}
function createTerrain() {
// Ground
const groundGeometry = new THREE.PlaneGeometry(400, 400, 100, 100);
const groundMaterial = new THREE.MeshLambertMaterial({
color: 0x220000,
transparent: true,
opacity: 0.9
});
// Deform terrain for hellish landscape
const positions = groundGeometry.attributes.position;
for (let i = 0; i < positions.count; i++) {
const x = positions.getX(i);
const z = positions.getZ(i);
const height = Math.sin(x * 0.1) * Math.cos(z * 0.1) * 10 +
Math.random() * 5 - 2.5;
positions.setY(i, height);
}
positions.needsUpdate = true;
groundGeometry.computeVertexNormals();
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);
objects.push(ground);
// Lava pools
for (let i = 0; i < 20; i++) {
const poolGeometry = new THREE.CircleGeometry(Math.random() * 5 + 2, 16);
const poolMaterial = new THREE.MeshBasicMaterial({
color: 0xff4400,
transparent: true,
opacity: 0.8
});
const pool = new THREE.Mesh(poolGeometry, poolMaterial);
pool.position.set(
(Math.random() - 0.5) * 300,
0.1,
(Math.random() - 0.5) * 300
);
pool.rotation.x = -Math.PI / 2;
scene.add(pool);
}
}
function createHellishStructures() {
// Twisted pillars
for (let i = 0; i < 15; i++) {
const pillarGeometry = new THREE.CylinderGeometry(
Math.random() + 0.5,
Math.random() + 1,
Math.random() * 30 + 10,
8
);
const pillarMaterial = new THREE.MeshLambertMaterial({ color: 0x660000 });
const pillar = new THREE.Mesh(pillarGeometry, pillarMaterial);
pillar.position.set(
(Math.random() - 0.5) * 200,
pillar.geometry.parameters.height / 2,
(Math.random() - 0.5) * 200
);
pillar.rotation.z = (Math.random() - 0.5) * 0.3;
pillar.castShadow = true;
scene.add(pillar);
objects.push(pillar);
}
// Jagged rocks
for (let i = 0; i < 30; i++) {
const rockGeometry = new THREE.DodecahedronGeometry(Math.random() * 3 + 1);
const rockMaterial = new THREE.MeshLambertMaterial({ color: 0x440000 });
const rock = new THREE.Mesh(rockGeometry, rockMaterial);
rock.position.set(
(Math.random() - 0.5) * 300,
Math.random() * 5,
(Math.random() - 0.5) * 300
);
rock.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, 0);
rock.castShadow = true;
scene.add(rock);
objects.push(rock);
}
// Burning structures
for (let i = 0; i < 8; i++) {
const structureGroup = new THREE.Group();
const baseGeometry = new THREE.BoxGeometry(
Math.random() * 5 + 3,
Math.random() * 10 + 5,
Math.random() * 5 + 3
);
const baseMaterial = new THREE.MeshLambertMaterial({ color: 0x330000 });
const base = new THREE.Mesh(baseGeometry, baseMaterial);
base.castShadow = true;
structureGroup.add(base);
structureGroup.position.set(
(Math.random() - 0.5) * 150,
baseGeometry.parameters.height / 2,
(Math.random() - 0.5) * 150
);
scene.add(structureGroup);
objects.push(base);
}
}
function createParticleEffects() {
// Floating embers
const emberGeometry = new THREE.BufferGeometry();
const emberCount = 1000;
const positions = new Float32Array(emberCount * 3);
const velocities = [];
for (let i = 0; i < emberCount; i++) {
positions[i * 3] = (Math.random() - 0.5) * 200;
positions[i * 3 + 1] = Math.random() * 50;
positions[i * 3 + 2] = (Math.random() - 0.5) * 200;
velocities.push({
x: (Math.random() - 0.5) * 0.5,
y: Math.random() * 0.5 + 0.1,
z: (Math.random() - 0.5) * 0.5
});
}
emberGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const emberMaterial = new THREE.PointsMaterial({
color: 0xff4400,
size: 0.5,
transparent: true,
opacity: 0.8
});
const embers = new THREE.Points(emberGeometry, emberMaterial);
scene.add(embers);
// Animate embers
function animateEmbers() {
const positions = embers.geometry.attributes.position.array;
for (let i = 0; i < emberCount; i++) {
const idx = i * 3;
positions[idx] += velocities[i].x;
positions[idx + 1] += velocities[i].y;
positions[idx + 2] += velocities[i].z;
// Reset if too high
if (positions[idx + 1] > 60) {
positions[idx + 1] = 0;
positions[idx] = (Math.random() - 0.5) * 200;
positions[idx + 2] = (Math.random() - 0.5) * 200;
}
}
embers.geometry.attributes.position.needsUpdate = true;
requestAnimationFrame(animateEmbers);
}
animateEmbers();
}
function setupControls() {
const blocker = document.getElementById('container');
const onKeyDown = function(event) {
switch(event.code) {
case 'ArrowUp':
case 'KeyW':
moveForward = true;
break;
case 'ArrowLeft':
case 'KeyA':
moveLeft = true;
break;
case 'ArrowDown':
case 'KeyS':
moveBackward = true;
break;
case 'ArrowRight':
case 'KeyD':
moveRight = true;
break;
case 'Space':
if (canJump === true) velocity.y += 350;
canJump = false;
break;
case 'ShiftLeft':
case 'ShiftRight':
isRunning = true;
break;
}
};
const onKeyUp = function(event) {
switch(event.code) {
case 'ArrowUp':
case 'KeyW':
moveForward = false;
break;
case 'ArrowLeft':
case 'KeyA':
moveLeft = false;
break;
case 'ArrowDown':
case 'KeyS':
moveBackward = false;
break;
case 'ArrowRight':
case 'KeyD':
moveRight = false;
break;
case 'ShiftLeft':
case 'ShiftRight':
isRunning = false;
break;
}
};
document.addEventListener('keydown', onKeyDown);
document.addEventListener('keyup', onKeyUp);
// Mouse controls
let mouseX = 0, mouseY = 0;
let isLocked = false;
blocker.addEventListener('click', function() {
blocker.requestPointerLock();
});
document.addEventListener('pointerlockchange', function() {
isLocked = document.pointerLockElement === blocker;
});
document.addEventListener('mousemove', function(event) {
if (isLocked) {
const movementX = event.movementX || 0;
const movementY = event.movementY || 0;
camera.rotation.y -= movementX * 0.002;
camera.rotation.x -= movementY * 0.002;
camera.rotation.x = Math.max(-Math.PI/2, Math.min(Math.PI/2, camera.rotation.x));
}
});
}
function animate() {
requestAnimationFrame(animate);
const time = performance.now();
const delta = (time - prevTime) / 1000;
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
velocity.y -= 9.8 * 100.0 * delta; // gravity
direction.z = Number(moveForward) - Number(moveBackward);
direction.x = Number(moveRight) - Number(moveLeft);
direction.normalize();
const speed = isRunning ? 800 : 400;
if (moveForward || moveBackward) velocity.z -= direction.z * speed * delta;
if (moveLeft || moveRight) velocity.x -= direction.x * speed * delta;
// Apply camera rotation to movement
const forward = new THREE.Vector3(0, 0, -1);
forward.applyQuaternion(camera.quaternion);
forward.y = 0;
forward.normalize();
const right = new THREE.Vector3(1, 0, 0);
right.applyQuaternion(camera.quaternion);
right.y = 0;
right.normalize();
const movement = new THREE.Vector3();
movement.addScaledVector(forward, -velocity.z * delta);
movement.addScaledVector(right, -velocity.x * delta);
camera.position.add(movement);
camera.position.y += velocity.y * delta;
// Ground collision
if (camera.position.y < 10) {
velocity.y = 0;
camera.position.y = 10;
canJump = true;
}
prevTime = time;
renderer.render(scene, camera);
}
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
