Scribd
Upload
29 views9 pages

Untitled 201

The document is an HTML template for a 3D web application using Three.js, designed to create a hellish realm environment. It includes styles for the layout, loading messages, and controls for user movement within the scene. The JavaScript code initializes the scene, camera, lighting, terrain, and interactive controls for user navigation and animations of particles and structures.

Uploaded by

rburbr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
29 views9 pages

Untitled 201

The document is an HTML template for a 3D web application using Three.js, designed to create a hellish realm environment. It includes styles for the layout, loading messages, and controls for user movement within the scene. The JavaScript code initializes the scene, camera, lighting, terrain, and interactive controls for user navigation and animations of particles and structures.

Uploaded by

rburbr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd

body {

margin: 0;
padding: 0;
background: #000;
overflow: hidden;
font-family: Arial, sans-serif;
}

#container {
width: 100vw;
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;
font-size: 12px;
z-index: 100;
border: 1px solid #ff4444;
}

#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ff4444;
font-size: 18px;
z-index: 200;
}
</style>
</head>
<body>
<div id="container">
<div id="loading">Loading Hellish Realm...</div>
<div id="controls">
<strong>CONTROLS:</strong><br>
WASD - Move<br>
Mouse - Look Around<br>
Shift - Run<br>
Space - Jump<br>
Click to lock cursor
</div>
</div>

<script src="[Link]
<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 [Link]();
let objects = [];

const clock = new [Link]();


let prevTime = [Link]();

init();
animate();

function init() {
// Scene setup
scene = new [Link]();
[Link] = new [Link](0x330000, 20, 200);

// Camera setup
camera = new [Link](75, [Link] / [Link], 0.1,
1000);
[Link](0, 10, 50);

// Renderer setup
renderer = new [Link]({ antialias: true });
[Link]([Link], [Link]);
[Link](0x330000);
[Link] = true;
[Link] = [Link];
[Link]('container').appendChild([Link]);

// Lighting
const ambientLight = new [Link](0x441111, 0.3);
[Link](ambientLight);

const directionalLight = new [Link](0xff4444, 0.8);


[Link](-50, 100, -50);
[Link] = true;
[Link] = 2048;
[Link] = 2048;
[Link](directionalLight);

// Point lights for hellish glow


for (let i = 0; i < 10; i++) {
const pointLight = new [Link](0xff2200, 0.5, 50);
[Link](
([Link]() - 0.5) * 200,
[Link]() * 20 + 5,
([Link]() - 0.5) * 200
);
[Link](pointLight);
}

createTerrain();
createHellishStructures();
createParticleEffects();

// Controls
setupControls();

// Hide loading
[Link]('loading').[Link] = 'none';
}

function createTerrain() {
// Ground
const groundGeometry = new [Link](400, 400, 100, 100);
const groundMaterial = new [Link]({
color: 0x220000,
transparent: true,
opacity: 0.9
});

// Deform terrain for hellish landscape


const positions = [Link];
for (let i = 0; i < [Link]; i++) {
const x = [Link](i);
const z = [Link](i);
const height = [Link](x * 0.1) * [Link](z * 0.1) * 10 +
[Link]() * 5 - 2.5;
[Link](i, height);
}
[Link] = true;
[Link]();

const ground = new [Link](groundGeometry, groundMaterial);


[Link].x = -[Link] / 2;
[Link] = true;
[Link](ground);
[Link](ground);

// Lava pools
for (let i = 0; i < 20; i++) {
const poolGeometry = new [Link]([Link]() * 5 + 2, 16);
const poolMaterial = new [Link]({
color: 0xff4400,
transparent: true,
opacity: 0.8
});
const pool = new [Link](poolGeometry, poolMaterial);
[Link](
([Link]() - 0.5) * 300,
0.1,
([Link]() - 0.5) * 300
);
[Link].x = -[Link] / 2;
[Link](pool);
}
}

