Создание 3D-игры в браузере с Claude: от архитектуры сцены до процедурной генерации

import * as THREE from 'three';

export class GameEngine {
  constructor(container) {
    this.container = container;
    
    // Инициализация трехмерной сцены
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0x1a1a2e);
    this.scene.fog = new THREE.FogExp2(0x1a1a2e, 0.03);

    // Настройка перспективной камеры от третьего лица
    this.camera = new THREE.PerspectiveCamera(
      60,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    this.camera.position.set(0, 5, -10);

    // WebGL рендерер с поддержкой сглаживания и теней
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    this.container.appendChild(this.renderer.domElement);

    // Освещение: фоновый свет и направленный прожектор с тенями
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
    this.scene.add(ambientLight);

    this.dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
    this.dirLight.position.set(10, 20, -10);
    this.dirLight.castShadow = true;
    this.dirLight.shadow.mapSize.width = 2048;
    this.dirLight.shadow.mapSize.height = 2048;
    this.scene.add(this.dirLight);

    window.addEventListener('resize', () => this.onWindowResize());
  }

  onWindowResize() {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
  }
}

export class PlayerController {
  constructor(scene, engine) {
    this.scene = scene;
    this.engine = engine;

    // Создание трехмерной модели персонажа (светящийся куб)
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshStandardMaterial({
      color: 0x00fff5,
      roughness: 0.2,
      metalness: 0.8,
    });
    this.mesh = new THREE.Mesh(geometry, material);
    this.mesh.castShadow = true;
    this.mesh.position.set(0, 0.5, 0);
    this.scene.add(this.mesh);

    // Физические параметры
    this.velocity = new THREE.Vector3();
    this.gravity = -25.0;
    this.jumpForce = 12.0;
    this.moveSpeed = 15.0;
    this.isGrounded = true;

    // Препятствия на трассе
    this.obstacles = [];
    this.spawnZ = 20;

    this.setupInputs();
  }

  setupInputs() {
    window.addEventListener('keydown', (e) => {
      if (e.code === 'Space' && this.isGrounded) {
        this.velocity.y = this.jumpForce;
        this.isGrounded = false;
      }
    });
  }

  spawnObstacle(zPos) {
    const obsGeo = new THREE.BoxGeometry(1.5, 1.5, 1.5);
    const obsMat = new THREE.MeshStandardMaterial({ color: 0xff007f });
    const obs = new THREE.Mesh(obsGeo, obsMat);
    obs.position.set((Math.random() - 0.5) * 6, 0.75, zPos);
    obs.castShadow = true;
    this.scene.add(obs);
    this.obstacles.push(obs);
  }

  update(deltaTime) {
    // Применение гравитации и вертикального движения
    this.velocity.y += this.gravity * deltaTime;
    this.mesh.position.y += this.velocity.y * deltaTime;

    // Проверка касания пола
    if (this.mesh.position.y <= 0.5) {
      this.mesh.position.y = 0.5;
      this.velocity.y = 0;
      this.isGrounded = true;
    }

    // Движение вперед по оси Z
    this.mesh.position.z += this.moveSpeed * deltaTime;
    this.engine.camera.position.z = this.mesh.position.z - 10;
    this.engine.camera.lookAt(this.mesh.position);

    // Процедурный спавн новых препятствий вперед по движению
    if (this.mesh.position.z + 50 > this.spawnZ) {
      this.spawnObstacle(this.spawnZ);
      this.spawnZ += 15;
    }

    // Проверка столкновений (AABB коллизии)
    const playerBox = new THREE.Box3().setFromObject(this.mesh);
    for (let i = this.obstacles.length - 1; i >= 0; i--) {
      const obs = this.obstacles[i];
      const obsBox = new THREE.Box3().setFromObject(obs);

      if (playerBox.intersectsBox(obsBox)) {
        console.warn('СТОЛКНОВЕНИЕ! Игра окончена.');
        this.moveSpeed = 0;
      }

      // Удаление объектов, оставшихся далеко позади камеры
      if (obs.position.z < this.mesh.position.z - 20) {
        this.scene.remove(obs);
        obs.geometry.dispose();
        obs.material.dispose();
        this.obstacles.splice(i, 1);
      }
    }
  }
}