fortnite

HTML

CSS

JS

// --- 1. SETUP ENGINE & SCENE ---
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); // Fortnite blue sky

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// --- 2. LIGHTING & ENVIRONMENT ---
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const sunLight = new THREE.DirectionalLight(0xffffff, 0.8);
sunLight.position.set(10, 20, 10);
scene.add(sunLight);

// The Map (Grass floor)
const floorGeo = new THREE.PlaneGeometry(100, 100);
const floorMat = new THREE.MeshStandardMaterial({ color: 0x2e8b57 });
const floor = new THREE.Mesh(floorGeo, floorMat);
floor.rotation.x = -Math.PI / 2; // Lie flat
scene.add(floor);

// --- 3. CONTROLS & CAMERA SYSTEM ---
let move = { forward: false, backward: false, left: false, right: false };
let player = { position: new THREE.Vector3(0, 1.6, 5), yaw: 0, pitch: 0 };

// Pointer Lock to trap the mouse inside the canvas
window.addEventListener('click', () => {
    document.body.requestPointerLock();
});

window.addEventListener('mousemove', (e) => {
    if (document.pointerLockElement === document.body) {
        player.yaw -= e.movementX * 0.002;
        player.pitch -= e.movementY * 0.002;
        player.pitch = Math.max(-Math.PI/2.5, Math.min(Math.PI/2.5, player.pitch)); // Clamp view
    }
});

// Capture Keybinds
window.addEventListener('keydown', (e) => {
    if(e.code === 'KeyW') move.forward = true;
    if(e.code === 'KeyS') move.backward = true;
    if(e.code === 'KeyA') move.left = true;
    if(e.code === 'KeyD') move.right = true;
    if(e.code === 'KeyQ') buildRamp(); // Fortnite building keybind
});

window.addEventListener('keyup', (e) => {
    if(e.code === 'KeyW') move.forward = false;
    if(e.code === 'KeyS') move.backward = false;
    if(e.code === 'KeyA') move.left = false;
    if(e.code === 'KeyD') move.right = false;
});

// --- 4. FORTNITE MECHANICS ---

// Build Function (Spawn a 3D angled plane)
function buildRamp() {
    const rampGeo = new THREE.BoxGeometry(4, 0.2, 4);
    const rampMat = new THREE.MeshStandardMaterial({ color: 0x964B00, transparent: true, opacity: 0.8 });
    const ramp = new THREE.Mesh(rampGeo, rampMat);
    
    // Spawn ramp slightly in front of the player's current location
    const forwardDirection = new THREE.Vector3(0, 0, -1).applyAxisAngle(new THREE.Vector3(0, 1, 0), player.yaw);
    ramp.position.copy(player.position).add(forwardDirection.multiplyScalar(4));
    ramp.position.y = 1; // Elevate off the floor
    
    // Angle it upwards like a real Fortnite ramp
    ramp.rotation.y = player.yaw;
    ramp.rotation.x = 0.5; // Slope incline
    
    scene.add(ramp);
}

// Shooting Function (Spawns a bullet tracer ray)
window.addEventListener('mousedown', (e) => {
    if (document.pointerLockElement !== document.body || e.button !== 0) return;

const bulletGeo = new THREE.SphereGeometry(0.1, 8, 8);
    const bulletMat = new THREE.MeshBasicMaterial({ color: 0xFFFF00 });
    const bullet = new THREE.Mesh(bulletGeo, bulletMat);
    
    bullet.position.copy(player.position).sub(new THREE.Vector3(0, 0.2, 0));
    scene.add(bullet);

// Calculate trajectory direction vectors
    const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion).normalize();
    
    // Simple bullet velocity path animation
    function animateBullet() {
        bullet.position.addScaledVector(dir, 1);
        if(bullet.position.length() < 200) {
            requestAnimationFrame(animateBullet);
        } else {
            scene.remove(bullet);
        }
    }
    animateBullet();
});

// --- 5. GAME RUNNER LOOP ---
const clock = new THREE.Clock();

function update() {
    requestAnimationFrame(update);
    const delta = clock.getDelta();
    const speed = 10 * delta;

// Movement math relative to camera angle
    const frontVector = new THREE.Vector3(0, 0, (move.backward ? 1 : 0) - (move.forward ? 1 : 0));
    const sideVector = new THREE.Vector3((move.right ? 1 : 0) - (move.left ? 1 : 0), 0, 0);
    const direction = new THREE.Vector3().addVectors(frontVector, sideVector).normalize();
    direction.applyAxisAngle(new THREE.Vector3(0, 1, 0), player.yaw);
    
    player.position.addScaledVector(direction, speed);

// Update Camera orientations (First-to-Third Person conversion layout)
    camera.position.copy(player.position);
    camera.rotation.set(0, 0, 0);
    camera.rotation.y = player.yaw;
    camera.rotation.x = player.pitch;

renderer.render(scene, camera);
}

// Adjust window on sizing shifts
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

update();

Recommended

Comments 0