3d-spinner 0.9.2 → 0.9.4

package/dist/cjs/animations/spin.cjs

@@ -797,6 +797,7 @@ function orderRenderItems(items, eye) {
   return opaque.concat(transparent);
 }
 async function createRenderer(backend, options = {}) {
+  if (typeof backend === "function") return backend(options);
   switch (backend) {
     case "webgl":
       return new (await Promise.resolve().then(() => (init_webgl(), webgl_exports))).WebGLRenderer(options);
@@ -874,7 +875,7 @@ function transform(init) {
 init_renderer();
 init_light();
 
-// src/engines/little-3d-engine/shapes/cube.ts
+// src/engines/little-3d-engine/shapes/primitives/cube.ts
 var DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 function cube(size = 1, colors = DEFAULT_COLORS) {
   const h = size / 2;
@@ -899,7 +900,7 @@ function cube(size = 1, colors = DEFAULT_COLORS) {
   return { vertices, faces };
 }
 
-// src/engines/little-3d-engine/shapes/icosphere.ts
+// src/engines/little-3d-engine/shapes/primitives/spheres/icosphere.ts
 init_geometry();
 var T = (1 + Math.sqrt(5)) / 2;
 var SEED_VERTICES = [
@@ -917,7 +918,7 @@ var SEED_VERTICES = [
   { x: -T, y: 0, z: 1 }
 ];
 
-// src/engines/little-3d-engine/shapes/octa-sphere.ts
+// src/engines/little-3d-engine/shapes/primitives/spheres/octa-sphere.ts
 init_geometry();
 
 // src/engines/little-3d-engine/little-3d-engine.ts

package/dist/cjs/composite-animation.cjs

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/composite-animation.ts
+var composite_animation_exports = {};
+__export(composite_animation_exports, {
+  CompositeAnimation: () => CompositeAnimation
+});
+module.exports = __toCommonJS(composite_animation_exports);
+var CompositeAnimation = class {
+  constructor(layers) {
+    this.elements = [];
+    this.layers = layers.map((layer) => "animation" in layer ? layer : { animation: layer });
+  }
+  mount(target) {
+    target.style.position = "relative";
+    for (const [index, layer] of this.layers.entries()) {
+      const element = document.createElement("div");
+      element.style.cssText = `position:absolute;inset:0;z-index:${layer.zIndex ?? index}`;
+      target.appendChild(element);
+      this.elements.push(element);
+      layer.animation.mount(element);
+    }
+  }
+  enter(now) {
+    for (const layer of this.layers) layer.animation.enter(now);
+  }
+  exit(now) {
+    for (const layer of this.layers) layer.animation.exit(now);
+  }
+  render(now, frame) {
+    for (const layer of this.layers) layer.animation.render(now, frame);
+  }
+  isFinished() {
+    return this.layers.every((layer) => layer.animation.isFinished());
+  }
+  destroy() {
+    for (const layer of this.layers) layer.animation.destroy();
+    for (const element of this.elements) element.remove();
+    this.elements.length = 0;
+  }
+};

package/dist/cjs/engines/little-3d-engine/little-3d-engine.cjs

@@ -825,6 +825,7 @@ function orderRenderItems(items, eye) {
   return opaque.concat(transparent);
 }
 async function createRenderer(backend, options = {}) {
+  if (typeof backend === "function") return backend(options);
   switch (backend) {
     case "webgl":
       return new (await Promise.resolve().then(() => (init_webgl(), webgl_exports))).WebGLRenderer(options);
@@ -861,8 +862,13 @@ __export(little_3d_engine_exports, {
   octaSphere: () => octaSphere,
   octahedron: () => octahedron,
   orderRenderItems: () => orderRenderItems,
+  planeMesh: () => planeMesh,
   pyramid: () => pyramid,
+  quad: () => quad,
   scale: () => scale,
+  shineTexture: () => shineTexture,
+  starTexture: () => starTexture,
+  streakTexture: () => streakTexture,
   subtract: () => subtract,
   tetrahedron: () => tetrahedron,
   transform: () => transform,
@@ -921,7 +927,7 @@ function transform(init) {
 init_renderer();
 init_light();
 
-// src/engines/little-3d-engine/shapes/cube.ts
+// src/engines/little-3d-engine/shapes/primitives/cube.ts
 var DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 function cube(size = 1, colors = DEFAULT_COLORS) {
   const h = size / 2;
@@ -946,9 +952,22 @@ function cube(size = 1, colors = DEFAULT_COLORS) {
   return { vertices, faces };
 }
 
-// src/engines/little-3d-engine/shapes/tetrahedron.ts
-var DEFAULT_COLORS2 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b"];
-function tetrahedron(size = 1, colors = DEFAULT_COLORS2) {
+// src/engines/little-3d-engine/shapes/primitives/quad.ts
+var DEFAULT_COLORS2 = ["#3b82f6"];
+function quad(size = 1, colors = DEFAULT_COLORS2) {
+  const s = size / 2;
+  const vertices = [
+    { x: -s, y: -s, z: 0 },
+    { x: s, y: -s, z: 0 },
+    { x: s, y: s, z: 0 },
+    { x: -s, y: s, z: 0 }
+  ];
+  return { vertices, faces: [{ indices: [0, 1, 2, 3], color: colors[0] }] };
+}
+
+// src/engines/little-3d-engine/shapes/primitives/tetrahedron.ts
+var DEFAULT_COLORS3 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b"];
+function tetrahedron(size = 1, colors = DEFAULT_COLORS3) {
   const s = size / 2;
   const vertices = [
     { x: s, y: s, z: s },
@@ -965,8 +984,8 @@ function tetrahedron(size = 1, colors = DEFAULT_COLORS2) {
   return { vertices, faces };
 }
 
-// src/engines/little-3d-engine/shapes/octahedron.ts
-var DEFAULT_COLORS3 = [
+// src/engines/little-3d-engine/shapes/primitives/octahedron.ts
+var DEFAULT_COLORS4 = [
   "#3b82f6",
   "#8b5cf6",
   "#ec4899",
@@ -976,7 +995,7 @@ var DEFAULT_COLORS3 = [
   "#06b6d4",
   "#eab308"
 ];
-function octahedron(size = 1, colors = DEFAULT_COLORS3) {
+function octahedron(size = 1, colors = DEFAULT_COLORS4) {
   const r = size / 2;
   const vertices = [
     { x: r, y: 0, z: 0 },
@@ -999,9 +1018,9 @@ function octahedron(size = 1, colors = DEFAULT_COLORS3) {
   return { vertices, faces };
 }
 
-// src/engines/little-3d-engine/shapes/pyramid.ts
-var DEFAULT_COLORS4 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
-function pyramid(size = 1, colors = DEFAULT_COLORS4) {
+// src/engines/little-3d-engine/shapes/primitives/pyramid.ts
+var DEFAULT_COLORS5 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
+function pyramid(size = 1, colors = DEFAULT_COLORS5) {
   const h = size / 2;
   const vertices = [
     { x: -h, y: -h, z: h },
@@ -1020,9 +1039,9 @@ function pyramid(size = 1, colors = DEFAULT_COLORS4) {
   return { vertices, faces };
 }
 
-// src/engines/little-3d-engine/shapes/uv-sphere.ts
-var DEFAULT_COLORS5 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
-function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS5) {
+// src/engines/little-3d-engine/shapes/primitives/spheres/uv-sphere.ts
+var DEFAULT_COLORS6 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS6) {
   const r = size / 2;
   const d = Math.max(1, Math.floor(detail));
   const slices = Math.max(4, d * 4);
@@ -1064,9 +1083,9 @@ function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS5) {
   return { vertices, faces };
 }
 
-// src/engines/little-3d-engine/shapes/icosphere.ts
+// src/engines/little-3d-engine/shapes/primitives/spheres/icosphere.ts
 init_geometry();
-var DEFAULT_COLORS6 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+var DEFAULT_COLORS7 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 var T = (1 + Math.sqrt(5)) / 2;
 var SEED_VERTICES = [
   { x: -1, y: T, z: 0 },
@@ -1104,13 +1123,13 @@ var SEED_FACES = [
   [8, 6, 7],
   [9, 8, 1]
 ];
-function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS6) {
+function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS7) {
   return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
 }
 
-// src/engines/little-3d-engine/shapes/octa-sphere.ts
+// src/engines/little-3d-engine/shapes/primitives/spheres/octa-sphere.ts
 init_geometry();
-var DEFAULT_COLORS7 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+var DEFAULT_COLORS8 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 var SEED_VERTICES2 = [
   { x: 1, y: 0, z: 0 },
   { x: -1, y: 0, z: 0 },
@@ -1129,12 +1148,12 @@ var SEED_FACES2 = [
   [5, 3, 1],
   [5, 0, 3]
 ];
-function octaSphere(size = 1, detail = 1, colors = DEFAULT_COLORS7) {
+function octaSphere(size = 1, detail = 1, colors = DEFAULT_COLORS8) {
   return sphereFromTriangles(SEED_VERTICES2, SEED_FACES2, size, detail, colors);
 }
 
-// src/engines/little-3d-engine/shapes/cube-sphere.ts
-var DEFAULT_COLORS8 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+// src/engines/little-3d-engine/shapes/primitives/spheres/cube-sphere.ts
+var DEFAULT_COLORS9 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 var CUBE_FACES = [
   { normal: [0, 0, 1], right: [1, 0, 0], up: [0, 1, 0] },
   { normal: [0, 0, -1], right: [-1, 0, 0], up: [0, 1, 0] },
@@ -1143,7 +1162,7 @@ var CUBE_FACES = [
   { normal: [0, 1, 0], right: [1, 0, 0], up: [0, 0, -1] },
   { normal: [0, -1, 0], right: [1, 0, 0], up: [0, 0, 1] }
 ];
-function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS8) {
+function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS9) {
   const r = size / 2;
   const n = Math.max(1, Math.floor(detail));
   const vertices = [];
@@ -1175,6 +1194,108 @@ function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS8) {
   return { vertices, faces };
 }
 
+// src/engines/little-3d-engine/shapes/complex/plane.ts
+var DEFAULT_COLORS10 = ["#e0f2fe", "#7dd3fc", "#38bdf8", "#f8fafc"];
+function planeMesh(colors = DEFAULT_COLORS10) {
+  return {
+    vertices: [
+      { x: 0.9, y: 0, z: 0 },
+      { x: -0.2, y: 0, z: 0.82 },
+      { x: -0.55, y: 0, z: 0.16 },
+      { x: -0.72, y: 0, z: 0 },
+      { x: -0.55, y: 0, z: -0.16 },
+      { x: -0.2, y: 0, z: -0.82 },
+      { x: -0.08, y: 0.12, z: 0 },
+      { x: -0.08, y: -0.1, z: 0 },
+      { x: -0.52, y: 0.38, z: 0 }
+    ],
+    faces: [
+      { indices: [6, 1, 0], color: colors[0] ?? DEFAULT_COLORS10[0] },
+      { indices: [6, 2, 1], color: colors[3] ?? DEFAULT_COLORS10[3] },
+      { indices: [6, 3, 2], color: colors[1] ?? DEFAULT_COLORS10[1] },
+      { indices: [6, 4, 3], color: colors[2] ?? DEFAULT_COLORS10[2] },
+      { indices: [6, 5, 4], color: colors[3] ?? DEFAULT_COLORS10[3] },
+      { indices: [6, 0, 5], color: colors[0] ?? DEFAULT_COLORS10[0] },
+      { indices: [7, 0, 1], color: colors[1] ?? DEFAULT_COLORS10[1] },
+      { indices: [7, 1, 2], color: colors[2] ?? DEFAULT_COLORS10[2] },
+      { indices: [7, 2, 3], color: colors[1] ?? DEFAULT_COLORS10[1] },
+      { indices: [7, 3, 4], color: colors[2] ?? DEFAULT_COLORS10[2] },
+      { indices: [7, 4, 5], color: colors[1] ?? DEFAULT_COLORS10[1] },
+      { indices: [7, 5, 0], color: colors[2] ?? DEFAULT_COLORS10[2] },
+      { indices: [3, 6, 8], color: colors[0] ?? DEFAULT_COLORS10[0] },
+      { indices: [3, 8, 6], color: colors[1] ?? DEFAULT_COLORS10[1] }
+    ]
+  };
+}
+
+// src/engines/little-3d-engine/textures/dynamic/canvas-texture.ts
+function canvasTexture(draw, size = 96) {
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  if (ctx) draw(ctx);
+  return canvas;
+}
+
+// src/engines/little-3d-engine/textures/dynamic/star.ts
+function drawStar(ctx) {
+  ctx.save();
+  ctx.translate(48, 48);
+  ctx.fillStyle = "#fff";
+  ctx.beginPath();
+  for (let index = 0; index < 10; index++) {
+    const radius = index % 2 === 0 ? 43 : 16;
+    const angle = index * Math.PI / 5 - Math.PI / 2;
+    ctx.lineTo(radius * Math.cos(angle), radius * Math.sin(angle));
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+function starTexture(options = {}) {
+  const glow = Math.max(0, options.glow ?? 0);
+  return canvasTexture((ctx) => {
+    if (glow > 0) {
+      ctx.save();
+      ctx.filter = `blur(${glow}px)`;
+      drawStar(ctx);
+      ctx.restore();
+    }
+    drawStar(ctx);
+  });
+}
+
+// src/engines/little-3d-engine/textures/dynamic/shine.ts
+function shineTexture() {
+  return canvasTexture((ctx) => {
+    const halo = ctx.createRadialGradient(48, 48, 1, 48, 48, 46);
+    halo.addColorStop(0, "rgba(255,255,255,1)");
+    halo.addColorStop(0.08, "rgba(255,255,255,1)");
+    halo.addColorStop(0.22, "rgba(210,240,255,0.7)");
+    halo.addColorStop(0.55, "rgba(120,200,255,0.22)");
+    halo.addColorStop(1, "rgba(80,160,255,0)");
+    ctx.fillStyle = halo;
+    ctx.fillRect(0, 0, 96, 96);
+  });
+}
+
+// src/engines/little-3d-engine/textures/dynamic/streak.ts
+function streakTexture() {
+  return canvasTexture((ctx) => {
+    const gradient = ctx.createLinearGradient(5, 0, 91, 0);
+    gradient.addColorStop(0, "rgba(255,255,255,0)");
+    gradient.addColorStop(0.7, "rgba(255,255,255,0.4)");
+    gradient.addColorStop(1, "rgba(255,255,255,1)");
+    ctx.strokeStyle = gradient;
+    ctx.lineWidth = 3.5;
+    ctx.lineCap = "round";
+    ctx.beginPath();
+    ctx.moveTo(5, 48);
+    ctx.lineTo(91, 48);
+    ctx.stroke();
+  });
+}
+
 // src/engines/little-3d-engine/little-3d-engine.ts
 init_geometry();
 init_renderer();

package/dist/cjs/engines/little-3d-engine/loaders/obj.cjs

@@ -24,14 +24,39 @@ __export(obj_exports, {
 });
 module.exports = __toCommonJS(obj_exports);
 var DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+function channelToHex(value) {
+  const channel = Number.parseFloat(value);
+  if (!Number.isFinite(channel)) return void 0;
+  return Math.round(Math.min(1, Math.max(0, channel)) * 255).toString(16).padStart(2, "0");
+}
+function parseMtlColors(text) {
+  const colors = /* @__PURE__ */ new Map();
+  let material;
+  for (const line of text.split("\n")) {
+    const trimmed = line.trim();
+    if (trimmed === "" || trimmed.startsWith("#")) continue;
+    const parts = trimmed.split(/\s+/);
+    if (parts[0] === "newmtl") {
+      material = parts.slice(1).join(" ");
+    } else if (parts[0] === "Kd" && material) {
+      const channels = parts.slice(1, 4).map(channelToHex);
+      if (channels.length === 3 && channels.every((channel) => channel !== void 0)) {
+        colors.set(material, `#${channels.join("")}`);
+      }
+    }
+  }
+  return colors;
+}
 function resolveIndex(token, vertexCount) {
   const n = parseInt(token, 10);
   return n < 0 ? vertexCount + n : n - 1;
 }
 function parseObj(text, options = {}) {
   const colors = options.colors ?? DEFAULT_COLORS;
+  const materialColors = options.useMtlColors && options.mtl ? parseMtlColors(options.mtl) : void 0;
   const vertices = [];
   const faces = [];
+  let material;
   for (const line of text.split("\n")) {
     const trimmed = line.trim();
     if (trimmed === "" || trimmed.startsWith("#")) continue;
@@ -43,6 +68,8 @@ function parseObj(text, options = {}) {
         y: parseFloat(parts[2]),
         z: parseFloat(parts[3])
       });
+    } else if (keyword === "usemtl") {
+      material = parts.slice(1).join(" ");
     } else if (keyword === "f") {
       const indices = [];
       for (let i = 1; i < parts.length; i++) {
@@ -50,7 +77,9 @@ function parseObj(text, options = {}) {
         indices.push(resolveIndex(vertexToken, vertices.length));
       }
       if (indices.length >= 3) {
-        faces.push({ indices, color: colors[faces.length % colors.length] });
+        const mtlColor = material ? materialColors?.get(material) : void 0;
+        const color = mtlColor ?? (materialColors ? colors[0] ?? "#888888" : colors[faces.length % colors.length]);
+        faces.push({ indices, color });
       }
     }
   }