update Tue 07/14/2026 16:45:47.62
This commit is contained in:
@@ -38,6 +38,7 @@ app.innerHTML = `${nav('layout')}
|
||||
<button data-add="anchor">+ Anchor</button>
|
||||
<button data-add="building">+ Building</button>
|
||||
<button data-add="spawn">+ Spawn</button>
|
||||
<button data-add="path">+ Path</button>
|
||||
<button id="topView">Top view</button>
|
||||
<span style="flex:1"></span>
|
||||
<button id="reset" class="danger">Reset to seed</button>
|
||||
@@ -48,13 +49,14 @@ app.innerHTML = `${nav('layout')}
|
||||
<div id="view">
|
||||
<canvas id="gl"></canvas>
|
||||
<div id="legend"><b>N = +Z (back of table)</b> · grid 25 cm · drag gizmo to move (0.5 cm snap)<br>
|
||||
flat crest arrow = top edge of print · wall crest arrow = direction the print faces</div>
|
||||
flat crest arrow = top edge of print · wall crest arrow = direction the print faces<br>
|
||||
purple = ghost paths: drag the spheres, cone shows walk direction</div>
|
||||
</div>
|
||||
<div id="side"></div>
|
||||
</div>`;
|
||||
|
||||
let scene = await api('/api/scene');
|
||||
scene.anchors ||= []; scene.buildings ||= []; scene.spawns ||= [];
|
||||
scene.anchors ||= []; scene.buildings ||= []; scene.spawns ||= []; scene.paths ||= [];
|
||||
|
||||
// ---------- three.js setup ----------
|
||||
const cvs = document.getElementById('gl');
|
||||
@@ -102,6 +104,8 @@ const matAnchorFlat = new THREE.MeshStandardMaterial({ color: 0x3bc9a7, side: TH
|
||||
const matAnchorWall = new THREE.MeshStandardMaterial({ color: 0xf65151, side: THREE.DoubleSide });
|
||||
const matBuilding = new THREE.MeshStandardMaterial({ color: 0x529eff, transparent: true, opacity: 0.35 });
|
||||
const matSpawn = new THREE.MeshStandardMaterial({ color: 0xb57f0b });
|
||||
const matPath = new THREE.LineBasicMaterial({ color: 0xc77dff });
|
||||
const matPathPt = new THREE.MeshStandardMaterial({ color: 0xc77dff });
|
||||
|
||||
function buildAll() {
|
||||
gizmo.detach();
|
||||
@@ -141,14 +145,43 @@ function buildAll() {
|
||||
line.computeLineDistances(); m.add(line);
|
||||
objRoot.add(m);
|
||||
});
|
||||
scene.paths.forEach((pth, i) => {
|
||||
const pts = (pth.points || []).map(q => new THREE.Vector3(...q));
|
||||
if (pts.length >= 2) {
|
||||
const lp = pth.mode === 'loop' ? [...pts, pts[0]] : pts;
|
||||
const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(lp), matPath.clone());
|
||||
if (pth.enabled === false) { line.material.transparent = true; line.material.opacity = 0.3; }
|
||||
objRoot.add(line);
|
||||
const dir = lp[1].clone().sub(lp[0]);
|
||||
if (dir.lengthSq() > 1e-4) {
|
||||
const cone = new THREE.Mesh(new THREE.ConeGeometry(2.2, 6, 10), matPathPt);
|
||||
cone.position.copy(lp[0]).addScaledVector(dir, 0.5);
|
||||
cone.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());
|
||||
objRoot.add(cone);
|
||||
}
|
||||
}
|
||||
pts.forEach((q, wi) => {
|
||||
const h = new THREE.Mesh(new THREE.SphereGeometry(3, 14, 10), matPathPt.clone());
|
||||
h.position.copy(q);
|
||||
h.userData = { kind: 'pathpoint', index: i, sub: wi };
|
||||
const drop = new THREE.Line(
|
||||
new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, -q.y, 0)]),
|
||||
new THREE.LineDashedMaterial({ color: 0xc77dff, dashSize: 2, gapSize: 2 }));
|
||||
drop.computeLineDistances(); h.add(drop);
|
||||
objRoot.add(h);
|
||||
});
|
||||
});
|
||||
reselect();
|
||||
}
|
||||
|
||||
function dataOf(s) { return ({ anchor: scene.anchors, building: scene.buildings, spawn: scene.spawns })[s.kind][s.index]; }
|
||||
function dataOf(s) {
|
||||
if (s.kind === 'pathpoint') return scene.paths[s.index];
|
||||
return ({ anchor: scene.anchors, building: scene.buildings, spawn: scene.spawns })[s.kind][s.index];
|
||||
}
|
||||
|
||||
function reselect() {
|
||||
if (!sel) return;
|
||||
const o = objRoot.children.find(c => c.userData.kind === sel.kind && c.userData.index === sel.index);
|
||||
const o = objRoot.children.find(c => c.userData.kind === sel.kind && c.userData.index === sel.index && (sel.sub === undefined || c.userData.sub === sel.sub));
|
||||
if (o) { sel.obj3d = o; gizmo.attach(o); } else { sel = null; gizmo.detach(); }
|
||||
}
|
||||
|
||||
@@ -166,7 +199,7 @@ cvs.addEventListener('pointerup', e => {
|
||||
let top = hits.find(h => { let o = h.object; while (o && !o.userData.kind) o = o.parent; return o && o.userData.kind; });
|
||||
if (top) {
|
||||
let o = top.object; while (!o.userData.kind) o = o.parent;
|
||||
sel = { kind: o.userData.kind, index: o.userData.index, obj3d: o };
|
||||
sel = { kind: o.userData.kind, index: o.userData.index, sub: o.userData.sub, obj3d: o };
|
||||
gizmo.attach(o);
|
||||
} else { sel = null; gizmo.detach(); }
|
||||
panel();
|
||||
@@ -176,10 +209,13 @@ function onGizmoMove() {
|
||||
if (!sel) return;
|
||||
const d = dataOf(sel);
|
||||
const p = sel.obj3d.position;
|
||||
if (sel.kind === 'building') d.position = [+p.x.toFixed(1), +(p.y - d.size[1] / 2).toFixed(1), +p.z.toFixed(1)];
|
||||
if (sel.kind === 'pathpoint') d.points[sel.sub] = [+p.x.toFixed(1), +p.y.toFixed(1), +p.z.toFixed(1)];
|
||||
else if (sel.kind === 'building') d.position = [+p.x.toFixed(1), +(p.y - d.size[1] / 2).toFixed(1), +p.z.toFixed(1)];
|
||||
else d.position = [+p.x.toFixed(1), +p.y.toFixed(1), +p.z.toFixed(1)];
|
||||
panel(false);
|
||||
}
|
||||
// path lines follow their points only after the drag ends (cheap + smooth)
|
||||
gizmo.addEventListener('mouseUp', () => { if (sel && sel.kind === 'pathpoint') buildAll(); });
|
||||
|
||||
// ---------- add / delete ----------
|
||||
document.querySelectorAll('[data-add]').forEach(b => b.onclick = () => {
|
||||
@@ -192,6 +228,10 @@ document.querySelectorAll('[data-add]').forEach(b => b.onclick = () => {
|
||||
} else if (b.dataset.add === 'building') {
|
||||
scene.buildings.push({ name: 'building', position: [t.x, 0, t.z], size: [40, 30, 30], yawDeg: 0 });
|
||||
sel = { kind: 'building', index: scene.buildings.length - 1 };
|
||||
} else if (b.dataset.add === 'path') {
|
||||
scene.paths.push({ id: 'path-' + (scene.paths.length + 1), mode: 'loop', enabled: true,
|
||||
points: [[t.x - 25, 25, t.z], [t.x + 25, 25, t.z], [t.x, 25, t.z + 30]] });
|
||||
sel = { kind: 'pathpoint', index: scene.paths.length - 1, sub: 0 };
|
||||
} else {
|
||||
scene.spawns.push({ id: 'spawn-' + (scene.spawns.length + 1), position: [t.x, 25, t.z], enabled: true });
|
||||
sel = { kind: 'spawn', index: scene.spawns.length - 1 };
|
||||
@@ -246,6 +286,19 @@ function panel(rebuild = true) {
|
||||
h += field('height', o.size[1], v => o.size[1] = v);
|
||||
h += field('depth', o.size[2], v => o.size[2] = v);
|
||||
h += field('yaw °', o.yawDeg || 0, v => o.yawDeg = v, { step: 1 });
|
||||
} else if (sel.kind === 'pathpoint') {
|
||||
h = `<h2>path ${sel.index} · point ${sel.sub + 1}/${o.points.length}</h2>`;
|
||||
h += textField('path id', o.id, v => o.id = v);
|
||||
h += field('mode', o.mode || 'loop', v => o.mode = v, { select: ['loop', 'pingpong'] });
|
||||
h += field('enabled', o.enabled === false ? 'no' : 'yes', v => o.enabled = v === 'yes', { select: ['yes', 'no'] });
|
||||
const pt = o.points[sel.sub];
|
||||
h += field('x (cm)', pt[0], v => pt[0] = v);
|
||||
h += field('y (cm)', pt[1], v => pt[1] = v);
|
||||
h += field('z (cm)', pt[2], v => pt[2] = v);
|
||||
h += `<div class="row"><button id="addPt">+ point after</button><button id="delPt" class="danger">✕ point</button></div>`;
|
||||
h += `<p class="badge">Ghosts walk point→point at path speed, turning to face each new direction.
|
||||
loop = circles forever · pingpong = there and back. Tap other spheres to edit them;
|
||||
the cone marks walk direction. Delete below removes the whole path.</p>`;
|
||||
} else {
|
||||
h += textField('id', o.id, v => o.id = v);
|
||||
h += field('x (cm)', o.position[0], v => o.position[0] = v);
|
||||
@@ -257,9 +310,27 @@ function panel(rebuild = true) {
|
||||
h += `<div class="row" style="margin-top:12px"><button id="del" class="danger">Delete</button></div>`;
|
||||
side.innerHTML = h;
|
||||
document.getElementById('del').onclick = () => {
|
||||
({ anchor: scene.anchors, building: scene.buildings, spawn: scene.spawns })[sel.kind].splice(sel.index, 1);
|
||||
if (sel.kind === 'pathpoint') scene.paths.splice(sel.index, 1);
|
||||
else ({ anchor: scene.anchors, building: scene.buildings, spawn: scene.spawns })[sel.kind].splice(sel.index, 1);
|
||||
sel = null; gizmo.detach(); buildAll(); panel();
|
||||
};
|
||||
wirePathExtras();
|
||||
}
|
||||
|
||||
function wirePathExtras() {
|
||||
const addBtn = document.getElementById('addPt'), delBtn = document.getElementById('delPt');
|
||||
if (addBtn) addBtn.onclick = () => {
|
||||
const pth = dataOf(sel);
|
||||
const a = pth.points[sel.sub], b = pth.points[(sel.sub + 1) % pth.points.length];
|
||||
pth.points.splice(sel.sub + 1, 0, [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2, (a[2] + b[2]) / 2]);
|
||||
sel.sub += 1; buildAll(); panel();
|
||||
};
|
||||
if (delBtn) delBtn.onclick = () => {
|
||||
const pth = dataOf(sel);
|
||||
if (pth.points.length <= 2) return alert('A path needs at least 2 points — delete the whole path instead.');
|
||||
pth.points.splice(sel.sub, 1);
|
||||
sel.sub = Math.max(0, sel.sub - 1); buildAll(); panel();
|
||||
};
|
||||
}
|
||||
|
||||
// ---------- toolbar ----------
|
||||
|
||||
@@ -20,6 +20,7 @@ await requireAuth();
|
||||
const app = document.getElementById('app');
|
||||
let cfg = await api('/api/playlist');
|
||||
const { ghosts } = await api('/api/ghosts');
|
||||
const sceneData = await api('/api/scene');
|
||||
|
||||
const colors = ['Red', 'Yellow', 'Blue'];
|
||||
const rarities = ['Common', 'Rare', 'Epic', 'Legendary'];
|
||||
@@ -35,6 +36,19 @@ function rosterCount() {
|
||||
(!inc.rarities?.length || inc.rarities.includes(g.rarity))).length;
|
||||
}
|
||||
|
||||
function residentRow(r, i) {
|
||||
const gOpts = ghosts.map(g => `<option value="${g.id}" ${g.id === r.id ? 'selected' : ''}>${g.name} (${g.rarity} ${g.color})</option>`).join('');
|
||||
const locOpts = ['<option value="">auto</option>']
|
||||
.concat((sceneData.spawns || []).map(sp => `<option value="s:${sp.id}" ${r.spawnId === sp.id ? 'selected' : ''}>spawn ${sp.id}</option>`))
|
||||
.concat((sceneData.paths || []).map(pt => `<option value="p:${pt.id}" ${r.pathId === pt.id ? 'selected' : ''}>path ${pt.id}</option>`)).join('');
|
||||
const behOpts = ['static', 'wander', 'path'].map(b => `<option ${(r.behavior || 'static') === b ? 'selected' : ''}>${b}</option>`).join('');
|
||||
return `<div class="row" data-res="${i}">
|
||||
<select data-rk="id" style="flex:2;min-width:0">${gOpts}</select>
|
||||
<select data-rk="loc" style="flex:1;min-width:0">${locOpts}</select>
|
||||
<select data-rk="behavior" style="width:86px">${behOpts}</select>
|
||||
<button data-resdel="${i}" class="danger">✕</button></div>`;
|
||||
}
|
||||
|
||||
function render() {
|
||||
app.innerHTML = `${nav('playlist')}<main>
|
||||
<div class="card">
|
||||
@@ -43,7 +57,8 @@ function render() {
|
||||
<div class="row"><label>Dwell time (seconds)</label><input id="dwell" type="number" min="10" value="${cfg.dwellSeconds}"></div>
|
||||
<div class="row"><label>Crossfade (seconds)</label><input id="fade" type="number" min="0" value="${cfg.crossfadeSeconds}"></div>
|
||||
<div class="row"><label>Order</label>
|
||||
<select id="order"><option ${cfg.order === 'shuffle' ? 'selected' : ''}>shuffle</option><option ${cfg.order === 'roster' ? 'selected' : ''}>roster</option></select></div>
|
||||
<select id="order"><option ${cfg.order === 'weighted' ? 'selected' : ''}>weighted</option><option ${cfg.order === 'shuffle' ? 'selected' : ''}>shuffle</option><option ${cfg.order === 'roster' ? 'selected' : ''}>roster</option></select></div>
|
||||
<p style="opacity:.6;font-size:.78rem;margin:4px 0 0">weighted = rarity odds below decide who shows up · shuffle/roster = everyone equally, in random/fixed order</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2 style="margin-top:0">Roster filter <span style="opacity:.6;font-size:.8rem">(${rosterCount()} ghosts match — empty = all)</span></h2>
|
||||
@@ -56,6 +71,27 @@ function render() {
|
||||
<div class="row"><label>Wander radius (cm)</label><input id="wanderRadius" type="number" step="1" value="${cfg.behaviors.wanderRadius}"></div>
|
||||
<div class="row"><label>Wander speed</label><input id="wanderSpeed" type="number" step="0.05" value="${cfg.behaviors.wanderSpeed}"></div>
|
||||
<div class="row"><label>Vertical wander (cm)</label><input id="wanderVertical" type="number" step="1" value="${cfg.behaviors.wanderVertical ?? 10}"></div>
|
||||
<div class="row"><label>Path walk speed (cm/s)</label><input id="pathSpeed" type="number" step="0.5" value="${cfg.behaviors.pathSpeed ?? 8}"></div>
|
||||
<div class="row"><label>Path chance (0–1)</label><input id="pathChance" type="number" step="0.05" min="0" max="1" value="${cfg.behaviors.pathChance ?? 0.4}"></div>
|
||||
<p style="opacity:.6;font-size:.78rem;margin:4px 0 0">Path chance = odds a new ghost takes a free path instead of a spawn point.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2 style="margin-top:0">Rarity: appearances & movement</h2>
|
||||
<table>
|
||||
<tr style="opacity:.6"><td></td><td>appearance weight</td><td>movement scale</td></tr>
|
||||
${rarities.map(r => `<tr>
|
||||
<td style="padding:4px 8px 4px 0">${r}</td>
|
||||
<td><input data-rw="${r}" type="number" step="0.05" min="0" style="width:90px" value="${cfg.rarity?.weights?.[r] ?? 1}"></td>
|
||||
<td><input data-rm="${r}" type="number" step="0.05" min="0" style="width:90px" value="${cfg.rarity?.movementScale?.[r] ?? 1}"></td>
|
||||
</tr>`).join('')}
|
||||
</table>
|
||||
<p style="opacity:.6;font-size:.78rem">Weight: how often they appear in <b>weighted</b> order (Legendary 0.1 = a tenth as often as Common 1.0).
|
||||
Movement scale shrinks wander radius/speed and path speed — 0.4 means rare ghosts drift only a little.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2 style="margin-top:0">Residents <span style="opacity:.6;font-size:.8rem">(permanently in their place — never rotate out)</span></h2>
|
||||
<div id="residents">${(cfg.residents || []).map((r, i) => residentRow(r, i)).join('') || '<em style="opacity:.6">No residents yet</em>'}</div>
|
||||
<button id="addRes" style="margin-top:8px">+ Add resident</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2 style="margin-top:0">Time windows <span style="opacity:.6;font-size:.8rem">(ghosts only appear inside these; empty = always on)</span></h2>
|
||||
@@ -81,6 +117,28 @@ function render() {
|
||||
document.querySelectorAll('[data-del]').forEach(b => b.onclick = () => { cfg.timeWindows.splice(+b.dataset.del, 1); render(); });
|
||||
document.querySelectorAll('#windows input').forEach(inp => inp.onchange = () => cfg.timeWindows[+inp.dataset.i][inp.dataset.k] = inp.value);
|
||||
|
||||
document.getElementById('addRes').onclick = () => {
|
||||
(cfg.residents ||= []).push({ id: ghosts[0].id, behavior: 'static' });
|
||||
render();
|
||||
};
|
||||
document.querySelectorAll('[data-resdel]').forEach(b => b.onclick = () => { cfg.residents.splice(+b.dataset.resdel, 1); render(); });
|
||||
document.querySelectorAll('#residents [data-rk]').forEach(el => el.onchange = () => {
|
||||
const i = +el.closest('[data-res]').dataset.res, r = cfg.residents[i];
|
||||
if (el.dataset.rk === 'id') r.id = el.value;
|
||||
else if (el.dataset.rk === 'behavior') r.behavior = el.value;
|
||||
else {
|
||||
delete r.spawnId; delete r.pathId;
|
||||
if (el.value.startsWith('s:')) r.spawnId = el.value.slice(2);
|
||||
if (el.value.startsWith('p:')) { r.pathId = el.value.slice(2); r.behavior = 'path'; }
|
||||
render(); return;
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('[data-rw],[data-rm]').forEach(el => el.onchange = () => {
|
||||
cfg.rarity ||= { weights: {}, movementScale: {} };
|
||||
if (el.dataset.rw) (cfg.rarity.weights ||= {})[el.dataset.rw] = +el.value;
|
||||
if (el.dataset.rm) (cfg.rarity.movementScale ||= {})[el.dataset.rm] = +el.value;
|
||||
});
|
||||
|
||||
document.getElementById('save').onclick = async () => {
|
||||
cfg.slots = +document.getElementById('slots').value;
|
||||
cfg.dwellSeconds = +document.getElementById('dwell').value;
|
||||
@@ -91,6 +149,8 @@ function render() {
|
||||
wanderRadius: +document.getElementById('wanderRadius').value,
|
||||
wanderSpeed: +document.getElementById('wanderSpeed').value,
|
||||
wanderVertical: +document.getElementById('wanderVertical').value,
|
||||
pathSpeed: +document.getElementById('pathSpeed').value,
|
||||
pathChance: +document.getElementById('pathChance').value,
|
||||
};
|
||||
try { cfg = await api('/api/playlist', 'PUT', cfg); document.getElementById('status').textContent = 'Applied ' + new Date().toLocaleTimeString(); }
|
||||
catch (e) { document.getElementById('status').textContent = 'Failed: ' + e.message; }
|
||||
|
||||
@@ -121,7 +121,8 @@ function scheduleRemove(uid) {
|
||||
const e = activeGhosts.get(uid);
|
||||
if (!e) return removeGhost(uid);
|
||||
// let the client-side crossfade (driven by rec.until) finish, then remove
|
||||
const wait = Math.max(0, e.rec.until - (Date.now() + clockOffset)) + (e.rec.crossfade || 3) * 1000;
|
||||
const until = e.rec.until ?? (Date.now() + clockOffset); // residents removed by config change: fade now
|
||||
const wait = Math.max(0, until - (Date.now() + clockOffset)) + (e.rec.crossfade || 3) * 1000;
|
||||
setTimeout(() => removeGhost(uid), Math.min(wait, 8000));
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,9 @@ export function ghostTransform(rec, nowMs, out) {
|
||||
const base = new THREE.Vector3(...rec.pos);
|
||||
const b = rec.behavior || { type: 'static' };
|
||||
|
||||
if (b.type === 'wander') {
|
||||
if (b.type === 'path') {
|
||||
pathTransform(b, t, out);
|
||||
} else if (b.type === 'wander') {
|
||||
const s = b.seed || 1;
|
||||
const R = b.radius ?? 60; // cm
|
||||
const v = b.speed ?? 0.15;
|
||||
@@ -44,10 +46,51 @@ export function ghostTransform(rec, nowMs, out) {
|
||||
out.rotationY = 0.25 * Math.sin(t * 0.3); // slow idle sway
|
||||
}
|
||||
|
||||
// crossfade opacity: fade in on spawn, fade out approaching `until`
|
||||
// crossfade opacity: fade in on spawn; permanent residents (until == null) never fade out
|
||||
const fade = (rec.crossfade || 3) * 1000;
|
||||
const inA = Math.min(1, (nowMs - rec.spawnedAt) / fade);
|
||||
const outA = Math.min(1, Math.max(0, (rec.until - nowMs) / fade));
|
||||
const outA = rec.until == null ? 1 : Math.min(1, Math.max(0, (rec.until - nowMs) / fade));
|
||||
out.opacity = Math.min(inA, outA);
|
||||
return out;
|
||||
}
|
||||
|
||||
/* Walk a waypoint path at constant speed (cm/s), turning to face travel direction.
|
||||
* Deterministic: position is a pure function of elapsed time, so all viewers agree.
|
||||
* b: { points:[[x,y,z],...], mode:'loop'|'pingpong', speed, phase, seed } */
|
||||
function pathTransform(b, t, out) {
|
||||
const raw = b.points || [];
|
||||
if (raw.length < 2) { out.position.set(...(raw[0] || [0, 0, 0])); out.rotationY = 0; return; }
|
||||
const pts = b.mode === 'loop' ? [...raw, raw[0]] : raw;
|
||||
|
||||
// cumulative segment lengths
|
||||
const cum = [0];
|
||||
for (let i = 1; i < pts.length; i++) {
|
||||
const dx = pts[i][0] - pts[i - 1][0], dy = pts[i][1] - pts[i - 1][1], dz = pts[i][2] - pts[i - 1][2];
|
||||
cum.push(cum[i - 1] + Math.hypot(dx, dy, dz));
|
||||
}
|
||||
const total = cum[cum.length - 1] || 1;
|
||||
|
||||
const wrap = (d) => {
|
||||
if (b.mode === 'pingpong') { const m = ((d % (2 * total)) + 2 * total) % (2 * total); return m < total ? m : 2 * total - m; }
|
||||
return ((d % total) + total) % total;
|
||||
};
|
||||
const sample = (d, v) => {
|
||||
let i = 1; while (i < cum.length - 1 && cum[i] < d) i++;
|
||||
const f = (d - cum[i - 1]) / Math.max(cum[i] - cum[i - 1], 1e-6);
|
||||
v.set(
|
||||
pts[i - 1][0] + (pts[i][0] - pts[i - 1][0]) * f,
|
||||
pts[i - 1][1] + (pts[i][1] - pts[i - 1][1]) * f,
|
||||
pts[i - 1][2] + (pts[i][2] - pts[i - 1][2]) * f);
|
||||
return v;
|
||||
};
|
||||
|
||||
const d = wrap(t * (b.speed ?? 8) + (b.phase || 0));
|
||||
sample(d, out.position);
|
||||
// face where we're heading: sample a few cm ahead so corners turn smoothly
|
||||
const ahead = sample(wrap(t * (b.speed ?? 8) + (b.phase || 0) + 6), _look);
|
||||
const dx = ahead.x - out.position.x, dz = ahead.z - out.position.z;
|
||||
if (dx * dx + dz * dz > 1e-4) out.rotationY = Math.atan2(dx, dz);
|
||||
// gentle float so walking still reads ghostly
|
||||
out.position.y += 2 * Math.sin(t * 1.9 + (b.seed || 0));
|
||||
}
|
||||
const _look = new THREE.Vector3();
|
||||
|
||||
Reference in New Issue
Block a user