blockymodel-web 0.1.0

package/src/ui/UVEditor.ts

@@ -0,0 +1,336 @@
+import * as THREE from "three";
+import type { Editor } from "../editor/Editor";
+import { SetPropertyCommand } from "../editor/commands/SetPropertyCommand";
+import type { FaceUV, TextureLayout } from "../types/blockymodel";
+
+type FaceName = "front" | "back" | "left" | "right" | "top" | "bottom";
+
+const FACE_NAMES: FaceName[] = ["front", "back", "left", "right", "top", "bottom"];
+const FACE_LABELS: Record<FaceName, string> = {
+  front: "Front (+Z)",
+  back: "Back (-Z)",
+  left: "Left (-X)",
+  right: "Right (+X)",
+  top: "Top (+Y)",
+  bottom: "Bottom (-Y)",
+};
+
+const DEFAULT_FACE_UV: FaceUV = {
+  offset: { x: 0, y: 0 },
+  mirror: { x: false, y: false },
+  angle: 0,
+};
+
+/**
+ * UV Editor panel for per-face texture UV editing
+ */
+export class UVEditor {
+  private editor: Editor;
+  private container: HTMLElement;
+  private currentObject: THREE.Object3D | null = null;
+  private isUpdating: boolean = false;
+  private faceInputs: Map<FaceName, {
+    offsetX: HTMLInputElement;
+    offsetY: HTMLInputElement;
+    mirrorX: HTMLInputElement;
+    mirrorY: HTMLInputElement;
+    angle: HTMLSelectElement;
+  }> = new Map();
+
+  constructor(editor: Editor, containerId: string) {
+    this.editor = editor;
+    const container = document.getElementById(containerId);
+    if (!container) {
+      throw new Error(`UV Editor container not found: ${containerId}`);
+    }
+    this.container = container;
+
+    this.buildUI();
+    this.setupEventListeners();
+  }
+
+  /**
+   * Build the UV editor UI
+   */
+  private buildUI(): void {
+    let facesHtml = "";
+
+    for (const face of FACE_NAMES) {
+      facesHtml += `
+        <div class="uv-face">
+          <div class="uv-face-header">${FACE_LABELS[face]}</div>
+          <div class="uv-face-row">
+            <label>Offset</label>
+            <input type="number" id="uv-${face}-offset-x" class="uv-input" step="1" placeholder="X" />
+            <input type="number" id="uv-${face}-offset-y" class="uv-input" step="1" placeholder="Y" />
+          </div>
+          <div class="uv-face-row">
+            <label>Mirror</label>
+            <label class="uv-checkbox-label">
+              <input type="checkbox" id="uv-${face}-mirror-x" class="uv-checkbox" /> X
+            </label>
+            <label class="uv-checkbox-label">
+              <input type="checkbox" id="uv-${face}-mirror-y" class="uv-checkbox" /> Y
+            </label>
+          </div>
+          <div class="uv-face-row">
+            <label>Rotation</label>
+            <select id="uv-${face}-angle" class="uv-select">
+              <option value="0">0°</option>
+              <option value="90">90°</option>
+              <option value="180">180°</option>
+              <option value="270">270°</option>
+            </select>
+          </div>
+        </div>
+      `;
+    }
+
+    this.container.innerHTML = `
+      <div class="uv-editor-content" id="uv-editor-content">
+        ${facesHtml}
+      </div>
+      <div class="uv-editor-empty" id="uv-editor-empty">
+        <p>Select a box to edit UVs</p>
+      </div>
+    `;
+
+    // Cache input references
+    for (const face of FACE_NAMES) {
+      this.faceInputs.set(face, {
+        offsetX: document.getElementById(`uv-${face}-offset-x`) as HTMLInputElement,
+        offsetY: document.getElementById(`uv-${face}-offset-y`) as HTMLInputElement,
+        mirrorX: document.getElementById(`uv-${face}-mirror-x`) as HTMLInputElement,
+        mirrorY: document.getElementById(`uv-${face}-mirror-y`) as HTMLInputElement,
+        angle: document.getElementById(`uv-${face}-angle`) as HTMLSelectElement,
+      });
+    }
+
+    // Initially show empty state
+    this.showEmpty();
+  }
+
+  /**
+   * Setup event listeners
+   */
+  private setupEventListeners(): void {
+    // Editor events
+    this.editor.on("selectionChanged", (object) => {
+      this.setObject(object as THREE.Object3D | null);
+    });
+
+    this.editor.on("objectChanged", () => {
+      if (this.currentObject) {
+        this.updateFromObject();
+      }
+    });
+
+    // Setup input handlers for each face
+    for (const face of FACE_NAMES) {
+      const inputs = this.faceInputs.get(face)!;
+
+      // Offset X
+      inputs.offsetX.addEventListener("change", () => {
+        this.handleFaceChange(face);
+      });
+
+      // Offset Y
+      inputs.offsetY.addEventListener("change", () => {
+        this.handleFaceChange(face);
+      });
+
+      // Mirror X
+      inputs.mirrorX.addEventListener("change", () => {
+        this.handleFaceChange(face);
+      });
+
+      // Mirror Y
+      inputs.mirrorY.addEventListener("change", () => {
+        this.handleFaceChange(face);
+      });
+
+      // Angle
+      inputs.angle.addEventListener("change", () => {
+        this.handleFaceChange(face);
+      });
+    }
+  }
+
+  /**
+   * Handle face UV change
+   */
+  private handleFaceChange(face: FaceName): void {
+    if (!this.currentObject || this.isUpdating) return;
+
+    const inputs = this.faceInputs.get(face)!;
+    const textureLayout = this.getTextureLayout();
+    const oldFaceUV = textureLayout[face] || { ...DEFAULT_FACE_UV };
+
+    const newFaceUV: FaceUV = {
+      offset: {
+        x: parseInt(inputs.offsetX.value) || 0,
+        y: parseInt(inputs.offsetY.value) || 0,
+      },
+      mirror: {
+        x: inputs.mirrorX.checked,
+        y: inputs.mirrorY.checked,
+      },
+      angle: parseInt(inputs.angle.value) as 0 | 90 | 180 | 270,
+    };
+
+    const newTextureLayout = { ...textureLayout, [face]: newFaceUV };
+
+    this.editor.execute(
+      new SetPropertyCommand(
+        this.currentObject,
+        "userData.textureLayout",
+        newTextureLayout,
+        textureLayout
+      )
+    );
+
+    // Apply UV changes to the geometry
+    this.applyTextureLayout(newTextureLayout);
+  }
+
+  /**
+   * Get texture layout from current object
+   */
+  private getTextureLayout(): TextureLayout {
+    return this.currentObject?.userData.textureLayout || {};
+  }
+
+  /**
+   * Set the object to edit UVs for
+   */
+  setObject(object: THREE.Object3D | null): void {
+    // Only show UV editor for box meshes
+    if (object && object instanceof THREE.Mesh && object.userData.shapeType === "box") {
+      this.currentObject = object;
+      this.showContent();
+      this.updateFromObject();
+    } else {
+      this.currentObject = null;
+      this.showEmpty();
+    }
+  }
+
+  /**
+   * Update UI from current object
+   */
+  private updateFromObject(): void {
+    if (!this.currentObject) return;
+
+    this.isUpdating = true;
+
+    const textureLayout = this.getTextureLayout();
+
+    for (const face of FACE_NAMES) {
+      const inputs = this.faceInputs.get(face)!;
+      const faceUV = textureLayout[face] || DEFAULT_FACE_UV;
+
+      inputs.offsetX.value = faceUV.offset?.x?.toString() || "0";
+      inputs.offsetY.value = faceUV.offset?.y?.toString() || "0";
+      inputs.mirrorX.checked = faceUV.mirror?.x || false;
+      inputs.mirrorY.checked = faceUV.mirror?.y || false;
+      inputs.angle.value = faceUV.angle?.toString() || "0";
+    }
+
+    this.isUpdating = false;
+  }
+
+  /**
+   * Apply texture layout to geometry UVs
+   * Note: This is a simplified implementation - full UV mapping would require
+   * knowing the texture atlas dimensions
+   */
+  private applyTextureLayout(layout: TextureLayout): void {
+    if (!this.currentObject || !(this.currentObject instanceof THREE.Mesh)) return;
+
+    const mesh = this.currentObject;
+    const geometry = mesh.geometry as THREE.BufferGeometry;
+    const uvAttribute = geometry.getAttribute("uv");
+
+    if (!uvAttribute) return;
+
+    // BoxGeometry has 6 faces, 2 triangles each, 3 vertices each = 36 vertices
+    // Face order: +x, -x, +y, -y, +z, -z
+    // For each face: 6 vertices (2 triangles)
+    const faceIndexMap: Record<FaceName, number> = {
+      right: 0,
+      left: 1,
+      top: 2,
+      bottom: 3,
+      front: 4,
+      back: 5,
+    };
+
+    const uvs = uvAttribute.array as Float32Array;
+
+    for (const face of FACE_NAMES) {
+      const faceUV = layout[face] || DEFAULT_FACE_UV;
+      const faceIndex = faceIndexMap[face];
+      const startVertex = faceIndex * 6;
+
+      // Offset (in texture units, normalized to 0-1 assuming 64px texture)
+      const offsetX = (faceUV.offset?.x || 0) / 64;
+      const offsetY = (faceUV.offset?.y || 0) / 64;
+
+      // Apply offset to each vertex's UV
+      for (let i = 0; i < 6; i++) {
+        const idx = (startVertex + i) * 2;
+        let u = uvs[idx];
+        let v = uvs[idx + 1];
+
+        // Mirror
+        if (faceUV.mirror?.x) u = 1 - u;
+        if (faceUV.mirror?.y) v = 1 - v;
+
+        // Rotation around center
+        if (faceUV.angle) {
+          const rad = (faceUV.angle * Math.PI) / 180;
+          const cu = u - 0.5;
+          const cv = v - 0.5;
+          u = cu * Math.cos(rad) - cv * Math.sin(rad) + 0.5;
+          v = cu * Math.sin(rad) + cv * Math.cos(rad) + 0.5;
+        }
+
+        // Apply offset
+        uvs[idx] = u + offsetX;
+        uvs[idx + 1] = v + offsetY;
+      }
+    }
+
+    uvAttribute.needsUpdate = true;
+  }
+
+  /**
+   * Show content
+   */
+  private showContent(): void {
+    const content = document.getElementById("uv-editor-content");
+    const empty = document.getElementById("uv-editor-empty");
+
+    if (content) content.style.display = "block";
+    if (empty) empty.style.display = "none";
+  }
+
+  /**
+   * Show empty state
+   */
+  private showEmpty(): void {
+    const content = document.getElementById("uv-editor-content");
+    const empty = document.getElementById("uv-editor-empty");
+
+    if (content) content.style.display = "none";
+    if (empty) empty.style.display = "block";
+  }
+
+  /**
+   * Cleanup
+   */
+  dispose(): void {
+    this.container.innerHTML = "";
+    this.faceInputs.clear();
+  }
+}

