Webleb - Extraits de Code

HTML

CSS

JS

// === ПИКСЕЛЬНЫЙ ГЕНЕРАТОР ТЕКСТУР (DOOM STYLE) ===
function createRetroSprite(type, colorHex) {
    const canvas = document.createElement('canvas');
    canvas.width = 64; canvas.height = 64;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 64, 64);

if (type === 'stalker') {
        // Тело
        ctx.fillStyle = colorHex; ctx.fillRect(16, 20, 32, 28);
        // Голова
        ctx.fillStyle = '#ffcc99'; ctx.fillRect(24, 6, 16, 14);
        // Противогаз/Глаза
        ctx.fillStyle = '#111'; ctx.fillRect(24, 10, 16, 6);
        ctx.fillStyle = '#444'; ctx.fillRect(28, 16, 8, 4);
        // Ноги
        ctx.fillStyle = '#222'; ctx.fillRect(18, 48, 10, 16); ctx.fillRect(36, 48, 10, 16);
    } else if (type === 'dog') {
        // Тело мутанта
        ctx.fillStyle = '#5c3a21'; ctx.fillRect(10, 30, 44, 18);
        // Пасть
        ctx.fillStyle = '#3a2010'; ctx.fillRect(40, 24, 16, 14);
        // Глаз (красный)
        ctx.fillStyle = '#ff0000'; ctx.fillRect(48, 26, 4, 4);
        // Лапы
        ctx.fillStyle = '#111'; ctx.fillRect(14, 48, 8, 16); ctx.fillRect(42, 48, 8, 16);
    } else if (type === 'ak') {
        ctx.fillStyle = '#222'; ctx.fillRect(8, 30, 48, 6); // ствол
        ctx.fillStyle = '#5c3a21'; ctx.fillRect(24, 36, 8, 16); // рожок
        ctx.fillStyle = '#111'; ctx.fillRect(44, 36, 10, 12); // приклад
    } else if (type === 'pistol') {
        ctx.fillStyle = '#333'; ctx.fillRect(16, 30, 24, 8);
        ctx.fillStyle = '#111'; ctx.fillRect(20, 38, 8, 12);
    }

const texture = new THREE.CanvasTexture(canvas);
    // Магия DOOM: отключаем сглаживание, чтобы пиксели были четкими и квадратными
    texture.magFilter = THREE.NearestFilter;
    texture.minFilter = THREE.NearestFilter;
    return new THREE.SpriteMaterial({ map: texture });
}

// === МОДЕЛИ ОРУЖИЯ (2D Спрайты) ===
function createAK47Weapon() {
    const sprite = new THREE.Sprite(createRetroSprite('ak', '#000'));
    sprite.scale.set(1.5, 1.5, 1.5);
    return sprite;
}

function createAK47Player() {
    const sprite = new THREE.Sprite(createRetroSprite('ak', '#000'));
    // Смещаем пушку вправо и вниз, как в оригинальном DOOM
    sprite.position.set(0.3, -0.2, -0.6);
    return sprite;
}

function createPistolPlayer() {
    const sprite = new THREE.Sprite(createRetroSprite('pistol', '#000'));
    sprite.position.set(0.3, -0.2, -0.6);
    return sprite;
}

// === МОДЕЛЬ ИГРОКА ===
function createPlayerModel() {
    const group = new THREE.Group();
    const sprite = new THREE.Sprite(createRetroSprite('stalker', '#4a5a3a'));
    sprite.scale.set(1.6, 1.6, 1.6);
    sprite.position.y = 0.8;
    group.add(sprite);
    return group;
}

// === МОДЕЛЬ НПС ===
function createNPCModel(color, hasChestPlate = true) {
    const group = new THREE.Group();
    // Конвертируем числовой цвет (0x...) обратно в HEX строку для Canvas
    const hexColor = '#' + color.toString(16).padStart(6, '0');
    
    // В Three.js Спрайты всегда автоматически смотрят на камеру
    const sprite = new THREE.Sprite(createRetroSprite('stalker', hexColor));
    sprite.scale.set(1.6, 1.6, 1.6);
    sprite.position.y = 0.8;
    group.add(sprite);
    return group;
}

// === МОДЕЛЬ СОБАКИ ===
function createDogModel() {
    const group = new THREE.Group();
    const sprite = new THREE.Sprite(createRetroSprite('dog', '#000'));
    sprite.scale.set(1.3, 1.3, 1.3);
    sprite.position.y = 0.6;
    group.add(sprite);
    return group;
}

BELSTALKER