skatemakerpro/js/parkbuild.js

// SKATEMAKER PRO — park -> three.js scene. Shared by the editor AND exported levels,
// so what you see in the editor is byte-for-byte what the game builds.
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { makeHeightAt } from './parkmath.js';

export const GRID_RES = 0.5, GRID_PAD = 14;

// ---------------------------------------------------------------- ground texture
// Zones + image decals bake into one canvas mapped planar over the grid.
// Vertex colors carry height shading; three multiplies map * vertexColors.
export function bakeGroundTexture(park, x0, x1, z0, z1) {
  const PX = 16;                                       // texels per metre
  const cv = document.createElement('canvas');
  cv.width = Math.min(4096, Math.round((x1 - x0) * PX));
  cv.height = Math.min(4096, Math.round((z1 - z0) * PX));
  const sx = cv.width / (x1 - x0), sz = cv.height / (z1 - z0);
  const g = cv.getContext('2d');
  const px = (x, z) => [(x - x0) * sx, (z - z0) * sz];

  g.fillStyle = park.grassColor || '#4d7c3c';          // parkland
  g.fillRect(0, 0, cv.width, cv.height);
  const B = park.bounds;
  const [bx, bz] = px(B.x0, B.z0);
  g.fillStyle = park.slabColor || '#7fae6f';           // the slab
  g.fillRect(bx, bz, (B.x1 - B.x0) * sx, (B.z1 - B.z0) * sz);

  const drawShape = zn => {
    g.save();
    const [cx, cz] = px(zn.x, zn.z);
    g.translate(cx, cz); g.rotate(zn.rot || 0);
    g.beginPath();
    if (zn.shape === 'ellipse') g.ellipse(0, 0, zn.hw * sx, zn.hd * sz, 0, 0, Math.PI * 2);
    else g.rect(-zn.hw * sx, -zn.hd * sz, zn.hw * 2 * sx, zn.hd * 2 * sz);
  };
  for (const zn of park.zones || []) {
    drawShape(zn);
    g.fillStyle = zn.color || '#9aa0a2';
    g.globalAlpha = zn.opacity ?? 1;
    g.fill(); g.restore();
  }
  const jobs = [];                                     // decals load async, re-bake per image
  for (const d of park.decals || []) {
    const img = new Image();
    jobs.push(new Promise(res => {
      img.onload = () => res({ d, img });
      img.onerror = () => res(null);
      img.src = d.img;
    }));
  }
  const tex = new THREE.CanvasTexture(cv);
  tex.colorSpace = THREE.SRGBColorSpace;
  tex.anisotropy = 4;
  Promise.all(jobs).then(loaded => {
    for (const hit of loaded) {
      if (!hit) continue;
      const { d, img } = hit;
      g.save();
      const [cx, cz] = px(d.x, d.z);
      g.translate(cx, cz); g.rotate(d.rot || 0);
      g.globalAlpha = d.opacity ?? 1;
      g.drawImage(img, -d.w / 2 * sx, -d.h / 2 * sz, d.w * sx, d.h * sz);
      g.restore();
    }
    tex.needsUpdate = true;
  });
  return tex;
}

// height shading: darker in carves, subtle lift with elevation — cheap depth cueing
function shade(h) {
  const s = h < -0.02 ? 0.72 + 0.1 * h : Math.min(1, 0.9 + h * 0.06);
  return Math.max(0.55, s);
}

export function buildGround(park) {
  const heightAt = makeHeightAt(park);
  const B = park.bounds;
  const x0 = B.x0 - GRID_PAD, x1 = B.x1 + GRID_PAD, z0 = B.z0 - GRID_PAD, z1 = B.z1 + GRID_PAD;
  const nx = Math.round((x1 - x0) / GRID_RES) + 1, nz = Math.round((z1 - z0) / GRID_RES) + 1;
  const pos = new Float32Array(nx * nz * 3), col = new Float32Array(nx * nz * 3),
        uv = new Float32Array(nx * nz * 2), idx = [];
  let p = 0, q = 0;
  for (let j = 0; j < nz; j++) for (let i = 0; i < nx; i++) {
    const x = x0 + i * GRID_RES, z = z0 + j * GRID_RES, h = heightAt(x, z);
    pos[p] = x; pos[p + 1] = h; pos[p + 2] = z;
    const s = shade(h);
    col[p] = s; col[p + 1] = s; col[p + 2] = s;
    p += 3;
    uv[q++] = (x - x0) / (x1 - x0); uv[q++] = 1 - (z - z0) / (z1 - z0);
  }
  for (let j = 0; j < nz - 1; j++) for (let i = 0; i < nx - 1; i++) {
    const a = j * nx + i, b = a + 1, c = a + nx, d = c + 1;
    idx.push(a, c, b, b, c, d);
  }
  const geo = new THREE.BufferGeometry();
  geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
  geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
  geo.setAttribute('uv', new THREE.BufferAttribute(uv, 2));
  geo.setIndex(idx); geo.computeVertexNormals();
  const tex = bakeGroundTexture(park, x0, x1, z0, z1);
  const mesh = new THREE.Mesh(geo,
    new THREE.MeshLambertMaterial({ map: tex, vertexColors: true }));
  mesh.receiveShadow = true;
  mesh.name = 'ground';
  return mesh;
}

