3d-spinner 0.9.4 → 0.9.6

package/dist/engines/little-3d-engine/renderers/webgpu.js

@@ -7,6 +7,7 @@ struct Uniforms {
   model: mat4x4<f32>,
   toLight: vec4<f32>,
   params: vec4<f32>,
+  eye: vec4<f32>,
 };
 @group(0) @binding(0) var<uniform> u: Uniforms;
 
@@ -14,23 +15,40 @@ struct VSOut {
   @builtin(position) position: vec4<f32>,
   @location(0) normal: vec3<f32>,
   @location(1) color: vec3<f32>,
+  @location(2) emissive: vec3<f32>,
+  @location(3) specular: vec4<f32>,
+  @location(4) worldPos: vec3<f32>,
 };
 
 @vertex
-fn vs(@location(0) pos: vec3<f32>, @location(1) normal: vec3<f32>, @location(2) color: vec3<f32>) -> VSOut {
+fn vs(@location(0) pos: vec3<f32>, @location(1) normal: vec3<f32>, @location(2) color: vec3<f32>, @location(3) emissive: vec3<f32>, @location(4) specular: vec4<f32>) -> VSOut {
   var out: VSOut;
   let m = mat3x3<f32>(u.model[0].xyz, u.model[1].xyz, u.model[2].xyz);
   out.normal = m * normal;
   out.color = color;
-  out.position = u.viewProj * u.model * vec4<f32>(pos, 1.0);
+  out.emissive = emissive;
+  out.specular = specular;
+  let world = u.model * vec4<f32>(pos, 1.0);
+  out.worldPos = world.xyz;
+  out.position = u.viewProj * world;
   return out;
 }
 
 @fragment
 fn fs(in: VSOut) -> @location(0) vec4<f32> {
-  let lambert = max(dot(normalize(in.normal), normalize(u.toLight.xyz)), 0.0);
+  let normal = normalize(in.normal);
+  let toLight = normalize(u.toLight.xyz);
+  let lambert = max(dot(normal, toLight), 0.0);
   let brightness = clamp(u.params.y + u.params.x * lambert, 0.0, 1.0);
-  return vec4<f32>(in.color * brightness, u.params.z);
+  var lit = in.color * brightness;
+  if (lambert > 0.0) {
+    let viewDir = normalize(u.eye.xyz - in.worldPos);
+    let halfVec = normalize(toLight + viewDir);
+    let highlight = pow(max(dot(normal, halfVec), 0.0), in.specular.w) * u.params.x;
+    lit = lit + highlight * in.specular.xyz;
+  }
+  lit = lit + in.emissive;
+  return vec4<f32>(lit, u.params.z);
 }
 `;
 // Maps OpenGL clip space (z in -1..1) to WebGPU clip space (z in 0..1).
@@ -77,13 +95,15 @@ export class WebGPURenderer {
                 {
                     binding: 0,
                     visibility: stage.VERTEX | stage.FRAGMENT,
-                    buffer: { type: "uniform", hasDynamicOffset: true, minBindingSize: 160 },
+                    buffer: { type: "uniform", hasDynamicOffset: true, minBindingSize: 176 },
                 },
             ],
         });
-        const vertexBuffer = (location) => ({
-            arrayStride: 12,
-            attributes: [{ shaderLocation: location, offset: 0, format: "float32x3" }],
+        const vertexBuffer = (location, components = 3) => ({
+            arrayStride: components * 4,
+            attributes: [
+                { shaderLocation: location, offset: 0, format: `float32x${components}` },
+            ],
         });
         const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [layout] });
         const blend = {
@@ -99,7 +119,13 @@ export class WebGPURenderer {
             vertex: {
                 module,
                 entryPoint: "vs",
-                buffers: [vertexBuffer(0), vertexBuffer(1), vertexBuffer(2)],
+                buffers: [
+                    vertexBuffer(0),
+                    vertexBuffer(1),
+                    vertexBuffer(2),
+                    vertexBuffer(3),
+                    vertexBuffer(4, 4),
+                ],
             },
             fragment: {
                 module,
@@ -155,6 +181,8 @@ export class WebGPURenderer {
             position: upload(data.positions),
             normal: upload(data.normals),
             color: upload(data.colors),
+            emissive: upload(data.emissives),
+            specular: upload(data.speculars),
             count: data.count,
         };
         this.cache.set(mesh, result);
@@ -212,7 +240,7 @@ export class WebGPURenderer {
         const bindGroup = this.device.createBindGroup({
             layout,
             entries: [
-                { binding: 0, resource: { buffer: this.uniformBuffer, offset: 0, size: 160 } },
+                { binding: 0, resource: { buffer: this.uniformBuffer, offset: 0, size: 176 } },
             ],
         });
         draws.forEach((draw, i) => {
@@ -221,6 +249,7 @@ export class WebGPURenderer {
             data.set(draw.item.model, 16);
             data.set([frame.light.toLight.x, frame.light.toLight.y, frame.light.toLight.z, 0], 32);
             data.set([frame.light.intensity, frame.light.ambient, draw.opacity, 0], 36);
+            data.set([frame.eye.x, frame.eye.y, frame.eye.z, 0], 40);
             this.device.queue.writeBuffer(this.uniformBuffer, i * UNIFORM_STRIDE, data);
         });
         const encoder = this.device.createCommandEncoder();
@@ -247,6 +276,8 @@ export class WebGPURenderer {
             pass.setVertexBuffer(0, mesh.position);
             pass.setVertexBuffer(1, mesh.normal);
             pass.setVertexBuffer(2, mesh.color);
+            pass.setVertexBuffer(3, mesh.emissive);
+            pass.setVertexBuffer(4, mesh.specular);
             pass.draw(mesh.count);
         });
         pass.end();
@@ -258,6 +289,8 @@ export class WebGPURenderer {
             mesh.position.destroy?.();
             mesh.normal.destroy?.();
             mesh.color.destroy?.();
+            mesh.emissive.destroy?.();
+            mesh.specular.destroy?.();
         }
         this.cache.clear();
         this.uniformBuffer?.destroy?.();

package/dist/engines/little-3d-engine/shapes/complex/plane.d.ts

@@ -1,3 +1,8 @@
-import type { Mesh } from "../../core/mesh.js";
-/** Build a low-poly plane mesh pointing along the positive X axis. */
-export declare function planeMesh(colors?: string[]): Mesh;
+import { type Material, type Mesh } from "../../core/mesh.js";
+/**
+ * Build a low-poly plane mesh pointing along the positive X axis.
+ *
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
+ */
+export declare function planeMesh(colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/complex/plane.js

@@ -1,7 +1,13 @@
+import { attachMaterial } from "../../core/mesh.js";
 const DEFAULT_COLORS = ["#e0f2fe", "#7dd3fc", "#38bdf8", "#f8fafc"];
-/** Build a low-poly plane mesh pointing along the positive X axis. */
-export function planeMesh(colors = DEFAULT_COLORS) {
-    return {
+/**
+ * Build a low-poly plane mesh pointing along the positive X axis.
+ *
+ * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
+ */
+export function planeMesh(colors = DEFAULT_COLORS, material) {
+    return attachMaterial({
         vertices: [
             { x: 0.9, y: 0, z: 0 },
             { x: -0.2, y: 0, z: 0.82 },
@@ -29,5 +35,5 @@ export function planeMesh(colors = DEFAULT_COLORS) {
             { indices: [3, 6, 8], color: colors[0] ?? DEFAULT_COLORS[0] },
             { indices: [3, 8, 6], color: colors[1] ?? DEFAULT_COLORS[1] },
         ],
-    };
+    }, material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/cube.d.ts

@@ -1,9 +1,10 @@
-import type { Mesh } from "../../core/mesh.js";
+import { type Material, type Mesh } from "../../core/mesh.js";
 /**
  * Build a cube mesh centered on the origin.
  *
  * @param size Edge length. Defaults to `1`.
  * @param colors Six CSS colors, one per face (front, back, top, bottom, right, left).
  *   Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export declare function cube(size?: number, colors?: string[]): Mesh;
+export declare function cube(size?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/cube.js

@@ -1,3 +1,4 @@
+import { attachMaterial } from "../../core/mesh.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 /**
  * Build a cube mesh centered on the origin.
@@ -5,8 +6,9 @@ const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "
  * @param size Edge length. Defaults to `1`.
  * @param colors Six CSS colors, one per face (front, back, top, bottom, right, left).
  *   Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export function cube(size = 1, colors = DEFAULT_COLORS) {
+export function cube(size = 1, colors = DEFAULT_COLORS, material) {
     const h = size / 2;
     const vertices = [
         { x: -h, y: -h, z: h },
@@ -26,5 +28,5 @@ export function cube(size = 1, colors = DEFAULT_COLORS) {
         { indices: [1, 5, 6, 2], color: colors[4 % colors.length] },
         { indices: [4, 0, 3, 7], color: colors[5 % colors.length] },
     ];
-    return { vertices, faces };
+    return attachMaterial({ vertices, faces }, material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/octahedron.d.ts

@@ -1,8 +1,9 @@
-import type { Mesh } from "../../core/mesh.js";
+import { type Material, type Mesh } from "../../core/mesh.js";
 /**
  * Build a regular octahedron mesh centered on the origin.
  *
  * @param size Distance between opposite vertices. Defaults to `1`.
  * @param colors Eight CSS colors, one per triangular face. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export declare function octahedron(size?: number, colors?: string[]): Mesh;
+export declare function octahedron(size?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/octahedron.js

@@ -1,3 +1,4 @@
+import { attachMaterial } from "../../core/mesh.js";
 const DEFAULT_COLORS = [
     "#3b82f6",
     "#8b5cf6",
@@ -13,8 +14,9 @@ const DEFAULT_COLORS = [
  *
  * @param size Distance between opposite vertices. Defaults to `1`.
  * @param colors Eight CSS colors, one per triangular face. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export function octahedron(size = 1, colors = DEFAULT_COLORS) {
+export function octahedron(size = 1, colors = DEFAULT_COLORS, material) {
     const r = size / 2;
     const vertices = [
         { x: r, y: 0, z: 0 },
@@ -34,5 +36,5 @@ export function octahedron(size = 1, colors = DEFAULT_COLORS) {
         { indices: [5, 3, 1], color: colors[6 % colors.length] },
         { indices: [5, 0, 3], color: colors[7 % colors.length] },
     ];
-    return { vertices, faces };
+    return attachMaterial({ vertices, faces }, material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/pyramid.d.ts

@@ -1,9 +1,10 @@
-import type { Mesh } from "../../core/mesh.js";
+import { type Material, type Mesh } from "../../core/mesh.js";
 /**
  * Build a square pyramid mesh centered on the origin, base down.
  *
  * @param size Base edge length (also the height). Defaults to `1`.
  * @param colors Five CSS colors: the square base, then the four triangular sides.
  *   Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export declare function pyramid(size?: number, colors?: string[]): Mesh;
+export declare function pyramid(size?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/pyramid.js

@@ -1,3 +1,4 @@
+import { attachMaterial } from "../../core/mesh.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
 /**
  * Build a square pyramid mesh centered on the origin, base down.
@@ -5,8 +6,9 @@ const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
  * @param size Base edge length (also the height). Defaults to `1`.
  * @param colors Five CSS colors: the square base, then the four triangular sides.
  *   Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export function pyramid(size = 1, colors = DEFAULT_COLORS) {
+export function pyramid(size = 1, colors = DEFAULT_COLORS, material) {
     const h = size / 2;
     const vertices = [
         { x: -h, y: -h, z: h },
@@ -22,5 +24,5 @@ export function pyramid(size = 1, colors = DEFAULT_COLORS) {
         { indices: [4, 2, 3], color: colors[3 % colors.length] },
         { indices: [4, 3, 0], color: colors[4 % colors.length] },
     ];
-    return { vertices, faces };
+    return attachMaterial({ vertices, faces }, material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/quad.d.ts

@@ -1,9 +1,10 @@
-import type { Mesh } from "../../core/mesh.js";
+import { type Material, type Mesh } from "../../core/mesh.js";
 /**
  * Build a flat square in the XY plane, facing +Z, as a single four-vertex
  * face. Useful as a billboard when kept facing the camera.
  *
  * @param size Edge length. Defaults to `1`.
  * @param colors CSS color for the face. Defaults to a built-in blue.
+ * @param material Optional surface material applied to every face.
  */
-export declare function quad(size?: number, colors?: string[]): Mesh;
+export declare function quad(size?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/quad.js

@@ -1,3 +1,4 @@
+import { attachMaterial } from "../../core/mesh.js";
 const DEFAULT_COLORS = ["#3b82f6"];
 /**
  * Build a flat square in the XY plane, facing +Z, as a single four-vertex
@@ -5,8 +6,9 @@ const DEFAULT_COLORS = ["#3b82f6"];
  *
  * @param size Edge length. Defaults to `1`.
  * @param colors CSS color for the face. Defaults to a built-in blue.
+ * @param material Optional surface material applied to every face.
  */
-export function quad(size = 1, colors = DEFAULT_COLORS) {
+export function quad(size = 1, colors = DEFAULT_COLORS, material) {
     const s = size / 2;
     const vertices = [
         { x: -s, y: -s, z: 0 },
@@ -14,5 +16,5 @@ export function quad(size = 1, colors = DEFAULT_COLORS) {
         { x: s, y: s, z: 0 },
         { x: -s, y: s, z: 0 },
     ];
-    return { vertices, faces: [{ indices: [0, 1, 2, 3], color: colors[0] }] };
+    return attachMaterial({ vertices, faces: [{ indices: [0, 1, 2, 3], color: colors[0] }] }, material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/spheres/cube-sphere.d.ts

@@ -1,4 +1,4 @@
-import type { Mesh } from "../../../core/mesh.js";
+import { type Material, type Mesh } from "../../../core/mesh.js";
 /**
  * Build a cube-sphere (spherified cube) centered on the origin: each cube face
  * is gridded and projected onto the sphere. Even, all-quad, no poles.
@@ -7,5 +7,6 @@ import type { Mesh } from "../../../core/mesh.js";
  * @param detail Subdivisions per cube face edge, `1` = simplest (6 quads).
  *   Defaults to `1`.
  * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export declare function cubeSphere(size?: number, detail?: number, colors?: string[]): Mesh;
+export declare function cubeSphere(size?: number, detail?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/spheres/cube-sphere.js

@@ -1,3 +1,4 @@
+import { attachMaterial } from "../../../core/mesh.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 // right x up == normal for each face, so generated quads wind CCW outward.
 const CUBE_FACES = [
@@ -16,8 +17,9 @@ const CUBE_FACES = [
  * @param detail Subdivisions per cube face edge, `1` = simplest (6 quads).
  *   Defaults to `1`.
  * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
+export function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS, material) {
     const r = size / 2;
     const n = Math.max(1, Math.floor(detail));
     const vertices = [];
@@ -46,5 +48,5 @@ export function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
             }
         }
     }
-    return { vertices, faces };
+    return attachMaterial({ vertices, faces }, material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/spheres/icosphere.d.ts

@@ -1,4 +1,4 @@
-import type { Mesh } from "../../../core/mesh.js";
+import { type Material, type Mesh } from "../../../core/mesh.js";
 /**
  * Build an icosphere (subdivided icosahedron) centered on the origin. Gives the
  * most uniform triangle distribution of the sphere types.
@@ -7,5 +7,6 @@ import type { Mesh } from "../../../core/mesh.js";
  * @param detail Subdivision level, `1` = base icosahedron (20 faces). Each level
  *   splits every triangle into four. Defaults to `1`.
  * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export declare function icosphere(size?: number, detail?: number, colors?: string[]): Mesh;
+export declare function icosphere(size?: number, detail?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/spheres/icosphere.js

@@ -1,4 +1,5 @@
 import { sphereFromTriangles } from "../../../core/geometry.js";
+import { attachMaterial } from "../../../core/mesh.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 const T = (1 + Math.sqrt(5)) / 2;
 const SEED_VERTICES = [
@@ -45,7 +46,8 @@ const SEED_FACES = [
  * @param detail Subdivision level, `1` = base icosahedron (20 faces). Each level
  *   splits every triangle into four. Defaults to `1`.
  * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
-    return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
+export function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS, material) {
+    return attachMaterial(sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors), material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/spheres/octa-sphere.d.ts

@@ -1,4 +1,4 @@
-import type { Mesh } from "../../../core/mesh.js";
+import { type Material, type Mesh } from "../../../core/mesh.js";
 /**
  * Build an octa-sphere (subdivided octahedron) centered on the origin.
  *
@@ -6,5 +6,6 @@ import type { Mesh } from "../../../core/mesh.js";
  * @param detail Subdivision level, `1` = base octahedron (8 faces). Each level
  *   splits every triangle into four. Defaults to `1`.
  * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export declare function octaSphere(size?: number, detail?: number, colors?: string[]): Mesh;
+export declare function octaSphere(size?: number, detail?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/spheres/octa-sphere.js

@@ -1,4 +1,5 @@
 import { sphereFromTriangles } from "../../../core/geometry.js";
+import { attachMaterial } from "../../../core/mesh.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 const SEED_VERTICES = [
     { x: 1, y: 0, z: 0 },
@@ -25,7 +26,8 @@ const SEED_FACES = [
  * @param detail Subdivision level, `1` = base octahedron (8 faces). Each level
  *   splits every triangle into four. Defaults to `1`.
  * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export function octaSphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
-    return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
+export function octaSphere(size = 1, detail = 1, colors = DEFAULT_COLORS, material) {
+    return attachMaterial(sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors), material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/spheres/uv-sphere.d.ts

@@ -1,4 +1,4 @@
-import type { Mesh } from "../../../core/mesh.js";
+import { type Material, type Mesh } from "../../../core/mesh.js";
 /**
  * Build a UV (latitude/longitude) sphere centered on the origin.
  *
@@ -6,5 +6,6 @@ import type { Mesh } from "../../../core/mesh.js";
  * @param detail Tessellation level, `1` = simplest. Higher values add rings and
  *   segments. Defaults to `1`.
  * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export declare function uvSphere(size?: number, detail?: number, colors?: string[]): Mesh;
+export declare function uvSphere(size?: number, detail?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/spheres/uv-sphere.js

@@ -1,3 +1,4 @@
+import { attachMaterial } from "../../../core/mesh.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 /**
  * Build a UV (latitude/longitude) sphere centered on the origin.
@@ -6,8 +7,9 @@ const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "
  * @param detail Tessellation level, `1` = simplest. Higher values add rings and
  *   segments. Defaults to `1`.
  * @param colors CSS colors cycled across faces. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
+export function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS, material) {
     const r = size / 2;
     const d = Math.max(1, Math.floor(detail));
     const slices = Math.max(4, d * 4);
@@ -46,5 +48,5 @@ export function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS) {
             color: color(),
         });
     }
-    return { vertices, faces };
+    return attachMaterial({ vertices, faces }, material);
 }

package/dist/engines/little-3d-engine/shapes/primitives/tetrahedron.d.ts

@@ -1,8 +1,9 @@
-import type { Mesh } from "../../core/mesh.js";
+import { type Material, type Mesh } from "../../core/mesh.js";
 /**
  * Build a regular tetrahedron mesh centered on the origin.
  *
  * @param size Approximate diameter. Defaults to `1`.
  * @param colors Four CSS colors, one per triangular face. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export declare function tetrahedron(size?: number, colors?: string[]): Mesh;
+export declare function tetrahedron(size?: number, colors?: string[], material?: Material): Mesh;

package/dist/engines/little-3d-engine/shapes/primitives/tetrahedron.js

@@ -1,11 +1,13 @@
+import { attachMaterial } from "../../core/mesh.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b"];
 /**
  * Build a regular tetrahedron mesh centered on the origin.
  *
  * @param size Approximate diameter. Defaults to `1`.
  * @param colors Four CSS colors, one per triangular face. Defaults to a built-in palette.
+ * @param material Optional surface material applied to every face.
  */
-export function tetrahedron(size = 1, colors = DEFAULT_COLORS) {
+export function tetrahedron(size = 1, colors = DEFAULT_COLORS, material) {
     const s = size / 2;
     const vertices = [
         { x: s, y: s, z: s },
@@ -19,5 +21,5 @@ export function tetrahedron(size = 1, colors = DEFAULT_COLORS) {
         { indices: [0, 2, 3], color: colors[2 % colors.length] },
         { indices: [1, 3, 2], color: colors[3 % colors.length] },
     ];
-    return { vertices, faces };
+    return attachMaterial({ vertices, faces }, material);
 }