bbmodel-viewer 0.1.0

package/dist/index.cjs

@@ -0,0 +1,606 @@
+'use strict';
+
+var THREE4 = require('three');
+var OrbitControls_js = require('three/addons/controls/OrbitControls.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var THREE4__namespace = /*#__PURE__*/_interopNamespace(THREE4);
+
+// src/viewer.ts
+function cubeFaceCorners(dir, x1, y1, z1, x2, y2, z2) {
+  switch (dir) {
+    case "south":
+      return { tl: [x1, y2, z2], tr: [x2, y2, z2], bl: [x1, y1, z2], br: [x2, y1, z2] };
+    case "north":
+      return { tl: [x2, y2, z1], tr: [x1, y2, z1], bl: [x2, y1, z1], br: [x1, y1, z1] };
+    case "east":
+      return { tl: [x2, y2, z2], tr: [x2, y2, z1], bl: [x2, y1, z2], br: [x2, y1, z1] };
+    case "west":
+      return { tl: [x1, y2, z1], tr: [x1, y2, z2], bl: [x1, y1, z1], br: [x1, y1, z2] };
+    case "up":
+      return { tl: [x1, y2, z1], tr: [x2, y2, z1], bl: [x1, y2, z2], br: [x2, y2, z2] };
+    case "down":
+      return { tl: [x1, y1, z2], tr: [x2, y1, z2], bl: [x1, y1, z1], br: [x2, y1, z1] };
+    default:
+      return null;
+  }
+}
+var CUBE_FACE_ORDER = ["north", "east", "south", "west", "up", "down"];
+function boxUvRect(dir, u, v, sx, sy, sz) {
+  switch (dir) {
+    case "up":
+      return [u + sz, v, u + sz + sx, v + sz];
+    case "down":
+      return [u + sz + sx, v, u + sz + 2 * sx, v + sz];
+    case "east":
+      return [u, v + sz, u + sz, v + sz + sy];
+    case "north":
+      return [u + sz, v + sz, u + sz + sx, v + sz + sy];
+    case "west":
+      return [u + sz + sx, v + sz, u + 2 * sz + sx, v + sz + sy];
+    case "south":
+      return [u + 2 * sz + sx, v + sz, u + 2 * sz + 2 * sx, v + sz + sy];
+    default:
+      return null;
+  }
+}
+function rectToCornerUvs(rect, uvWidth, uvHeight, rotation = 0) {
+  const [u1, v1, u2, v2] = rect;
+  const uMin = u1 / uvWidth;
+  const uMax = u2 / uvWidth;
+  const vTop = 1 - v1 / uvHeight;
+  const vBot = 1 - v2 / uvHeight;
+  let corners = {
+    tl: [uMin, vTop],
+    tr: [uMax, vTop],
+    bl: [uMin, vBot],
+    br: [uMax, vBot]
+  };
+  const steps = (rotation / 90 % 4 + 4) % 4;
+  for (let i = 0; i < steps; i++) {
+    corners = { tl: corners.bl, tr: corners.tl, br: corners.tr, bl: corners.br };
+  }
+  return corners;
+}
+var MeshAssembler = class {
+  constructor() {
+    this.positions = [];
+    this.uvs = [];
+    this.materials = [];
+    this.materialIndex = /* @__PURE__ */ new Map();
+    this.groups = [];
+    this.vertexCount = 0;
+  }
+  indexOf(material) {
+    let idx = this.materialIndex.get(material);
+    if (idx === void 0) {
+      idx = this.materials.length;
+      this.materials.push(material);
+      this.materialIndex.set(material, idx);
+    }
+    return idx;
+  }
+  addQuad(c, uv, material) {
+    const start = this.vertexCount;
+    this.pushVertex(c.tl, uv.tl);
+    this.pushVertex(c.bl, uv.bl);
+    this.pushVertex(c.tr, uv.tr);
+    this.pushVertex(c.tr, uv.tr);
+    this.pushVertex(c.bl, uv.bl);
+    this.pushVertex(c.br, uv.br);
+    this.groups.push({ start, count: 6, index: this.indexOf(material) });
+  }
+  addTriangle(p, uv, material) {
+    const start = this.vertexCount;
+    this.pushVertex(p[0], uv[0]);
+    this.pushVertex(p[1], uv[1]);
+    this.pushVertex(p[2], uv[2]);
+    this.groups.push({ start, count: 3, index: this.indexOf(material) });
+  }
+  pushVertex(pos, uv) {
+    this.positions.push(pos[0], pos[1], pos[2]);
+    this.uvs.push(uv[0], uv[1]);
+    this.vertexCount++;
+  }
+  build(name) {
+    if (this.vertexCount === 0) return null;
+    const geometry = new THREE4__namespace.BufferGeometry();
+    geometry.setAttribute("position", new THREE4__namespace.Float32BufferAttribute(this.positions, 3));
+    geometry.setAttribute("uv", new THREE4__namespace.Float32BufferAttribute(this.uvs, 2));
+    for (const g of this.groups) geometry.addGroup(g.start, g.count, g.index);
+    geometry.computeVertexNormals();
+    const material = this.materials.length === 1 ? this.materials[0] : this.materials;
+    const mesh = new THREE4__namespace.Mesh(geometry, material);
+    mesh.name = name;
+    return mesh;
+  }
+};
+function buildElementMesh(element, library) {
+  if (element.type === "mesh" && element.vertices) {
+    return buildMeshElement(element, library);
+  }
+  return buildCubeElement(element, library);
+}
+function buildCubeElement(element, library) {
+  const from = element.from ?? [0, 0, 0];
+  const to = element.to ?? [0, 0, 0];
+  const origin = element.origin ?? [0, 0, 0];
+  const inflate = element.inflate ?? 0;
+  const x1 = Math.min(from[0], to[0]) - inflate - origin[0];
+  const x2 = Math.max(from[0], to[0]) + inflate - origin[0];
+  const y1 = Math.min(from[1], to[1]) - inflate - origin[1];
+  const y2 = Math.max(from[1], to[1]) + inflate - origin[1];
+  const z1 = Math.min(from[2], to[2]) - inflate - origin[2];
+  const z2 = Math.max(from[2], to[2]) + inflate - origin[2];
+  const sx = Math.abs(to[0] - from[0]);
+  const sy = Math.abs(to[1] - from[1]);
+  const sz = Math.abs(to[2] - from[2]);
+  const uvOffset = element.uv_offset ?? [0, 0];
+  const faces = element.faces ?? {};
+  const assembler = new MeshAssembler();
+  for (const dir of CUBE_FACE_ORDER) {
+    const face = faces[dir];
+    const corners = cubeFaceCorners(dir, x1, y1, z1, x2, y2, z2);
+    if (!corners) continue;
+    if (element.faces && !face) continue;
+    const texMeta = library.resolve(face?.texture);
+    const material = texMeta ? texMeta.material : library.colorMaterial(element.color ?? 0);
+    const uvWidth = texMeta ? texMeta.uvWidth : library.fallbackUvSpace.width;
+    const uvHeight = texMeta ? texMeta.uvHeight : library.fallbackUvSpace.height;
+    const rect = face?.uv ?? boxUvRect(dir, uvOffset[0], uvOffset[1], sx, sy, sz) ?? [0, 0, uvWidth, uvHeight];
+    const uv = rectToCornerUvs(rect, uvWidth, uvHeight, face?.rotation ?? 0);
+    assembler.addQuad(corners, uv, material);
+  }
+  return assembler.build(element.name ?? "cube");
+}
+function buildMeshElement(element, library) {
+  const vertices = element.vertices ?? {};
+  const faces = element.faces ?? {};
+  const assembler = new MeshAssembler();
+  const posOf = (key) => {
+    const v = vertices[key];
+    return v ? [v[0], v[1], v[2]] : null;
+  };
+  for (const face of Object.values(faces)) {
+    const keys = face.vertices ?? [];
+    if (keys.length < 3) continue;
+    const texMeta = library.resolve(face.texture);
+    const material = texMeta ? texMeta.material : library.colorMaterial(element.color ?? 0);
+    const uvWidth = texMeta ? texMeta.uvWidth : library.fallbackUvSpace.width;
+    const uvHeight = texMeta ? texMeta.uvHeight : library.fallbackUvSpace.height;
+    const uvOf = (key) => {
+      const raw = face.uv?.[key];
+      if (!raw) return [0, 0];
+      return [raw[0] / uvWidth, 1 - raw[1] / uvHeight];
+    };
+    for (let i = 1; i < keys.length - 1; i++) {
+      const a = posOf(keys[0]);
+      const b = posOf(keys[i]);
+      const c = posOf(keys[i + 1]);
+      if (!a || !b || !c) continue;
+      assembler.addTriangle(
+        [a, b, c],
+        [uvOf(keys[0]), uvOf(keys[i]), uvOf(keys[i + 1])],
+        material
+      );
+    }
+  }
+  return assembler.build(element.name ?? "mesh");
+}
+
+// src/builder.ts
+var EULER_ORDER = "ZYX";
+var ORIGIN = [0, 0, 0];
+function buildModelObject(model, library) {
+  const root = new THREE4__namespace.Group();
+  root.name = model.name ?? "bbmodel";
+  const elementsByUuid = /* @__PURE__ */ new Map();
+  for (const el of model.elements ?? []) {
+    if (el.uuid) elementsByUuid.set(el.uuid, el);
+  }
+  const groupsByUuid = /* @__PURE__ */ new Map();
+  for (const g of model.groups ?? []) {
+    if (g.uuid) groupsByUuid.set(g.uuid, g);
+  }
+  const usedElements = /* @__PURE__ */ new Set();
+  const visitedGroups = /* @__PURE__ */ new Set();
+  const outliner = model.outliner ?? [];
+  for (const node of outliner) {
+    const built = buildNode(node, ORIGIN);
+    if (built) root.add(built);
+  }
+  for (const el of model.elements ?? []) {
+    if (el.uuid && usedElements.has(el.uuid)) continue;
+    const built = buildElementNode(el, ORIGIN);
+    if (built) root.add(built);
+  }
+  return root;
+  function buildNode(node, parentOrigin) {
+    if (typeof node === "string") {
+      const element = elementsByUuid.get(node);
+      if (element) {
+        usedElements.add(node);
+        return buildElementNode(element, parentOrigin);
+      }
+      const group = groupsByUuid.get(node);
+      if (group) return buildGroupNode(group, parentOrigin);
+      return null;
+    }
+    return buildGroupNode(node, parentOrigin);
+  }
+  function buildGroupNode(group, parentOrigin) {
+    if (group.visibility === false) return null;
+    if (group.uuid) {
+      if (visitedGroups.has(group.uuid)) return null;
+      visitedGroups.add(group.uuid);
+    }
+    const origin = group.origin ?? parentOrigin;
+    const node = new THREE4__namespace.Group();
+    node.name = group.name ?? "group";
+    applyTransform(node, origin, parentOrigin, group.rotation);
+    for (const child of group.children ?? []) {
+      const built = buildNode(child, origin);
+      if (built) node.add(built);
+    }
+    return node;
+  }
+  function buildElementNode(element, parentOrigin) {
+    if (element.visibility === false) return null;
+    const mesh = buildElementMesh(element, library);
+    if (!mesh) return null;
+    const origin = element.origin ?? parentOrigin;
+    const node = new THREE4__namespace.Group();
+    node.name = element.name ?? "element";
+    applyTransform(node, origin, parentOrigin, element.rotation);
+    node.add(mesh);
+    return node;
+  }
+}
+function applyTransform(node, origin, parentOrigin, rotation) {
+  node.position.set(
+    origin[0] - parentOrigin[0],
+    origin[1] - parentOrigin[1],
+    origin[2] - parentOrigin[2]
+  );
+  if (rotation) {
+    node.rotation.set(
+      THREE4__namespace.MathUtils.degToRad(rotation[0]),
+      THREE4__namespace.MathUtils.degToRad(rotation[1]),
+      THREE4__namespace.MathUtils.degToRad(rotation[2]),
+      EULER_ORDER
+    );
+  }
+}
+var MARKER_COLORS = [
+  "#8f8f8f",
+  // 0 - neutral / none
+  "#e0475e",
+  // 1 - red
+  "#e0a63f",
+  // 2 - orange
+  "#e5d24a",
+  // 3 - yellow
+  "#7cd15a",
+  // 4 - green
+  "#4b9fe0",
+  // 5 - blue
+  "#8054e0",
+  // 6 - purple
+  "#e055b0"
+  // 7 - pink
+];
+var MaterialLibrary = class {
+  constructor(model, settings) {
+    this.model = model;
+    this.settings = settings;
+    this.byKey = /* @__PURE__ */ new Map();
+    this.colorMaterials = /* @__PURE__ */ new Map();
+    this.disposables = [];
+    this.fallbackUv = {
+      width: model.resolution?.width || 16,
+      height: model.resolution?.height || 16
+    };
+  }
+  /**
+   * Creates a texture + material per model texture and starts loading their
+   * images. Resolves once every image has settled (loaded or failed).
+   */
+  async load(onProgress) {
+    const textures = this.model.textures ?? [];
+    await Promise.all(
+      textures.map((tex, index) => this.createTexture(tex, index, onProgress))
+    );
+  }
+  async createTexture(tex, index, onProgress) {
+    const uvWidth = tex.uv_width || tex.width || this.fallbackUv.width;
+    const uvHeight = tex.uv_height || tex.height || this.fallbackUv.height;
+    const texture = new THREE4__namespace.Texture();
+    texture.magFilter = THREE4__namespace.NearestFilter;
+    texture.minFilter = THREE4__namespace.NearestFilter;
+    texture.generateMipmaps = false;
+    texture.colorSpace = THREE4__namespace.SRGBColorSpace;
+    texture.name = tex.name ?? `texture_${index}`;
+    const material = new THREE4__namespace.MeshLambertMaterial({
+      map: texture,
+      transparent: true,
+      alphaTest: this.settings.alphaTest,
+      side: this.settings.side
+    });
+    const meta = { material, uvWidth, uvHeight };
+    this.byKey.set(String(index), meta);
+    if (tex.uuid) this.byKey.set(tex.uuid, meta);
+    if (tex.id != null) this.byKey.set(String(tex.id), meta);
+    this.disposables.push(material, texture);
+    const src = tex.source || tex.path || tex.relative_path;
+    if (!src) return;
+    try {
+      const image = await loadImage(src);
+      texture.image = image;
+      texture.needsUpdate = true;
+      onProgress?.();
+    } catch {
+    }
+  }
+  /** Resolves a face's texture reference to its material + UV space, if any. */
+  resolve(ref) {
+    if (ref == null || ref === false) return null;
+    return this.byKey.get(String(ref)) ?? null;
+  }
+  /** UV space to use when a face has no resolvable texture. */
+  get fallbackUvSpace() {
+    return this.fallbackUv;
+  }
+  /** Flat color material for untextured faces, keyed by marker color index. */
+  colorMaterial(colorIndex = 0) {
+    const key = colorIndex % MARKER_COLORS.length;
+    let material = this.colorMaterials.get(key);
+    if (!material) {
+      material = new THREE4__namespace.MeshLambertMaterial({
+        color: new THREE4__namespace.Color(MARKER_COLORS[key]),
+        side: this.settings.side
+      });
+      this.colorMaterials.set(key, material);
+      this.disposables.push(material);
+    }
+    return material;
+  }
+  dispose() {
+    for (const item of this.disposables) item.dispose();
+    this.disposables.length = 0;
+    this.byKey.clear();
+    this.colorMaterials.clear();
+  }
+};
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(`Failed to load texture image`));
+    img.src = src;
+  });
+}
+
+// src/viewer.ts
+var DEFAULTS = {
+  background: "#20232a",
+  grid: true,
+  controls: true,
+  autoRotate: false,
+  autoRotateSpeed: 1,
+  fov: 45,
+  ambientIntensity: 0.8,
+  directionalIntensity: 0.55,
+  doubleSided: true,
+  alphaTest: 0.02,
+  antialias: true
+};
+var BBModelViewer = class {
+  constructor(container, options = {}) {
+    this.scene = new THREE4__namespace.Scene();
+    this.modelRoot = null;
+    this.materials = null;
+    this.gridHelper = null;
+    this.frameId = 0;
+    this.disposed = false;
+    this.loadToken = 0;
+    this.animate = () => {
+      if (this.disposed) return;
+      this.frameId = requestAnimationFrame(this.animate);
+      this.controls?.update();
+      this.renderer.render(this.scene, this.camera);
+    };
+    this.container = container;
+    this.options = { ...DEFAULTS, ...options };
+    const { width, height } = this.measure();
+    const transparent = this.options.background === null || this.options.background === "transparent";
+    this.renderer = new THREE4__namespace.WebGLRenderer({
+      antialias: this.options.antialias,
+      alpha: transparent
+    });
+    this.renderer.setPixelRatio(options.pixelRatio ?? Math.min(window.devicePixelRatio, 2));
+    this.renderer.setSize(width, height, false);
+    this.renderer.outputColorSpace = THREE4__namespace.SRGBColorSpace;
+    this.container.appendChild(this.renderer.domElement);
+    this.renderer.domElement.style.display = "block";
+    this.renderer.domElement.style.width = "100%";
+    this.renderer.domElement.style.height = "100%";
+    if (!transparent) {
+      this.scene.background = new THREE4__namespace.Color(this.options.background);
+    }
+    this.camera = new THREE4__namespace.PerspectiveCamera(this.options.fov, width / height, 0.1, 1e4);
+    this.camera.position.set(40, 30, 40);
+    this.addLights();
+    if (this.options.controls) {
+      this.controls = new OrbitControls_js.OrbitControls(this.camera, this.renderer.domElement);
+      this.controls.enableDamping = true;
+      this.controls.dampingFactor = 0.08;
+      this.controls.autoRotate = this.options.autoRotate;
+      this.controls.autoRotateSpeed = this.options.autoRotateSpeed;
+    }
+    this.observeResize();
+    this.animate();
+  }
+  /** Fetches a `.bbmodel` file by URL and renders it. */
+  async load(url, init) {
+    try {
+      const response = await fetch(url, init);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch ${url}: ${response.status} ${response.statusText}`);
+      }
+      const data = await response.json();
+      return await this.loadModel(data);
+    } catch (error) {
+      this.options.onError?.(error);
+      throw error;
+    }
+  }
+  /** Reads a `File`/`Blob` (e.g. from an `<input type="file">`) and renders it. */
+  async loadFile(file) {
+    try {
+      const text = await file.text();
+      const data = JSON.parse(text);
+      return await this.loadModel(data);
+    } catch (error) {
+      this.options.onError?.(error);
+      throw error;
+    }
+  }
+  /** Renders an already-parsed bbmodel object. */
+  async loadModel(data) {
+    const token = ++this.loadToken;
+    try {
+      const materials = new MaterialLibrary(data, {
+        alphaTest: this.options.alphaTest,
+        side: this.options.doubleSided ? THREE4__namespace.DoubleSide : THREE4__namespace.FrontSide
+      });
+      await materials.load();
+      if (token !== this.loadToken || this.disposed) {
+        materials.dispose();
+        return this.modelRoot ?? new THREE4__namespace.Group();
+      }
+      this.clear();
+      this.materials = materials;
+      this.modelRoot = buildModelObject(data, materials);
+      this.scene.add(this.modelRoot);
+      this.frameModel();
+      this.options.onLoad?.(data, this.modelRoot);
+      return this.modelRoot;
+    } catch (error) {
+      this.options.onError?.(error);
+      throw error;
+    }
+  }
+  /** Removes the current model and frees its GPU resources. */
+  clear() {
+    if (this.modelRoot) {
+      this.scene.remove(this.modelRoot);
+      this.modelRoot.traverse((obj) => {
+        if (obj instanceof THREE4__namespace.Mesh) obj.geometry.dispose();
+      });
+      this.modelRoot = null;
+    }
+    if (this.gridHelper) {
+      this.scene.remove(this.gridHelper);
+      this.gridHelper.geometry.dispose();
+      this.gridHelper.material.dispose();
+      this.gridHelper = null;
+    }
+    this.materials?.dispose();
+    this.materials = null;
+  }
+  /** Recomputes size from the container; call after layout changes if needed. */
+  resize() {
+    const { width, height } = this.measure();
+    this.renderer.setSize(width, height, false);
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+  }
+  /** Frames the camera on the current model's bounding box. */
+  frameModel() {
+    if (!this.modelRoot) return;
+    const box = new THREE4__namespace.Box3().setFromObject(this.modelRoot);
+    if (box.isEmpty()) return;
+    const size = box.getSize(new THREE4__namespace.Vector3());
+    const center = box.getCenter(new THREE4__namespace.Vector3());
+    const maxDim = Math.max(size.x, size.y, size.z) || 16;
+    if (this.options.grid) this.addGrid(box, maxDim);
+    const fov = THREE4__namespace.MathUtils.degToRad(this.camera.fov);
+    const distance = maxDim / 2 / Math.tan(fov / 2) * 1.6;
+    const dir = new THREE4__namespace.Vector3(1, 0.75, 1).normalize();
+    this.camera.position.copy(center).addScaledVector(dir, distance);
+    this.camera.near = Math.max(distance / 100, 0.01);
+    this.camera.far = distance * 100;
+    this.camera.updateProjectionMatrix();
+    if (this.controls) {
+      this.controls.target.copy(center);
+      this.controls.update();
+    } else {
+      this.camera.lookAt(center);
+    }
+  }
+  /** Tears down the renderer, listeners and GPU resources. */
+  dispose() {
+    this.disposed = true;
+    cancelAnimationFrame(this.frameId);
+    this.resizeObserver?.disconnect();
+    this.clear();
+    this.controls?.dispose();
+    this.renderer.dispose();
+    this.renderer.domElement.remove();
+  }
+  // --- internals ---
+  addLights() {
+    const ambient = new THREE4__namespace.AmbientLight(16777215, this.options.ambientIntensity);
+    const key = new THREE4__namespace.DirectionalLight(16777215, this.options.directionalIntensity);
+    key.position.set(0.6, 1, 0.8);
+    const fill = new THREE4__namespace.DirectionalLight(16777215, this.options.directionalIntensity * 0.45);
+    fill.position.set(-0.6, -0.2, -0.8);
+    this.scene.add(ambient, key, fill);
+  }
+  addGrid(box, maxDim) {
+    const cells = Math.max(2, Math.ceil(maxDim / 16));
+    const size = cells * 16 * 1.5;
+    const divisions = Math.round(size / 16);
+    const grid = new THREE4__namespace.GridHelper(size, divisions, 6710886, 3815994);
+    grid.position.set(box.getCenter(new THREE4__namespace.Vector3()).x, box.min.y, box.getCenter(new THREE4__namespace.Vector3()).z);
+    grid.material.transparent = true;
+    grid.material.opacity = 0.5;
+    this.scene.add(grid);
+    this.gridHelper = grid;
+  }
+  observeResize() {
+    if (typeof ResizeObserver === "undefined") return;
+    this.resizeObserver = new ResizeObserver(() => this.resize());
+    this.resizeObserver.observe(this.container);
+  }
+  measure() {
+    const width = this.container.clientWidth || 300;
+    const height = this.container.clientHeight || 150;
+    return { width, height };
+  }
+};
+
+exports.BBModelViewer = BBModelViewer;
+exports.MaterialLibrary = MaterialLibrary;
+exports.buildElementMesh = buildElementMesh;
+exports.buildModelObject = buildModelObject;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map