package/src/ui/index.ts

@@ -0,0 +1,4 @@
+// UI Panels
+export { PropertyPanel } from "./PropertyPanel";
+export { HierarchyPanel } from "./HierarchyPanel";
+export { UVEditor } from "./UVEditor";

package/src/viewer/ViewerController.ts

@@ -0,0 +1,295 @@
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { BlockyModelLoader, applyTextureToModel } from "../loaders/BlockyModelLoader";
+
+export interface ViewerOptions {
+  container: HTMLElement;
+  backgroundColor?: number;
+}
+
+/**
+ * Main viewer controller
+ * Manages Three.js scene, camera, controls, and model loading
+ */
+export class ViewerController {
+  public readonly scene: THREE.Scene;
+  public readonly camera: THREE.PerspectiveCamera;
+  public readonly renderer: THREE.WebGLRenderer;
+  public readonly controls: OrbitControls;
+  public readonly domElement: HTMLElement;
+
+  private loader: BlockyModelLoader;
+  private textureLoader: THREE.TextureLoader;
+  private currentModel: THREE.Group | null = null;
+  private animationId: number | null = null;
+
+  constructor(options: ViewerOptions) {
+    const { container, backgroundColor = 0x1a1a2e } = options;
+
+    this.domElement = container;
+
+    // Scene setup
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(backgroundColor);
+
+    // Camera setup
+    const aspect = container.clientWidth / container.clientHeight;
+    this.camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 1000);
+    this.camera.position.set(50, 50, 100);
+
+    // Renderer setup
+    this.renderer = new THREE.WebGLRenderer({
+      antialias: true,
+      alpha: true,
+    });
+    this.renderer.setSize(container.clientWidth, container.clientHeight);
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    this.renderer.shadowMap.enabled = true;
+    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    container.appendChild(this.renderer.domElement);
+
+    // Controls setup
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.controls.enableDamping = true;
+    this.controls.dampingFactor = 0.1;
+    this.controls.minDistance = 10;
+    this.controls.maxDistance = 500;
+
+    // Loaders
+    this.loader = new BlockyModelLoader();
+    this.textureLoader = new THREE.TextureLoader();
+
+    // Lighting
+    this.setupLighting();
+
+    // Grid helper
+    this.setupHelpers();
+
+    // Handle resize
+    window.addEventListener("resize", () => this.handleResize(container));
+
+    // Start render loop
+    this.animate();
+  }
+
+  private setupLighting(): void {
+    // Ambient light for base illumination
+    const ambient = new THREE.AmbientLight(0xffffff, 0.4);
+    this.scene.add(ambient);
+
+    // Main directional light
+    const mainLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    mainLight.position.set(50, 100, 50);
+    mainLight.castShadow = true;
+    mainLight.shadow.mapSize.width = 2048;
+    mainLight.shadow.mapSize.height = 2048;
+    this.scene.add(mainLight);
+
+    // Fill light from opposite side
+    const fillLight = new THREE.DirectionalLight(0xffffff, 0.3);
+    fillLight.position.set(-50, 50, -50);
+    this.scene.add(fillLight);
+
+    // Rim light for edge definition
+    const rimLight = new THREE.DirectionalLight(0x88ccff, 0.2);
+    rimLight.position.set(0, -50, -100);
+    this.scene.add(rimLight);
+  }
+
+  private setupHelpers(): void {
+    // Grid on XZ plane
+    const grid = new THREE.GridHelper(200, 20, 0x444444, 0x333333);
+    grid.position.y = -0.1;
+    this.scene.add(grid);
+
+    // Axes helper
+    const axes = new THREE.AxesHelper(20);
+    this.scene.add(axes);
+  }
+
+  private handleResize(container: HTMLElement): void {
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(width, height);
+  }
+
+  private animate = (): void => {
+    this.animationId = requestAnimationFrame(this.animate);
+    this.controls.update();
+    this.renderer.render(this.scene, this.camera);
+  };
+
+  /**
+   * Load a .blockymodel file
+   */
+  async loadModel(file: File): Promise<THREE.Group> {
+    // Remove existing model
+    if (this.currentModel) {
+      this.scene.remove(this.currentModel);
+      this.disposeModel(this.currentModel);
+      this.currentModel = null;
+    }
+
+    try {
+      this.currentModel = await this.loader.loadFromFile(file);
+      this.scene.add(this.currentModel);
+
+      // Center and fit camera to model
+      this.fitCameraToModel();
+
+      console.log(`Loaded model with ${this.countMeshes(this.currentModel)} meshes`);
+      return this.currentModel;
+    } catch (error) {
+      console.error("Failed to load model:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get the currently loaded model
+   */
+  getModel(): THREE.Group | null {
+    return this.currentModel;
+  }
+
+  /**
+   * Load a texture and apply to current model
+   */
+  async loadTexture(file: File): Promise<void> {
+    if (!this.currentModel) {
+      console.warn("No model loaded to apply texture to");
+      return;
+    }
+
+    const url = URL.createObjectURL(file);
+
+    try {
+      const texture = await new Promise<THREE.Texture>((resolve, reject) => {
+        this.textureLoader.load(url, resolve, undefined, reject);
+      });
+
+      applyTextureToModel(this.currentModel, texture);
+      console.log("Texture applied");
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  }
+
+  /**
+   * Fit camera to view the entire model
+   */
+  fitCameraToModel(): void {
+    if (!this.currentModel) return;
+
+    const box = new THREE.Box3().setFromObject(this.currentModel);
+    const center = box.getCenter(new THREE.Vector3());
+    const size = box.getSize(new THREE.Vector3());
+
+    const maxDim = Math.max(size.x, size.y, size.z);
+    const fov = this.camera.fov * (Math.PI / 180);
+    const cameraDistance = maxDim / (2 * Math.tan(fov / 2)) * 1.5;
+
+    this.camera.position.set(
+      center.x + cameraDistance * 0.5,
+      center.y + cameraDistance * 0.5,
+      center.z + cameraDistance
+    );
+
+    this.controls.target.copy(center);
+    this.controls.update();
+  }
+
+  /**
+   * Reset camera to default position
+   */
+  resetCamera(): void {
+    if (this.currentModel) {
+      this.fitCameraToModel();
+    } else {
+      this.camera.position.set(50, 50, 100);
+      this.controls.target.set(0, 0, 0);
+      this.controls.update();
+    }
+  }
+
+  /**
+   * Set background color
+   */
+  setBackgroundColor(color: number | string): void {
+    this.scene.background = new THREE.Color(color);
+  }
+
+  /**
+   * Toggle wireframe mode on all meshes
+   */
+  toggleWireframe(enabled: boolean): void {
+    this.currentModel?.traverse((object) => {
+      if (object instanceof THREE.Mesh) {
+        const material = object.material as THREE.MeshStandardMaterial;
+        material.wireframe = enabled;
+      }
+    });
+  }
+
+  /**
+   * Get model hierarchy for debugging
+   */
+  getModelHierarchy(): object | null {
+    if (!this.currentModel) return null;
+
+    const buildHierarchy = (object: THREE.Object3D): object => ({
+      name: object.name,
+      type: object.type,
+      userData: object.userData,
+      children: object.children.map(buildHierarchy),
+    });
+
+    return buildHierarchy(this.currentModel);
+  }
+
+  /**
+   * Count meshes in model
+   */
+  private countMeshes(object: THREE.Object3D): number {
+    let count = 0;
+    object.traverse((child) => {
+      if (child instanceof THREE.Mesh) count++;
+    });
+    return count;
+  }
+
+  /**
+   * Dispose of model resources
+   */
+  private disposeModel(model: THREE.Group): void {
+    model.traverse((object) => {
+      if (object instanceof THREE.Mesh) {
+        object.geometry.dispose();
+        if (Array.isArray(object.material)) {
+          object.material.forEach((m) => m.dispose());
+        } else {
+          object.material.dispose();
+        }
+      }
+    });
+  }
+
+  /**
+   * Clean up all resources
+   */
+  dispose(): void {
+    if (this.animationId !== null) {
+      cancelAnimationFrame(this.animationId);
+    }
+
+    if (this.currentModel) {
+      this.disposeModel(this.currentModel);
+    }
+
+    this.controls.dispose();
+    this.renderer.dispose();
+  }
+}