function createHellishStructures() {
// Twisted pillars
for (let i = 0; i < 15; i++) {
const pillarGeometry = new [Link](
[Link]() + 0.5,
[Link]() + 1,
[Link]() * 30 + 10,
8
);
const pillarMaterial = new [Link]({ color: 0x660000 });
const pillar = new [Link](pillarGeometry, pillarMaterial);

[Link](
([Link]() - 0.5) * 200,
[Link] / 2,
([Link]() - 0.5) * 200
);
[Link].z = ([Link]() - 0.5) * 0.3;
[Link] = true;
[Link](pillar);
[Link](pillar);
}

// Jagged rocks
for (let i = 0; i < 30; i++) {
const rockGeometry = new [Link]([Link]() * 3 + 1);
const rockMaterial = new [Link]({ color: 0x440000 });
const rock = new [Link](rockGeometry, rockMaterial);

[Link](
([Link]() - 0.5) * 300,
[Link]() * 5,
([Link]() - 0.5) * 300
);
[Link]([Link]() * [Link], [Link]() * [Link], 0);
[Link] = true;
[Link](rock);
[Link](rock);
}

// Burning structures
for (let i = 0; i < 8; i++) {
const structureGroup = new [Link]();

const baseGeometry = new [Link](


[Link]() * 5 + 3,
[Link]() * 10 + 5,
[Link]() * 5 + 3
);
const baseMaterial = new [Link]({ color: 0x330000 });
const base = new [Link](baseGeometry, baseMaterial);
[Link] = true;
[Link](base);

[Link](
([Link]() - 0.5) * 150,
[Link] / 2,
([Link]() - 0.5) * 150
);

[Link](structureGroup);
[Link](base);
}
}

function createParticleEffects() {
// Floating embers
const emberGeometry = new [Link]();
const emberCount = 1000;
const positions = new Float32Array(emberCount * 3);
const velocities = [];

for (let i = 0; i < emberCount; i++) {


positions[i * 3] = ([Link]() - 0.5) * 200;
positions[i * 3 + 1] = [Link]() * 50;
positions[i * 3 + 2] = ([Link]() - 0.5) * 200;

[Link]({
x: ([Link]() - 0.5) * 0.5,
y: [Link]() * 0.5 + 0.1,
z: ([Link]() - 0.5) * 0.5
});
}

[Link]('position', new [Link](positions, 3));

const emberMaterial = new [Link]({


color: 0xff4400,
size: 0.5,
transparent: true,
opacity: 0.8
});

const embers = new [Link](emberGeometry, emberMaterial);


[Link](embers);

// Animate embers
function animateEmbers() {
const positions = [Link];

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] = ([Link]() - 0.5) * 200;
positions[idx + 2] = ([Link]() - 0.5) * 200;
}
}

[Link] = true;
requestAnimationFrame(animateEmbers);
}
animateEmbers();
}

function setupControls() {
const blocker = [Link]('container');

const onKeyDown = function(event) {


switch([Link]) {
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([Link]) {
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;
}
};

[Link]('keydown', onKeyDown);
[Link]('keyup', onKeyUp);

// Mouse controls
let mouseX = 0, mouseY = 0;
let isLocked = false;

[Link]('click', function() {
[Link]();
});

[Link]('pointerlockchange', function() {
isLocked = [Link] === blocker;
});

[Link]('mousemove', function(event) {
if (isLocked) {
const movementX = [Link] || 0;
const movementY = [Link] || 0;

[Link].y -= movementX * 0.002;


[Link].x -= movementY * 0.002;
[Link].x = [Link](-[Link]/2, [Link]([Link]/2, [Link].x));
}
});
}

function animate() {
requestAnimationFrame(animate);

const time = [Link]();


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);
[Link]();

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);
[Link]([Link]);
forward.y = 0;
[Link]();

const right = new THREE.Vector3(1, 0, 0);


[Link]([Link]);
right.y = 0;
[Link]();

const movement = new THREE.Vector3();


[Link](forward, -velocity.z * delta);
[Link](right, -velocity.x * delta);

[Link](movement);
[Link].y += velocity.y * delta;

// Ground collision
if ([Link].y < 10) {
velocity.y = 0;
[Link].y = 10;
canJump = true;
}

prevTime = time;
[Link](scene, camera);
}

[Link]('resize', function() {
[Link] = [Link] / [Link];
[Link]();
[Link]([Link], [Link]);
});
</script>
</body>
</html>

You might also like