sprite-machine 0.1.1 → 0.2.0

package/README.md

@@ -1,20 +1,20 @@
 # sprite-machine
 
 Turns a 3×2 sheet of pixel-art face sprites (left / front / top over right /
-back / bottom) into a low-poly, textured three.js mesh or a glTF 2.0 binary.
-One pixel is one voxel. 45° wedges smooth every same-colour staircase, and
-the colour comes from a nearest-sampled skin texture.
+back / bottom) into a low-poly, textured model: indexed triangle buffers and
+a skin bitmap, or a glTF 2.0 binary. One pixel is one voxel. 45° wedges
+smooth every same-colour staircase, and the colour comes from a
+nearest-sampled skin texture.
 
 This is the engine behind [Sprite Machine](https://aportilla.github.io/sprite-machine/),
 the desktop app that draws these sheets. It runs at a build step, at a
 server's startup, or in the browser.
 
 ```bash
-npm install sprite-machine three
+npm install sprite-machine
 ```
 
-`three` is a peer dependency: the mesh is a `THREE.Mesh`, and the mesher uses
-three's geometry utilities. Requires Node 20.19+ or 22.12+.
+The root entry depends on `earcut` alone. Requires Node 20.19+ or 22.12+.
 
 ## The API
 
@@ -23,8 +23,11 @@ import { buildModel, modelToGlb } from 'sprite-machine';
 
 // sheet: {width, height, data}, an ImageData or the same shape
 const model = buildModel(sheet, { transforms, layers });
-//   → { mesh, dims, triangles, warnings, unitsPerVoxel: 1 }
-//     mesh is a THREE.Mesh at one unit per voxel, its skin the material's map.
+//   → { geometry, skin, color, triangles, dims, warnings, unitsPerVoxel: 1 }
+//     geometry is { position, normal, uv, index, bounds }: Float32 xyz per
+//     vertex at one unit per voxel, centered on X and Z, unit normals, uv
+//     pairs in [0, 1], a Uint32 CCW triangle index and the bounds. skin is
+//     the texture, { width, height, data }, sRGB RGBA with row 0 at v = 0.
 //     transforms is the per-view reorientation (optional). layers is the
 //     sheet's block count (optional, 1 by default; see Layers).
 
@@ -34,10 +37,27 @@ const glb = modelToGlb(model, { name: 'car', voxelsPerMeter: 10 });
 ```
 
 Both functions are synchronous and pure. `buildModel` throws on an invalid
-sheet or a sheet with no painted view in any layer. A three.js page can use
-`model.mesh` directly, and a Node process writes the glb. To build off the main
+sheet or a sheet with no painted view in any layer. To build off the main
 thread, call them from a worker or a child process.
 
+### In three.js
+
+Two routes. `sprite-machine/three` turns the model into a `THREE.Mesh`, with
+`three` installed beside the engine:
+
+```js
+import { toMesh, toGeometry, skinTexture } from 'sprite-machine/three';
+
+const mesh = toMesh(model); // a flat-shaded MeshStandardMaterial over the skin
+const geo = toGeometry(model.geometry); // a BufferGeometry with its bounds
+const map = skinTexture(model.skin); // a DataTexture, nearest, sRGB, flipY false
+```
+
+Or write the glb and load it with `GLTFLoader`, which reads the sampler, the
+sRGB texture, the unlit extension and the node name. Every other engine loads
+the glb. `three` is an optional peer (0.152 or later), and the root entry
+never imports it.
+
 ### In Node: a document PNG in
 
 ```js
@@ -56,8 +76,7 @@ otherwise. It takes an optional `name`, which overrides the Title chunk. With
 neither, the name is `'sprite'`.
 
 `sprite-machine/node` is the only entry with a PNG decoder. The root entry
-takes pixels and depends only on three, so a browser bundle never includes
-`pngjs`. In a browser, decode with `createImageBitmap` and a canvas, and pass
+takes pixels, so a browser bundle never includes `pngjs`. In a browser, decode with `createImageBitmap` and a canvas, and pass
 the `ImageData` to `buildModel`.
 
 ### The CLI

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprite-machine",
-  "version": "0.1.1",
-  "description": "Turn a sheet of pixel-art face sprites into a low-poly, textured three.js mesh or a glTF binary — the engine behind Sprite Machine.",
+  "version": "0.2.0",
+  "description": "Turn a sheet of pixel-art face sprites into a low-poly, textured glTF binary — the engine behind Sprite Machine.",
   "license": "MIT",
   "author": "Adam Portilla",
   "type": "module",
@@ -28,7 +28,8 @@
   "sideEffects": false,
   "exports": {
     ".": "./src/index.js",
-    "./node": "./src/node.js"
+    "./node": "./src/node.js",
+    "./three": "./src/three.js"
   },
   "bin": {
     "sprite-machine": "./bin/sprite-machine.mjs"
@@ -44,9 +45,15 @@
     "typecheck": "tsc -p tsconfig.json"
   },
   "peerDependencies": {
-    "three": "^0.185.0"
+    "three": ">=0.152.0"
+  },
+  "peerDependenciesMeta": {
+    "three": {
+      "optional": true
+    }
   },
   "dependencies": {
+    "earcut": "3.0.2",
     "pngjs": "^7.0.0"
   }
 }

