mykonos-island-voxels 浏览器端等距岛屿建造器 — 基于 JavaScript 的交互式 3D 体素引擎

// 等距投影核心算法
class IsometricEngine {
  constructor(canvas) {
    this.ctx = canvas.getContext('2d');
    this.tileWidth = 64;   // 瓦片宽度
    this.tileHeight = 32;  // 瓦片高度 (2:1 比例)
    this.voxels = new Map(); // 体素数据存储
  }

  // 3D 坐标转屏幕坐标
  project(x, y, z) {
    const screenX = (x - y) * this.tileWidth / 2;
    const screenY = (x + y) * this.tileHeight / 2 - z * this.tileHeight;
    return { x: screenX, y: screenY };
  }

  // 绘制单个体素
  drawVoxel(vx, vy, vz, type) {
    const pos = this.project(vx, vy, vz);
    const colors = this.getPalette(type);
    
    // 顶面 (菱形)
    this.ctx.fillStyle = colors.top;
    this.ctx.beginPath();
    this.ctx.moveTo(pos.x, pos.y);
    this.ctx.lineTo(pos.x + 32, pos.y - 16);
    this.ctx.lineTo(pos.x, pos.y - 32);
    this.ctx.lineTo(pos.x - 32, pos.y - 16);
    this.ctx.closePath();
    this.ctx.fill();

    // 左侧面
    this.ctx.fillStyle = colors.left;
    this.ctx.beginPath();
    this.ctx.moveTo(pos.x - 32, pos.y - 16);
    this.ctx.lineTo(pos.x, pos.y - 32);
    this.ctx.lineTo(pos.x, pos.y);
    this.ctx.lineTo(pos.x - 32, pos.y + 16);
    this.ctx.closePath();
    this.ctx.fill();

    // 右侧面
    this.ctx.fillStyle = colors.right;
    this.ctx.beginPath();
    this.ctx.moveTo(pos.x, pos.y - 32);
    this.ctx.lineTo(pos.x + 32, pos.y - 16);
    this.ctx.lineTo(pos.x + 32, pos.y + 16);
    this.ctx.lineTo(pos.x, pos.y);
    this.ctx.closePath();
    this.ctx.fill();
  }

  // 深度排序渲染
  render() {
    const sorted = [...this.voxels.values()]
      .sort((a, b) => (a.x + a.y + a.z) - (b.x + b.y + b.z));
    
    for (const v of sorted) {
      this.drawVoxel(v.x, v.y, v.z, v.type);
    }
  }
}