@cratefit/viz

Visualization module for @cratefit/pack - 2D Canvas and 3D Three.js rendering for bin packing results.

Installation

npm install @cratefit/pack @cratefit/viz

# For 3D rendering, also install three.js
npm install three

Features

• 2D Canvas Rendering: Top view, front view, side view, isometric view
• 3D Three.js Rendering: Interactive 3D visualization with camera controls
• Works in Browser and Node.js: 2D rendering works with node-canvas in Node.js

Quick Start

2D Canvas Rendering

import { pack, createBin, createItem } from '@cratefit/pack';
import { renderTopView, renderIsometric } from '@cratefit/viz';

// Pack items
const result = pack({
  bins: [createBin({ width: 100, height: 80, depth: 60 })],
  items: [createItem({ width: 30, height: 20, depth: 15, quantity: 5 })],
});

// Render to canvas
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
renderTopView(canvas, result.packed[0], { showLabels: true });

3D Three.js Rendering

import { pack } from '@cratefit/pack';
import { create3DScene, renderPackedBin3D, animate } from '@cratefit/viz';

// Create 3D scene
const container = document.getElementById('container');
const { scene, camera, renderer, controls } = await create3DScene(container);

// Render packed bin
await renderPackedBin3D(scene, result.packed[0], { showEdges: true });

// Start animation loop
animate(renderer, scene, camera, controls);

Node.js (2D only)

import { createCanvas } from 'canvas'; // npm install canvas
import { renderTopView } from '@cratefit/viz';
import fs from 'fs';

const canvas = createCanvas(800, 600);
renderTopView(canvas, packedBin);

// Export to PNG
const buffer = canvas.toBuffer('image/png');
fs.writeFileSync('output.png', buffer);

API Reference

2D Rendering

• renderTopView(canvas, packedBin, options?) - Top-down view (X-Z plane)
• renderFrontView(canvas, packedBin, options?) - Front view (X-Y plane)
• renderSideView(canvas, packedBin, options?) - Side view (Z-Y plane)
• renderIsometric(canvas, packedBin, options?) - Isometric 3D-like view
• renderAllViews(canvas, packedBin, options?) - All views in grid

3D Rendering

• create3DScene(container, options?) - Initialize Three.js scene
• renderPackedBin3D(scene, packedBin, options?) - Render bin and items
• animate(renderer, scene, camera, controls) - Start render loop
• focusOnBin(camera, controls, bin) - Focus camera on bin
• animatePacking(scene, packedBin, options?) - Animate packing sequence
• createExplosionView(scene, packedBin, factor) - Exploded view
• showByLayer(scene, layerIndex) - Show specific layer
• takeScreenshot(renderer, scene, camera) - Capture image