Southwest-Roleplay/model-viewer
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vehicles

Browse Source
This commit is contained in:
jack
2026-09-01 01:04:57 +01:00
parent d3d1c12b28
commit 65c6aaac5b
11 changed files with 1068 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/viewer.js
+194 -19
View File
@@ -1,5 +1,6 @@
import * as THREE from 'three';
import { OrbitControls } from '/vendor/OrbitControls.js';
import { planVehicle, upgradeAtomics, paintSlot, DEFAULT_PAINT } from './vehicle.js';
const MISSING_COLOR = 0xb0b0b0;
@@ -28,6 +29,7 @@ export class Viewer {
this.model = null;
this.textures = [];
this.txds = [];
window.addEventListener('resize', () => this.resize());
this.resize();
@@ -57,6 +59,9 @@ export class Viewer {
}
this.textures.forEach((t) => t.dispose());
this.textures = [];
this.txds = [];
this.paintjob = null;
this.paintColors = null;
}
makeTexture(source) {
@@ -74,19 +79,35 @@ export class Viewer {
return texture;
}
buildMaterial(material, txd, report) {
// Vehicles reference the shared generic/vehicle.txd as well as their own, so
// lookups walk the dictionaries in the order they were given.
findTexture(name) {
const key = name.toLowerCase();
for (const txd of this.txds) {
const source = txd.textures.get(key);
if (source) return source;
}
return null;
}
buildMaterial(material, report, paint) {
// A paint material keeps its colour when textured rather than being reset
// to white: the game multiplies the grunge map over the body colour, which
// is what map * color does here.
const slot = paint ? paintSlot(material.color) : -1;
const params = {
color: new THREE.Color(material.color[0], material.color[1], material.color[2]),
side: THREE.DoubleSide,
shininess: 8,
};
if (slot >= 0) params.color = paint[slot] || paint.fallback;
if (material.texture && material.texture.name) {
const key = material.texture.name.toLowerCase();
const source = txd && txd.textures.get(key);
const source = this.findTexture(material.texture.name);
if (source) {
params.map = this.makeTexture(source);
params.color = new THREE.Color(0xffffff);
if (slot < 0) params.color = new THREE.Color(0xffffff);
if (source.hasAlpha) {
params.transparent = true;
params.alphaTest = 0.35;
@@ -94,7 +115,7 @@ export class Viewer {
}
} else {
report.missingTextures.add(material.texture.name);
params.color = new THREE.Color(MISSING_COLOR);
if (slot < 0) params.color = new THREE.Color(MISSING_COLOR);
}
}
@@ -102,7 +123,12 @@ export class Viewer {
params.transparent = true;
params.opacity = material.color[3];
}
return new THREE.MeshPhongMaterial(params);
const built = new THREE.MeshPhongMaterial(params);
if (slot >= 0) built.userData.paintSlot = slot;
// A vehicle that takes paintjobs marks the panels one covers by giving them
// a remap* texture. Fitting a paintjob swaps that texture out.
if (material.texture && /^remap/i.test(material.texture.name)) built.userData.remap = true;
return built;
}
buildGeometry(geo) {
@@ -117,6 +143,23 @@ export class Viewer {
return geometry;
}
buildMesh(geo, report, paint) {
return new THREE.Mesh(
this.buildGeometry(geo),
geo.materials.length
? geo.materials.map((m) => this.buildMaterial(m, report, paint))
: new THREE.MeshPhongMaterial({ color: MISSING_COLOR, side: THREE.DoubleSide })
);
}
// Counted per instance rather than per build, because the wheel is built once
// and drawn four times.
countMesh(report, geo) {
report.meshes++;
report.vertices += geo.numVertices;
report.triangles += geo.indices.length / 3;
}
// Frames form a tree; an atomic is placed by its frame's world transform.
// Skinned geometry is the exception: its vertices are stored in the space of
// the atomic frame's *parent*, so that frame's own transform is skipped.
@@ -136,9 +179,33 @@ export class Viewer {
return matrix;
}
load(dff, txd) {
// colors is a list of [r, g, b] bytes, one per paint slot. They come from
// carcols, so they are sRGB rather than working space values.
makePaint(colors) {
// A slot with no colour is left undefined so it falls back below, which is
// what a vehicle that only paints two of its four slots wants.
const paint = (colors || []).map((c) =>
Array.isArray(c)
? new THREE.Color().setRGB(c[0] / 255, c[1] / 255, c[2] / 255, THREE.SRGBColorSpace)
: undefined
);
paint.fallback = new THREE.Color().setRGB(
DEFAULT_PAINT[0] / 255,
DEFAULT_PAINT[1] / 255,
DEFAULT_PAINT[2] / 255,
THREE.SRGBColorSpace
);
return paint;
}
// txd is one dictionary or a list of them, searched in order.
// options: { vehicle: true, paint: [[r, g, b], ...] }
load(dff, txd, options = {}) {
this.clear();
this.txds = [].concat(txd || []).filter(Boolean);
const report = { missingTextures: new Set(), meshes: 0, triangles: 0, vertices: 0 };
this.paintColors = options.paint || null;
const paint = options.vehicle ? this.makePaint(options.paint) : null;
const root = new THREE.Object3D();
// RenderWare is Z up; three.js is Y up.
@@ -148,29 +215,137 @@ export class Viewer {
? dff.atomics
: dff.geometries.map((_, i) => ({ geometry: i, frame: -1 }));
for (const atomic of atomics) {
const plan = options.vehicle ? planVehicle(dff, options.upgrades) : null;
atomics.forEach((atomic, index) => {
if (plan && plan.hide.has(index)) return;
const geo = dff.geometries[atomic.geometry];
if (!geo) continue;
const mesh = new THREE.Mesh(
this.buildGeometry(geo),
geo.materials.length
? geo.materials.map((m) => this.buildMaterial(m, txd, report))
: new THREE.MeshPhongMaterial({ color: MISSING_COLOR, side: THREE.DoubleSide })
);
if (!geo) return;
const mesh = this.buildMesh(geo, report, paint);
mesh.applyMatrix4(this.worldMatrix(dff.frames, atomic.frame, geo.skinned));
mesh.name = (dff.frames[atomic.frame] && dff.frames[atomic.frame].name) || 'atomic' + report.meshes;
mesh.name = (dff.frames[atomic.frame] && dff.frames[atomic.frame].name) || 'atomic' + index;
root.add(mesh);
report.meshes++;
report.vertices += geo.numVertices;
report.triangles += geo.indices.length / 3;
this.countMesh(report, geo);
});
if (plan) {
this.addWheels(root, dff, plan, report, paint, options);
this.addParts(root, dff, plan, report, paint);
}
this.scene.add(root);
this.model = root;
if (options.paintjob) this.applyPaintjob(options.paintjob);
this.frame();
return report;
}
// A paintjob is a one texture dictionary that stands in for the remap texture
// on the body panels. The artwork carries the colour, so those panels stop
// taking the primary paint while one is fitted. Pass null to strip it.
applyPaintjob(txd) {
if (!this.model) return;
this.paintjob = txd || null;
const source = txd ? [...txd.textures.values()][0] : null;
const map = source ? this.makeTexture(source) : null;
const paint = this.makePaint(this.paintColors);
this.model.traverse((obj) => {
[].concat(obj.material || []).forEach((material) => {
if (!material.userData.remap) return;
if (map) {
if (material.userData.baseMap === undefined) material.userData.baseMap = material.map;
material.map = map;
material.color.set(0xffffff);
} else {
if (material.userData.baseMap !== undefined) material.map = material.userData.baseMap;
const slot = material.userData.paintSlot;
if (slot !== undefined) material.color.copy(paint[slot] || paint.fallback);
}
material.needsUpdate = true;
});
});
}
// The wheel is built once and cloned per corner, so all four instances share
// one geometry and one material set.
addWheels(root, dff, plan, report, paint, options) {
if (!plan.wheels.length) return;
// A stock wheel already comes at the vehicle's own size; an upgrade wheel is
// modelled at unit diameter and the ide's wheel scale is what sizes it.
// Measured: infernus stock 0.70 with scale 0.70, linerun 1.10 with 1.10,
// every wheel_* upgrade 0.99.
let source = dff;
let atomic = dff.atomics[plan.wheels[0].atomic];
let scale = 1;
// A fitted wheel is re-framed onto the dummy like any other part, so its
// own root transform goes; the stock one is part of the vehicle's own
// hierarchy and keeps it.
let local = new THREE.Matrix4();
if (plan.wheelModel) {
source = plan.wheelModel.dff;
atomic = upgradeAtomics(source)[0];
scale = options.wheelScale || 1;
} else if (atomic) {
local = new THREE.Matrix4().fromArray(source.frames[atomic.frame].matrix);
}
if (!atomic) return;
const geo = source.geometries[atomic.geometry];
if (!geo) return;
// The base is never added to the scene and never transformed: every corner
// clones it, so no corner inherits another's placement.
const base = this.buildMesh(geo, report, paint);
for (const wheel of plan.wheels) {
const mesh = base.clone();
const matrix = this.worldMatrix(dff.frames, wheel.frame, false);
if (wheel.mirror) matrix.multiply(new THREE.Matrix4().makeScale(-1, 1, 1));
if (scale !== 1) matrix.multiply(new THREE.Matrix4().makeScale(scale, scale, scale));
matrix.multiply(local);
mesh.applyMatrix4(matrix);
mesh.name = dff.frames[wheel.frame].name;
root.add(mesh);
this.countMesh(report, geo);
}
}
// Upgrade parts are separate clumps hung off a dummy frame in the vehicle.
// Their textures all come from the shared vehicle.txd, which is already in
// this.txds, and their paint masks go through buildMaterial like any other.
addParts(root, dff, plan, report, paint) {
for (const part of plan.parts) {
const upgrade = part.upgrade.dff;
const attach = this.worldMatrix(dff.frames, part.frame, false);
for (const atomic of upgradeAtomics(upgrade)) {
const geo = upgrade.geometries[atomic.geometry];
if (!geo) continue;
const mesh = this.buildMesh(geo, report, paint);
mesh.applyMatrix4(attach);
mesh.name = part.upgrade.name;
root.add(mesh);
this.countMesh(report, geo);
}
}
}
// Repaint in place - no reparse, no rebuild.
setPaint(colors) {
if (!this.model) return;
this.paintColors = colors;
const paint = this.makePaint(colors);
this.model.traverse((obj) => {
[].concat(obj.material || []).forEach((material) => {
const slot = material.userData && material.userData.paintSlot;
if (slot === undefined) return;
// A panel under a paintjob shows the artwork, not the body colour.
if (this.paintjob && material.userData.remap) return;
material.color.copy(paint[slot] || paint.fallback);
});
});
}
frame() {
if (!this.model) return;
const box = new THREE.Box3().setFromObject(this.model);