@particle-academy/fancy-3d-babylon 0.1.0 → 0.1.2

package/README.md

@@ -1,5 +1,7 @@
 # @particle-academy/fancy-3d-babylon
 
+[![Fancified](art/fancified.svg)](https://particle.academy)
+
 Babylon.js adapter for [`@particle-academy/fancy-3d`](https://www.npmjs.com/package/@particle-academy/fancy-3d).
 
 `fancy-3d` ships an engine-agnostic core (Scene types + a `CanvasEngine` interface + a DOM/CSS-3D renderer). This package adds a full WebGL renderer on top, plus the React components that mount onto a Babylon `Scene`: `Stage`, `Monitor`, `Card3D`, `Screen`, primitives, and layout helpers (`placeOnGrid`, `placeOnArc`, `placeOnWall`, `placeOnSphere`, `placeOnPath`).
@@ -62,3 +64,9 @@ The core `fancy-3d` is engine-agnostic and lightweight (~80KB). Pulling in Babyl
 ## License
 
 MIT
+
+---
+
+## ⭐ Star Fancy UI
+
+If this package is useful to you, a quick ⭐ on the repo really helps us build a better kit. Thank you!

package/dist/index.cjs

@@ -1,6 +1,11 @@
 'use strict';
 
-var core = require('@babylonjs/core');
+var math_color = require('@babylonjs/core/Maths/math.color');
+var math_vector = require('@babylonjs/core/Maths/math.vector');
+var dynamicTexture = require('@babylonjs/core/Materials/Textures/dynamicTexture');
+var meshBuilder = require('@babylonjs/core/Meshes/meshBuilder');
+var standardMaterial = require('@babylonjs/core/Materials/standardMaterial');
+var mesh = require('@babylonjs/core/Meshes/mesh');
 
 // src/index.ts
 
@@ -403,11 +408,11 @@ function autoPixelSize(worldWidth, worldHeight, density = DEFAULT_DENSITY) {
   return { w, h };
 }
 function buildSurface(scene, name, surface, autoSize) {
-  const mat = new core.StandardMaterial(`${name}-mat`, scene);
-  mat.specularColor = new core.Color3(0.05, 0.05, 0.05);
+  const mat = new standardMaterial.StandardMaterial(`${name}-mat`, scene);
+  mat.specularColor = new math_color.Color3(0.05, 0.05, 0.05);
   if (surface.type === "color") {
-    mat.diffuseColor = core.Color3.FromHexString(surface.color);
-    mat.emissiveColor = core.Color3.FromHexString(surface.color).scale(0.15);
+    mat.diffuseColor = math_color.Color3.FromHexString(surface.color);
+    mat.emissiveColor = math_color.Color3.FromHexString(surface.color).scale(0.15);
     return { material: mat, texture: null };
   }
   let w = surface.pixelWidth;
@@ -419,7 +424,7 @@ function buildSurface(scene, name, surface, autoSize) {
   }
   w = w ?? 512;
   h = h ?? 512;
-  const tex = new core.DynamicTexture(`${name}-tex`, { width: w * TEX_SCALE, height: h * TEX_SCALE }, scene, true);
+  const tex = new dynamicTexture.DynamicTexture(`${name}-tex`, { width: w * TEX_SCALE, height: h * TEX_SCALE }, scene, true);
   tex.vScale = -1;
   tex.vOffset = 1;
   if (surface.type === "paint" && surface.transparent) {
@@ -438,13 +443,13 @@ function buildSurface(scene, name, surface, autoSize) {
   tex.update(false);
   mat.diffuseTexture = tex;
   mat.emissiveTexture = tex;
-  mat.emissiveColor = new core.Color3(0.6, 0.6, 0.6);
+  mat.emissiveColor = new math_color.Color3(0.6, 0.6, 0.6);
   if (tex.hasAlpha) mat.useAlphaFromDiffuseTexture = true;
   return { material: mat, texture: tex };
 }
 function createPanel(opts) {
   const name = opts.name ?? "panel";
-  const m = core.MeshBuilder.CreatePlane(name, { width: opts.width, height: opts.height, sideOrientation: opts.sideOrientation }, opts.scene);
+  const m = meshBuilder.MeshBuilder.CreatePlane(name, { width: opts.width, height: opts.height, sideOrientation: opts.sideOrientation }, opts.scene);
   const { material } = buildSurface(opts.scene, name, opts.surface, {
     worldWidth: opts.width,
     worldHeight: opts.height
@@ -455,7 +460,7 @@ function createPanel(opts) {
 function createBillboard(opts) {
   const m = createPanel({ ...opts, name: opts.name ?? "billboard" });
   if (opts.faceCamera) {
-    m.billboardMode = core.Mesh.BILLBOARDMODE_ALL;
+    m.billboardMode = mesh.Mesh.BILLBOARDMODE_ALL;
   }
   return m;
 }
@@ -463,7 +468,7 @@ var BOX_FACE_ORDER = ["front", "back", "right", "left", "top", "bottom"];
 function createBuilding(opts) {
   const name = opts.name ?? "building";
   if (opts.surface && !opts.faces) {
-    const box2 = core.MeshBuilder.CreateBox(name, { width: opts.width, height: opts.height, depth: opts.depth }, opts.scene);
+    const box2 = meshBuilder.MeshBuilder.CreateBox(name, { width: opts.width, height: opts.height, depth: opts.depth }, opts.scene);
     const { material } = buildSurface(opts.scene, name, opts.surface, {
       worldWidth: opts.width,
       worldHeight: opts.height
@@ -475,7 +480,7 @@ function createBuilding(opts) {
   const faceH = 256;
   const atlasW = faceW * 3;
   const atlasH = faceH * 2;
-  const tex = new core.DynamicTexture(`${name}-atlas`, { width: atlasW * TEX_SCALE, height: atlasH * TEX_SCALE }, opts.scene, true);
+  const tex = new dynamicTexture.DynamicTexture(`${name}-atlas`, { width: atlasW * TEX_SCALE, height: atlasH * TEX_SCALE }, opts.scene, true);
   tex.vScale = -1;
   tex.vOffset = 1;
   const ctx = tex.getContext();
@@ -498,15 +503,15 @@ function createBuilding(opts) {
       paintWidget(ctx, surface.widget, faceW, faceH, surface.selected ?? false);
     }
     ctx.restore();
-    faceUV.push(new core.Vector4(fx / atlasW, 1 - (fy + faceH) / atlasH, (fx + faceW) / atlasW, 1 - fy / atlasH));
+    faceUV.push(new math_vector.Vector4(fx / atlasW, 1 - (fy + faceH) / atlasH, (fx + faceW) / atlasW, 1 - fy / atlasH));
   });
   tex.update(false);
-  const mat = new core.StandardMaterial(`${name}-mat`, opts.scene);
+  const mat = new standardMaterial.StandardMaterial(`${name}-mat`, opts.scene);
   mat.diffuseTexture = tex;
   mat.emissiveTexture = tex;
-  mat.emissiveColor = new core.Color3(0.4, 0.4, 0.4);
-  mat.specularColor = new core.Color3(0.05, 0.05, 0.05);
-  const box = core.MeshBuilder.CreateBox(name, {
+  mat.emissiveColor = new math_color.Color3(0.4, 0.4, 0.4);
+  mat.specularColor = new math_color.Color3(0.05, 0.05, 0.05);
+  const box = meshBuilder.MeshBuilder.CreateBox(name, {
     width: opts.width,
     height: opts.height,
     depth: opts.depth,
@@ -528,7 +533,7 @@ function createPillar(opts) {
 }
 function createCylinder(opts) {
   const name = opts.name ?? "cylinder";
-  const m = core.MeshBuilder.CreateCylinder(name, {
+  const m = meshBuilder.MeshBuilder.CreateCylinder(name, {
     diameter: opts.radius * 2,
     height: opts.height,
     tessellation: opts.tessellation ?? 48
@@ -545,13 +550,13 @@ function createCurvedPanel(opts) {
   const radius = opts.width / opts.arc;
   const tess = opts.tessellation ?? 48;
   const fullCircleSegments = Math.max(8, Math.ceil(tess * (Math.PI * 2) / opts.arc));
-  const m = core.MeshBuilder.CreateCylinder(name, {
+  const m = meshBuilder.MeshBuilder.CreateCylinder(name, {
     diameter: radius * 2,
     height: opts.height,
     tessellation: fullCircleSegments,
     arc: opts.arc / (Math.PI * 2),
-    cap: core.Mesh.NO_CAP,
-    sideOrientation: core.Mesh.DOUBLESIDE
+    cap: mesh.Mesh.NO_CAP,
+    sideOrientation: mesh.Mesh.DOUBLESIDE
   }, opts.scene);
   const { material } = buildSurface(opts.scene, name, opts.surface, {
     worldWidth: opts.width,
@@ -562,7 +567,7 @@ function createCurvedPanel(opts) {
 }
 function createSphere(opts) {
   const name = opts.name ?? "sphere";
-  const m = core.MeshBuilder.CreateSphere(name, { diameter: opts.diameter, segments: opts.segments ?? 32 }, opts.scene);
+  const m = meshBuilder.MeshBuilder.CreateSphere(name, { diameter: opts.diameter, segments: opts.segments ?? 32 }, opts.scene);
   const { material } = buildSurface(opts.scene, name, opts.surface, {
     worldWidth: opts.diameter * Math.PI,
     worldHeight: opts.diameter * Math.PI / 2
@@ -572,7 +577,7 @@ function createSphere(opts) {
 }
 function createDisc(opts) {
   const name = opts.name ?? "disc";
-  const m = core.MeshBuilder.CreateDisc(name, { radius: opts.radius, tessellation: opts.tessellation ?? 64 }, opts.scene);
+  const m = meshBuilder.MeshBuilder.CreateDisc(name, { radius: opts.radius, tessellation: opts.tessellation ?? 64 }, opts.scene);
   const { material } = buildSurface(opts.scene, name, opts.surface, {
     worldWidth: opts.radius * 2,
     worldHeight: opts.radius * 2
@@ -605,7 +610,7 @@ function createSign(opts) {
   const postHeight = opts.postHeight ?? 1.4;
   const postThickness = opts.postThickness ?? 0.12;
   const postColor = opts.postColor ?? "#1f2937";
-  const root = new core.Mesh(`${name}-root`, opts.scene);
+  const root = new mesh.Mesh(`${name}-root`, opts.scene);
   const panel = createBillboard({
     scene: opts.scene,
     name: `${name}-panel`,
@@ -613,16 +618,16 @@ function createSign(opts) {
     height: opts.height,
     surface: opts.surface
   });
-  panel.position = new core.Vector3(0, postHeight + opts.height / 2, 0);
+  panel.position = new math_vector.Vector3(0, postHeight + opts.height / 2, 0);
   panel.parent = root;
-  const post = core.MeshBuilder.CreateBox(`${name}-post`, {
+  const post = meshBuilder.MeshBuilder.CreateBox(`${name}-post`, {
     width: postThickness,
     height: postHeight,
     depth: postThickness
   }, opts.scene);
-  post.position = new core.Vector3(0, postHeight / 2, 0);
-  const postMat = new core.StandardMaterial(`${name}-post-mat`, opts.scene);
-  postMat.diffuseColor = core.Color3.FromHexString(postColor);
+  post.position = new math_vector.Vector3(0, postHeight / 2, 0);
+  const postMat = new standardMaterial.StandardMaterial(`${name}-post-mat`, opts.scene);
+  postMat.diffuseColor = math_color.Color3.FromHexString(postColor);
   post.material = postMat;
   post.parent = root;
   return { root, panel, post };
@@ -631,15 +636,15 @@ function createMonitor(opts) {
   const name = opts.name ?? "monitor";
   const depth = opts.depth ?? 0.18;
   const bezelColor = opts.bezel ?? "#0b0f17";
-  const root = new core.Mesh(`${name}-root`, opts.scene);
-  const body = core.MeshBuilder.CreateBox(`${name}-body`, {
+  const root = new mesh.Mesh(`${name}-root`, opts.scene);
+  const body = meshBuilder.MeshBuilder.CreateBox(`${name}-body`, {
     width: opts.width,
     height: opts.height,
     depth
   }, opts.scene);
-  const bodyMat = new core.StandardMaterial(`${name}-body-mat`, opts.scene);
-  bodyMat.diffuseColor = core.Color3.FromHexString(bezelColor);
-  bodyMat.specularColor = new core.Color3(0.08, 0.08, 0.08);
+  const bodyMat = new standardMaterial.StandardMaterial(`${name}-body-mat`, opts.scene);
+  bodyMat.diffuseColor = math_color.Color3.FromHexString(bezelColor);
+  bodyMat.specularColor = new math_color.Color3(0.08, 0.08, 0.08);
   body.material = bodyMat;
   body.parent = root;
   const screenInset = 0.04;
@@ -654,16 +659,16 @@ function createMonitor(opts) {
     front: opts.screen,
     edge: { type: "color", color: bezelColor }
   });
-  screen.position = new core.Vector3(0, 0, depth / 2 + 5e-3);
+  screen.position = new math_vector.Vector3(0, 0, depth / 2 + 5e-3);
   screen.parent = root;
   let stand;
   if (opts.standHeight && opts.standHeight > 0) {
-    stand = core.MeshBuilder.CreateBox(`${name}-stand`, {
+    stand = meshBuilder.MeshBuilder.CreateBox(`${name}-stand`, {
       width: opts.width * 0.3,
       height: opts.standHeight,
       depth: depth * 1.5
     }, opts.scene);
-    stand.position = new core.Vector3(0, -opts.height / 2 - opts.standHeight / 2, 0);
+    stand.position = new math_vector.Vector3(0, -opts.height / 2 - opts.standHeight / 2, 0);
     stand.material = bodyMat;
     stand.parent = root;
   }
@@ -671,9 +676,9 @@ function createMonitor(opts) {
 }
 function createDecal(opts) {
   const name = opts.name ?? "decal";
-  const normal = opts.normal ?? new core.Vector3(0, 0, -1);
-  const size = new core.Vector3(opts.size.width, opts.size.height, opts.size.depth ?? 1);
-  const decal = core.MeshBuilder.CreateDecal(name, opts.target, {
+  const normal = opts.normal ?? new math_vector.Vector3(0, 0, -1);
+  const size = new math_vector.Vector3(opts.size.width, opts.size.height, opts.size.depth ?? 1);
+  const decal = meshBuilder.MeshBuilder.CreateDecal(name, opts.target, {
     position: opts.position,
     normal,
     size,
@@ -690,7 +695,7 @@ function createDecal(opts) {
   return decal;
 }
 function createWidgetTexture(scene, name, widget, pixelWidth, pixelHeight, selected = false) {
-  const tex = new core.DynamicTexture(name, { width: pixelWidth * TEX_SCALE, height: pixelHeight * TEX_SCALE }, scene, true);
+  const tex = new dynamicTexture.DynamicTexture(name, { width: pixelWidth * TEX_SCALE, height: pixelHeight * TEX_SCALE }, scene, true);
   tex.vScale = -1;
   tex.vOffset = 1;
   tex.hasAlpha = true;
@@ -711,11 +716,11 @@ function normalizedCenter(node, bounds) {
 }
 function placeOnGrid(node, mesh, bounds, opts = {}) {
   const scale = opts.scale ?? 1 / 120;
-  const origin = opts.origin ?? new core.Vector3(0, 0, 0);
+  const origin = opts.origin ?? new math_vector.Vector3(0, 0, 0);
   const { w, h } = sizeOf(node);
   const cx = node.position.x + w / 2 - (bounds.minX + bounds.maxX) / 2;
   const cy = node.position.y + h / 2 - (bounds.minY + bounds.maxY) / 2;
-  mesh.position = new core.Vector3(origin.x + cx * scale, origin.y - cy * scale, origin.z);
+  mesh.position = new math_vector.Vector3(origin.x + cx * scale, origin.y - cy * scale, origin.z);
 }
 function placeOnWall(node, mesh, bounds, opts = {}) {
   const spreadX = opts.spreadX ?? 10;
@@ -723,7 +728,7 @@ function placeOnWall(node, mesh, bounds, opts = {}) {
   const centerY = opts.centerY ?? 1.5;
   const z = opts.z ?? 0;
   const { cx, cy } = normalizedCenter(node, bounds);
-  mesh.position = new core.Vector3((cx - 0.5) * spreadX, centerY + (0.5 - cy) * spreadY, z);
+  mesh.position = new math_vector.Vector3((cx - 0.5) * spreadX, centerY + (0.5 - cy) * spreadY, z);
   mesh.rotation.y = 0;
 }
 function placeOnArc(node, mesh, bounds, opts = {}) {
@@ -733,19 +738,19 @@ function placeOnArc(node, mesh, bounds, opts = {}) {
   const baseY = opts.baseY ?? 0;
   const { cx, cy } = normalizedCenter(node, bounds);
   const angle = (cx - 0.5) * arc;
-  mesh.position = new core.Vector3(Math.sin(angle) * radius, baseY + (0.5 - cy) * height, Math.cos(angle) * radius);
+  mesh.position = new math_vector.Vector3(Math.sin(angle) * radius, baseY + (0.5 - cy) * height, Math.cos(angle) * radius);
   mesh.rotation.y = angle;
 }
 function lerpPath(waypoints, t) {
-  if (waypoints.length === 0) return { pos: new core.Vector3(0, 0, 0), tangent: new core.Vector3(0, 0, 1) };
-  if (waypoints.length === 1) return { pos: waypoints[0].clone(), tangent: new core.Vector3(0, 0, 1) };
+  if (waypoints.length === 0) return { pos: new math_vector.Vector3(0, 0, 0), tangent: new math_vector.Vector3(0, 0, 1) };
+  if (waypoints.length === 1) return { pos: waypoints[0].clone(), tangent: new math_vector.Vector3(0, 0, 1) };
   const segments = waypoints.length - 1;
   const scaled = Math.max(0, Math.min(1, t)) * segments;
   const i = Math.min(segments - 1, Math.floor(scaled));
   const local = scaled - i;
   const a = waypoints[i];
   const b = waypoints[i + 1];
-  const pos = core.Vector3.Lerp(a, b, local);
+  const pos = math_vector.Vector3.Lerp(a, b, local);
   const tangent = b.subtract(a).normalize();
   return { pos, tangent };
 }
@@ -768,7 +773,7 @@ function placeOnPath(node, mesh, bounds, opts) {
 }
 function placeOnSphere(node, mesh, bounds, opts = {}) {
   const radius = opts.radius ?? 5;
-  const center = opts.center ?? new core.Vector3(0, 0, 0);
+  const center = opts.center ?? new math_vector.Vector3(0, 0, 0);
   const latSpan = opts.latSpan ?? Math.PI * 0.7;
   const lonSpan = opts.lonSpan ?? Math.PI * 2;
   const { cx, cy } = normalizedCenter(node, bounds);
@@ -778,7 +783,7 @@ function placeOnSphere(node, mesh, bounds, opts = {}) {
   const x = r * Math.cos(lat) * Math.sin(lon);
   const y = r * Math.sin(lat);
   const z = r * Math.cos(lat) * Math.cos(lon);
-  mesh.position = new core.Vector3(center.x + x, center.y + y, center.z + z);
+  mesh.position = new math_vector.Vector3(center.x + x, center.y + y, center.z + z);
   mesh.rotation.y = lon;
 }
 
@@ -788,7 +793,7 @@ function createBabylonAdapter(deps) {
   return {
     render(spec, ctx) {
       const { w, h } = deps.sizeFor(spec);
-      const tex = new core.DynamicTexture(`tex-${ctx.nodeId}`, { width: w * TEX_SCALE, height: h * TEX_SCALE }, deps.scene3D, true);
+      const tex = new dynamicTexture.DynamicTexture(`tex-${ctx.nodeId}`, { width: w * TEX_SCALE, height: h * TEX_SCALE }, deps.scene3D, true);
       tex.hasAlpha = true;
       tex.vScale = -1;
       tex.vOffset = 1;
@@ -796,13 +801,13 @@ function createBabylonAdapter(deps) {
       c.scale(TEX_SCALE, TEX_SCALE);
       paintWidget(c, spec, w, h, ctx.selected);
       tex.update(false);
-      const mat = new core.StandardMaterial(`mat-${ctx.nodeId}`, deps.scene3D);
+      const mat = new standardMaterial.StandardMaterial(`mat-${ctx.nodeId}`, deps.scene3D);
       mat.diffuseTexture = tex;
       mat.emissiveTexture = tex;
-      mat.emissiveColor = new core.Color3(1, 1, 1);
+      mat.emissiveColor = new math_color.Color3(1, 1, 1);
       mat.disableLighting = false;
       mat.useAlphaFromDiffuseTexture = true;
-      const plane = core.MeshBuilder.CreatePlane(`node-${ctx.nodeId}`, { width: w * WORLD_SCALE, height: h * WORLD_SCALE }, deps.scene3D);
+      const plane = meshBuilder.MeshBuilder.CreatePlane(`node-${ctx.nodeId}`, { width: w * WORLD_SCALE, height: h * WORLD_SCALE }, deps.scene3D);
       plane.material = mat;
       plane.metadata = { nodeId: ctx.nodeId, kind: spec.kind };
       return plane;
@@ -818,8 +823,8 @@ function placeOnCylinder(node, mesh, bounds, opts = {}) {
   const cy = (node.position.y + (node.size?.h ?? 120) / 2 - bounds.minY) / rangeY;
   const angle = (cx - 0.5) * arc;
   const height = (0.5 - cy) * 6;
-  mesh.position = new core.Vector3(Math.sin(angle) * radius, height, Math.cos(angle) * radius);
-  mesh.rotation = new core.Vector3(0, angle, 0);
+  mesh.position = new math_vector.Vector3(Math.sin(angle) * radius, height, Math.cos(angle) * radius);
+  mesh.rotation = new math_vector.Vector3(0, angle, 0);
 }
 function sceneBounds(scene) {
   const xs = scene.nodes.map((n) => n.position.x);