package/src/diag.js

@@ -3,11 +3,15 @@
 // edges used an odd number of times are boundaries. Also returns a histogram of
 // triangle normals by axis.
 
-/** @param {import('three').BufferGeometry} geo */
-export function computeDiag(geo) {
-  const pos = geo.attributes.position.array;
-  const nrm = geo.attributes.normal.array;
-  const idx = geo.index ? geo.index.array : null;
+/**
+ * @param {{position:ArrayLike<number>, normal:ArrayLike<number>,
+ *          index?:ArrayLike<number>|null}} geometry
+ *   flat triangle buffers, non-indexed when index is null
+ */
+export function computeDiag(geometry) {
+  const pos = geometry.position;
+  const nrm = geometry.normal;
+  const idx = geometry.index ?? null;
   const triCount = idx ? idx.length / 3 : pos.length / 9;
   const key = (i) => {
     const x = Math.round(pos[i * 3] * 1e4);

package/src/index.js

@@ -1,6 +1,6 @@
 // Public API of the sprite-machine package. Exports are listed by name: with
 // export *, a name exported by two modules is silently dropped. The Node adapter
-// is sprite-machine/node.
+// is sprite-machine/node, the three adapter sprite-machine/three.
 
 export {
   packRGBA,
@@ -64,7 +64,7 @@ export { LAYERS_CHUNK, layersChunk, parseLayersChunk, layerCount } from './layer
 export { traceRegions, planeKey, faceRegions } from './regions.js';
 export { eliminateTJunctions } from './t-junction.js';
 export { bakeSkin, uvOfLattice, swatchUV } from './skin.js';
-export { skinTexture, finishVoxelMesh } from './mesh-util.js';
+export { weldVertices } from './weld.js';
 export { wedgeMesh } from './wedge-mesh.js';
 export {
   PNG_SIGNATURE,

package/src/model.js

@@ -1,25 +1,24 @@
 // Headless entry: a sheet's pixels to a model, and a model to a glb.
 //
 // buildModel runs slice, ingest, carve, colorize, the layer union and the
-// wedge mesher, and returns the mesh at one unit per voxel, so a position is a
-// lattice coordinate. modelToGlb writes the same glb as the app's export, with
-// the skin encoded from bytes. Both are synchronous.
+// wedge mesher, and returns the record at one unit per voxel, so a position is
+// a lattice coordinate. modelToGlb writes the same glb as the app's export,
+// with the skin encoded from bytes. Both are synchronous.
 
 import { sliceLayers, validateSheet } from './atlas.js';
 import { buildLayeredVoxels } from './pipeline.js';
 import { wedgeMesh } from './wedge-mesh.js';
 import { encodePng } from './png-encode.js';
 import { glbFromModel } from './gltf.js';
+import { unpackRGBA } from './ingest.js';
 import { VIEW_NAMES } from './views.js';
 
 /**
- * A built model: the mesh, the lattice dims and the mesh's units per voxel
+ * A built model: the mesher's record, the lattice dims and the units per voxel
  * (1 from buildModel).
- * @typedef {{
- *   mesh: import('three').Mesh,
+ * @typedef {import('./wedge-mesh.js').Built & {
  *   dims: {nx:number, ny:number, nz:number},
  *   unitsPerVoxel: number,
- *   triangles: number,
  *   warnings: string[],
  * }} Model
  */
@@ -34,7 +33,7 @@ import { VIEW_NAMES } from './views.js';
  *   `transforms`: per-view reorientation, as stored in the
  *   `sprite-machine:transforms` chunk, applied in every layer; `layers`: the
  *   sheet's block count
- * @returns {Model}  the mesh at one unit per voxel
+ * @returns {Model}  the model at one unit per voxel
  * @throws on an invalid sheet, or one with no painted view in any layer
  */
 export function buildModel(sheet, { transforms = {}, layers = 1 } = {}) {
@@ -51,20 +50,29 @@ export function buildModel(sheet, { transforms = {}, layers = 1 } = {}) {
     throw new Error('buildModel: the sheet has no painted view.');
   }
   const { nx, ny, nz } = result.dims;
-  const mesh = wedgeMesh(result, { worldSize: Math.max(nx, ny, nz) });
   return {
-    mesh,
+    ...wedgeMesh(result, { worldSize: Math.max(nx, ny, nz) }),
     dims: result.dims,
     unitsPerVoxel: 1,
-    triangles: Number(mesh.userData.triangles) || 0,
     warnings: [...sliced.warnings, ...(result.warnings || [])],
   };
 }
 
+/** The sRGB transfer to linear, one channel in 0..1. */
+const srgbToLinear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+
+/** A packed sRGB color as linear RGB in 0..1. */
+function linearRGB(packed) {
+  const { r, g, b } = unpackRGBA(packed);
+  return [r / 255, g / 255, b / 255].map(srgbToLinear);
+}
+
 /**
  * The model as a glb, with its skin embedded behind a nearest sampler, or its
- * flat color when the material has no map.
- * @param {{mesh: import('three').Mesh, dims: {nx:number, ny:number, nz:number}, unitsPerVoxel?: number}} model
+ * flat color, made linear, when it has no skin.
+ * @param {{geometry: import('./wedge-mesh.js').Geometry,
+ *          skin: import('./skin.js').Skin|null, color?: number|null,
+ *          dims: {nx:number, ny:number, nz:number}, unitsPerVoxel?: number}} model
  * @param {{name: string, voxelsPerMeter?: number, unlit?: boolean, generator?: string}} opts
  *   `voxelsPerMeter` sets the scale (at 10, a 40-voxel car is 4 m long);
  *   `unlit` adds KHR_materials_unlit; `generator` is written to the asset
@@ -74,20 +82,17 @@ export function modelToGlb(
   model,
   { name, voxelsPerMeter = 10, unlit = false, generator }
 ) {
-  const { mesh, dims } = model;
+  const { geometry, skin, dims } = model;
   const unitsPerVoxel = model.unitsPerVoxel ?? 1;
-  const geo = mesh.geometry;
-  const material = /** @type {import('three').MeshStandardMaterial} */ (mesh.material);
-  const map = material.map;
   return glbFromModel({
     name,
-    position: geo.attributes.position.array,
-    normal: geo.attributes.normal.array,
-    uv: geo.attributes.uv.array,
-    index: geo.index.array,
+    position: geometry.position,
+    normal: geometry.normal,
+    uv: geometry.uv,
+    index: geometry.index,
     scale: 1 / (unitsPerVoxel * voxelsPerMeter),
-    image: map ? { bytes: encodePng(map.image) } : null,
-    color: map ? null : material.color.toArray(),
+    image: skin ? { bytes: encodePng(skin) } : null,
+    color: skin || model.color == null ? null : linearRGB(model.color),
     unlit,
     generator,
     extras: { 'sprite-machine': { voxelsPerMeter, dims: { ...dims } } },

package/src/three.js

@@ -0,0 +1,60 @@
+// Three adapter (sprite-machine/three): the mesher's record as three objects.
+// The only entry that imports three, an optional peer.
+
+import * as THREE from 'three';
+import { unpackRGBA } from './ingest.js';
+
+/**
+ * The skin as a DataTexture. The class defaults match the bake: nearest
+ * filtering, no mipmaps, and flipY false so texel row 0 is v = 0. The bytes
+ * are sRGB.
+ * @param {import('./skin.js').Skin} skin
+ * @returns {THREE.DataTexture}
+ */
+export function skinTexture(skin) {
+  const tex = new THREE.DataTexture(skin.data, skin.width, skin.height, THREE.RGBAFormat);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.needsUpdate = true;
+  return tex;
+}
+
+/**
+ * The geometry as an indexed BufferGeometry with its bounds computed. The
+ * arrays are copied.
+ * @param {import('./wedge-mesh.js').Geometry} geometry
+ * @returns {THREE.BufferGeometry}
+ */
+export function toGeometry(geometry) {
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute('position', new THREE.Float32BufferAttribute(geometry.position, 3));
+  geo.setAttribute('normal', new THREE.Float32BufferAttribute(geometry.normal, 3));
+  geo.setAttribute('uv', new THREE.Float32BufferAttribute(geometry.uv, 2));
+  geo.setIndex(new THREE.Uint32BufferAttribute(geometry.index, 1));
+  geo.computeBoundingBox();
+  geo.computeBoundingSphere();
+  return geo;
+}
+
+/**
+ * The model as a flat-shaded Mesh with shadows on. The material takes the
+ * skin as `map`, or with no skin the packed sRGB `color`.
+ * @param {import('./wedge-mesh.js').Built} model
+ * @returns {THREE.Mesh}
+ */
+export function toMesh(model) {
+  const map = model.skin ? skinTexture(model.skin) : null;
+  const mat = new THREE.MeshStandardMaterial({
+    flatShading: true,
+    metalness: 0,
+    roughness: 1,
+    ...(map ? { map } : {}),
+  });
+  if (!map && model.color != null) {
+    const { r, g, b } = unpackRGBA(model.color);
+    mat.color.setRGB(r / 255, g / 255, b / 255, THREE.SRGBColorSpace);
+  }
+  const mesh = new THREE.Mesh(toGeometry(model.geometry), mat);
+  mesh.castShadow = true;
+  mesh.receiveShadow = true;
+  return mesh;
+}

package/src/wedge-mesh.js

@@ -12,22 +12,21 @@
 // - Slopes: the wedge cells of one 45° plane form a grid, greedy-merged by
 //   color into one quad per block.
 // - Base faces: coplanar regions (regions.js) of exposed faces and cap halves,
-//   triangulated with earcut (THREE.ShapeUtils).
+//   triangulated with earcut.
 // Color comes from the skin (skin.js), so regions merge on occupancy alone.
 // UVs are read from lattice positions after the T-junction repair.
 //
 // Not handled: convex staircases still step, and 3D corners where two ridges
 // meet become a step.
 
-import * as THREE from 'three';
-import { mergeVertices } from 'three/addons/utils/BufferGeometryUtils.js';
+import earcut from 'earcut';
 import { voxIndex } from './carve.js';
 import { FACE_GEO, pointOf } from './faces.js';
 import { faceRegions, planeKey } from './regions.js';
 import { unpackRGBA } from './ingest.js';
 import { bakeSkin, uvOfLattice, swatchUV } from './skin.js';
 import { eliminateTJunctions } from './t-junction.js';
-import { finishVoxelMesh, skinTexture } from './mesh-util.js';
+import { weldVertices } from './weld.js';
 import { AXIS_INDEX, FACE_INDEX, faceKeyOf } from './views.js';
 import { DEFAULT_WORLD_SIZE } from './constants.js';
 
@@ -51,6 +50,28 @@ const RIDGES = [
  *            swatch:number|null}} Tri
  */
 
+/**
+ * Indexed triangle buffers: xyz positions centered on X and Z with Y as
+ * authored (see carve.js), unit normals, uv pairs in [0, 1] (zero in flat
+ * mode), CCW index triples and the positions' bounds.
+ * @typedef {{position:Float32Array, normal:Float32Array, uv:Float32Array,
+ *            index:Uint32Array, bounds:{min:number[], max:number[]}}} Geometry
+ */
+
+/**
+ * The mesher's output: the geometry, the skin or, in flat mode, a packed flat
+ * color, and the counts. sprite-machine/three turns it into a THREE.Mesh.
+ * @typedef {{geometry:Geometry, skin:import('./skin.js').Skin|null,
+ *            color:number|null, triangles:number, wedges:number,
+ *            slopes:number, charts:number}} Built
+ */
+
+/**
+ * @param {object} result  a buildVoxels result
+ * @param {{flat?:boolean, worldSize?:number}} [opts]  `flat` skips the skin
+ *   and the wedge gate; `worldSize` is the longest side's length
+ * @returns {Built}
+ */
 export function wedgeMesh(result, opts = {}) {
   const { dims, solid, surfaceMask, faceColor } = result;
   const { nx, ny, nz } = dims;
@@ -284,15 +305,18 @@ export function wedgeMesh(result, opts = {}) {
     const paint = chart
       ? { chart, region }
       : { swatch: flat ? FLAT_COLOR : /** @type {number} */ (region.uniform) >>> 0 };
-    const toV2 = (loop) => loop.map(([a, b]) => new THREE.Vector2(a, b));
-    const faces = THREE.ShapeUtils.triangulateShape(
-      toV2(region.outer),
-      region.holes.map(toV2)
-    );
+    // earcut takes the loops flat, the holes by their first vertex's index.
+    const coords = [];
+    const holeStarts = [];
+    for (const hole of [region.outer, ...region.holes]) {
+      if (hole !== region.outer) holeStarts.push(coords.length / 2);
+      for (const [a, b] of hole) coords.push(a, b);
+    }
+    const faces = earcut(coords, holeStarts);
     const verts = [region.outer, ...region.holes].flat();
     let area = 0;
-    for (const [i0, i1, i2] of faces) {
-      const [p, q, r] = [verts[i0], verts[i1], verts[i2]];
+    for (let k = 0; k < faces.length; k += 3) {
+      const [p, q, r] = [verts[faces[k]], verts[faces[k + 1]], verts[faces[k + 2]]];
       area += Math.abs((q[0] - p[0]) * (r[1] - p[1]) - (r[0] - p[0]) * (q[1] - p[1]));
       pushTri(
         pointOf(region.face, p[0], p[1], region.s),
@@ -336,28 +360,33 @@ export function wedgeMesh(result, opts = {}) {
     }
   }
 
-  // Assemble.
-  let geo = new THREE.BufferGeometry();
-  geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
-  geo.setAttribute('normal', new THREE.Float32BufferAttribute(nrm, 3));
-  geo.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2));
-  // Weld by position, normal and uv, so vertices of differently facing
-  // triangles or of different charts stay split. flatShading ignores the
-  // normals, but this weld and diag.js depend on them.
-  geo = mergeVertices(geo, 1e-4);
+  // 5. Weld by position, normal and uv, so vertices of differently facing
+  // triangles or of different charts stay split. Flat shading ignores the
+  // normals, but this weld and diag.js depend on them. Then center X and Z and
+  // take the bounds.
+  const welded = weldVertices(pos, nrm, uv);
+  const { position } = welded;
+  const dx = (-nx * s) / 2;
+  const dz = (-nz * s) / 2;
+  const min = [Infinity, Infinity, Infinity];
+  const max = [-Infinity, -Infinity, -Infinity];
+  for (let i = 0; i < position.length; i += 3) {
+    position[i] += dx;
+    position[i + 2] += dz;
+    for (let k = 0; k < 3; k++) {
+      const v = position[i + k];
+      if (v < min[k]) min[k] = v;
+      if (v > max[k]) max[k] = v;
+    }
+  }
 
-  const charted = skin ? skin.charts.reduce((n, c) => n + (c ? 1 : 0), 0) : 0;
-  const paint = skin ? { map: skinTexture(skin) } : { color: FLAT_COLOR };
-  return finishVoxelMesh(geo, {
-    nx,
-    nz,
-    s,
-    ...paint,
-    userData: {
-      triangles: geo.index ? geo.index.count / 3 : repaired.length,
-      wedges: wedges.length, // cells
-      slopes,
-      skin: skin ? { width: skin.width, height: skin.height, charts: charted } : null,
-    },
-  });
+  return {
+    geometry: { ...welded, bounds: { min, max } },
+    skin,
+    color: skin ? null : FLAT_COLOR,
+    triangles: welded.index.length / 3,
+    wedges: wedges.length, // cells
+    slopes,
+    charts: skin ? skin.charts.reduce((n, c) => n + (c ? 1 : 0), 0) : 0,
+  };
 }

package/src/weld.js

@@ -0,0 +1,56 @@
+// Vertex weld for the mesher. Indexes flat triangle buffers, merging the
+// vertices whose position, normal and uv agree. A component's key is its value
+// scaled by ten thousand, offset by a half and truncated, the rule three's
+// mergeVertices applies at its default tolerance, so the welded buffers match
+// what it produced. Vertices keep first-seen order.
+
+const SCALE = 1e4;
+const key = (v) => ~~(v * SCALE + 0.5);
+
+/**
+ * @param {Float32Array} position  xyz per vertex, three vertices per triangle
+ * @param {Float32Array} normal  xyz per vertex
+ * @param {Float32Array} uv  uv per vertex
+ * @returns {{position:Float32Array, normal:Float32Array, uv:Float32Array, index:Uint32Array}}
+ *   the unique vertices and a triangle index into them
+ */
+export function weldVertices(position, normal, uv) {
+  const count = position.length / 3;
+  if (!Number.isInteger(count) || normal.length !== count * 3 || uv.length !== count * 2)
+    throw new Error('weldVertices: one normal and one uv per position');
+  const outPosition = new Float32Array(position.length);
+  const outNormal = new Float32Array(normal.length);
+  const outUv = new Float32Array(uv.length);
+  const index = new Uint32Array(count);
+  const seen = new Map();
+  let next = 0;
+  for (let i = 0; i < count; i++) {
+    const p = i * 3;
+    const t = i * 2;
+    const k =
+      `${key(position[p])},${key(position[p + 1])},${key(position[p + 2])},` +
+      `${key(normal[p])},${key(normal[p + 1])},${key(normal[p + 2])},` +
+      `${key(uv[t])},${key(uv[t + 1])}`;
+    let j = seen.get(k);
+    if (j === undefined) {
+      j = next++;
+      seen.set(k, j);
+      const q = j * 3;
+      outPosition[q] = position[p];
+      outPosition[q + 1] = position[p + 1];
+      outPosition[q + 2] = position[p + 2];
+      outNormal[q] = normal[p];
+      outNormal[q + 1] = normal[p + 1];
+      outNormal[q + 2] = normal[p + 2];
+      outUv[j * 2] = uv[t];
+      outUv[j * 2 + 1] = uv[t + 1];
+    }
+    index[i] = j;
+  }
+  return {
+    position: outPosition.slice(0, next * 3),
+    normal: outNormal.slice(0, next * 3),
+    uv: outUv.slice(0, next * 2),
+    index,
+  };
+}

package/src/mesh-util.js

@@ -1,54 +0,0 @@
-// Mesh helpers for wedge-mesh.js: the skin as a THREE texture, and the final
-// framing and material.
-
-import * as THREE from 'three';
-import { unpackRGBA } from './ingest.js';
-
-/**
- * The skin as a DataTexture. The class defaults match the bake: nearest
- * filtering, no mipmaps, and flipY false so texel row 0 is v = 0. The bytes
- * are sRGB.
- * @param {import('./skin.js').Skin} skin
- * @returns {THREE.DataTexture}
- */
-export function skinTexture(skin) {
-  const tex = new THREE.DataTexture(skin.data, skin.width, skin.height, THREE.RGBAFormat);
-  tex.colorSpace = THREE.SRGBColorSpace;
-  tex.needsUpdate = true;
-  return tex;
-}
-
-/**
- * Final assembly: center the geometry on X and Z, leave Y as authored (see
- * carve.js), compute bounds, and wrap it in a flat-shaded material with
- * shadows on. The material takes the skin as `map`, or with no map a packed
- * sRGB `color`.
- * @param {THREE.BufferGeometry} geo
- * @param {{nx:number, nz:number, s:number, map?:THREE.Texture|null, color?:number|null,
- *          userData?:Record<string,unknown>}} opts
- * @returns {THREE.Mesh}
- */
-export function finishVoxelMesh(
-  geo,
-  { nx, nz, s, map = null, color = null, userData = {} }
-) {
-  geo.translate((-nx * s) / 2, 0, (-nz * s) / 2);
-  geo.computeBoundingBox();
-  geo.computeBoundingSphere();
-
-  const mat = new THREE.MeshStandardMaterial({
-    flatShading: true,
-    metalness: 0,
-    roughness: 1,
-    ...(map ? { map } : {}),
-  });
-  if (!map && color != null) {
-    const { r, g, b } = unpackRGBA(color);
-    mat.color.setRGB(r / 255, g / 255, b / 255, THREE.SRGBColorSpace);
-  }
-  const mesh = new THREE.Mesh(geo, mat);
-  mesh.castShadow = true;
-  mesh.receiveShadow = true;
-  Object.assign(mesh.userData, userData);
-  return mesh;
-}