94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
import { parseDFF } from './rw/dff.js';
|
|
import { parseTXD } from './rw/txd.js';
|
|
import { Viewer } from './viewer.js';
|
|
|
|
const canvas = document.getElementById('view');
|
|
const statusEl = document.getElementById('status');
|
|
|
|
const viewer = new Viewer(canvas);
|
|
|
|
// The page shows nothing but the model, so a failure is the only thing worth
|
|
// putting on screen. Everything else goes to the console.
|
|
function setError(text) {
|
|
statusEl.textContent = text || '';
|
|
statusEl.style.display = text ? 'block' : 'none';
|
|
}
|
|
|
|
async function fetchBuffer(url) {
|
|
const res = await fetch(url);
|
|
if (!res.ok) throw new Error(`${res.status} fetching ${url}`);
|
|
return res.arrayBuffer();
|
|
}
|
|
|
|
function render(name, dffBuffer, txdBuffer) {
|
|
const dff = parseDFF(dffBuffer);
|
|
const txd = txdBuffer ? parseTXD(txdBuffer) : null;
|
|
const report = viewer.load(dff, txd);
|
|
|
|
console.log(
|
|
`${name}: rw ${dff.versionText}, ${report.meshes} mesh(es), ` +
|
|
`${report.vertices} verts, ${report.triangles} tris, ` +
|
|
`${txd ? txd.textures.size : 0} textures`
|
|
);
|
|
const warnings = [...dff.errors, ...(txd ? txd.errors : [])];
|
|
if (report.missingTextures.size) {
|
|
warnings.push('not in txd: ' + [...report.missingTextures].join(', '));
|
|
}
|
|
warnings.forEach((warning) => console.warn(warning));
|
|
|
|
setError('');
|
|
}
|
|
|
|
async function loadSkin(id) {
|
|
try {
|
|
const res = await fetch(`/api/skin/${encodeURIComponent(id)}`);
|
|
const meta = await res.json();
|
|
if (!res.ok) {
|
|
setError(meta.error || `${res.status} loading ${id}`);
|
|
return;
|
|
}
|
|
const [dffBuffer, txdBuffer] = await Promise.all([
|
|
fetchBuffer(meta.dff),
|
|
meta.txd ? fetchBuffer(meta.txd) : Promise.resolve(null),
|
|
]);
|
|
render(id, dffBuffer, txdBuffer);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError(err.message);
|
|
}
|
|
}
|
|
|
|
function setupDragAndDrop() {
|
|
document.body.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
document.body.classList.add('dragging');
|
|
});
|
|
document.body.addEventListener('dragleave', () => document.body.classList.remove('dragging'));
|
|
document.body.addEventListener('drop', async (e) => {
|
|
e.preventDefault();
|
|
document.body.classList.remove('dragging');
|
|
const files = [...e.dataTransfer.files];
|
|
const dffFile = files.find((f) => f.name.toLowerCase().endsWith('.dff'));
|
|
const txdFile = files.find((f) => f.name.toLowerCase().endsWith('.txd'));
|
|
if (!dffFile) {
|
|
setError('drop a .dff (and its .txd) together');
|
|
return;
|
|
}
|
|
try {
|
|
render(
|
|
dffFile.name.replace(/\.dff$/i, ''),
|
|
await dffFile.arrayBuffer(),
|
|
txdFile ? await txdFile.arrayBuffer() : null
|
|
);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError(err.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
setupDragAndDrop();
|
|
|
|
const match = location.pathname.match(/^\/samp\/skin\/(.+)$/);
|
|
if (match) loadSkin(decodeURIComponent(match[1]));
|