// ---------------------------------------------------------------- steel
export function buildRails(park) {
  const grp = new THREE.Group(); grp.name = 'rails';
  const steel = new THREE.MeshStandardMaterial({ color: 0xb9bec4, metalness: 0.8, roughness: 0.35 });
  for (const r of park.rails || []) {
    const a = new THREE.Vector3(r.a[0], r.ya, r.a[1]);
    const b = new THREE.Vector3(r.b[0], r.yb, r.b[1]);
    const len = Math.max(a.distanceTo(b), 0.01);
    const bar = new THREE.Mesh(new THREE.CylinderGeometry(0.035, 0.035, len, 8), steel);
    bar.position.copy(a).add(b).multiplyScalar(0.5);
    bar.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), b.clone().sub(a).normalize());
    bar.userData.railId = r.id;
    grp.add(bar);
    if (r.kind === 'rail') {
      for (const t of [0.12, 0.88]) {
        const p = a.clone().lerp(b, t);
        const post = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, Math.max(p.y, 0.05), 6), steel);
        post.position.set(p.x, p.y / 2, p.z);
        post.userData.railId = r.id;
        grp.add(post);
      }
    }
  }
  return grp;
}

// ---------------------------------------------------------------- props
const fig = (s, trunkM, leafM) => {                     // builtin Moreton Bay fig
  const grp = new THREE.Group();
  const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.28 * s, 0.42 * s, 2.6 * s, 7), trunkM);
  trunk.position.y = 1.3 * s; grp.add(trunk);
  for (const [ox, oy, oz, r] of [[0, 3.1, 0, 2.4], [1.4, 2.6, 0.7, 1.7], [-1.3, 2.7, -0.6, 1.6]]) {
    const m = new THREE.Mesh(new THREE.SphereGeometry(r * s, 10, 8), leafM);
    m.position.set(ox * s, oy * s, oz * s); grp.add(m);
  }
  return grp;
};

export function buildProps(park, heightAt, onLoaded) {
  const grp = new THREE.Group(); grp.name = 'props';
  const loader = new GLTFLoader();
  const trunkM = new THREE.MeshLambertMaterial({ color: 0x5b4632 });
  const leafM = new THREE.MeshLambertMaterial({ color: 0x2e5b2a });
  for (const pr of park.props || []) {
    const place = obj => {
      obj.position.set(pr.x, heightAt(pr.x, pr.z) + (pr.y || 0), pr.z);
      obj.rotation.y = pr.rot || 0;
      const s = pr.scale || 1;
      if (pr.src !== 'builtin:fig') obj.scale.setScalar(s);
      obj.userData.propId = pr.id;
      obj.traverse(o => { o.userData.propId = pr.id; });
      grp.add(obj);
      if (onLoaded) onLoaded(pr, obj);
    };
    if (pr.src === 'builtin:fig') place(fig(pr.scale || 1, trunkM, leafM));
    else loader.load(pr.src, g => place(g.scene),
      undefined, () => console.warn('prop failed', pr.src));
  }
  return grp;
}

// ---------------------------------------------------------------- letters
export function buildLetters(park, heightAt) {
  return (park.letters || []).map(L => {
    const cv = document.createElement('canvas'); cv.width = cv.height = 128;
    const cx = cv.getContext('2d');
    cx.fillStyle = '#ffd93b'; cx.strokeStyle = '#2b2b2b'; cx.lineWidth = 10;
    cx.font = 'bold 104px monospace'; cx.textAlign = 'center'; cx.textBaseline = 'middle';
    cx.strokeText(L.ch, 64, 70); cx.fillText(L.ch, 64, 70);
    const tex = new THREE.CanvasTexture(cv);
    const spr = new THREE.Mesh(new THREE.PlaneGeometry(0.9, 0.9),
      new THREE.MeshBasicMaterial({ map: tex, transparent: true, side: THREE.DoubleSide }));
    const base = heightAt(L.x, L.z);
    spr.position.set(L.x, Math.max(base, 0) + L.y, L.z);
    spr.userData = { ch: L.ch, taken: false, baseY: spr.position.y, letterId: L.id };
    return spr;
  });
}

// ---------------------------------------------------------------- whole scene
// Returns the same shape bookquoy's buildLevel returns, so exports are drop-ins.
export function buildParkScene(scene, park, opts = {}) {
  const heightAt = makeHeightAt(park);
  const ground = buildGround(park);
  scene.add(ground);
  const rails = buildRails(park);
  scene.add(rails);
  const props = buildProps(park, heightAt, opts.onPropLoaded);
  scene.add(props);
  let letterMeshes = [];
  if (!opts.skipLetters) {
    letterMeshes = buildLetters(park, heightAt);
    for (const m of letterMeshes) scene.add(m);
  }
  return { ground, rails, props, letterMeshes };
}