cyclecad 3.9.14 → 3.9.18

package/app/js/explodeview-full.js

@@ -0,0 +1,1141 @@
+/**
+ * ExplodeView Full Integration Module for cycleCAD
+ * Comprehensive 3D model visualization, analysis, and annotation system
+ * Replaces viewer-mode.js with complete feature set (40+ tools)
+ *
+ * Features: Assembly tree, explode/collapse, section cut, measurement, analysis,
+ * BOM, AI narrator, AR mode, animated assembly, collaborative annotations, smart search
+ *
+ * @module explodeview-full
+ * @version 1.0.0
+ */
+
+import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js';
+import { STLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/loaders/STLLoader.js';
+import { OBJLoader } from 'https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/loaders/OBJLoader.js';
+import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/loaders/GLTFLoader.js';
+
+const MATERIALS_DB = {
+  steel: { density: 7850, color: 0x444444, roughness: 0.7, metalness: 0.8 },
+  aluminum: { density: 2700, color: 0xcccccc, roughness: 0.5, metalness: 0.9 },
+  abs: { density: 1050, color: 0xff6600, roughness: 0.8, metalness: 0.1 },
+  brass: { density: 8500, color: 0xffcc00, roughness: 0.6, metalness: 0.95 },
+  titanium: { density: 4500, color: 0xeeeeee, roughness: 0.4, metalness: 0.85 },
+  nylon: { density: 1150, color: 0xffffff, roughness: 0.9, metalness: 0.0 }
+};
+
+const LANGUAGE_STRINGS = {
+  en: {
+    assembly: 'Assembly', explode: 'Explode', collapse: 'Collapse',
+    section: 'Section Cut', measure: 'Measure', analysis: 'Analysis',
+    bom: 'Bill of Materials', annotations: 'Annotations', properties: 'Properties',
+    distance: 'Distance', angle: 'Angle', volume: 'Volume', area: 'Area'
+  },
+  de: {
+    assembly: 'Baugruppe', explode: 'Explodieren', collapse: 'Zusammenklappen',
+    section: 'Schnittansicht', measure: 'Messen', analysis: 'Analyse',
+    bom: 'Stückliste', annotations: 'Anmerkungen', properties: 'Eigenschaften',
+    distance: 'Entfernung', angle: 'Winkel', volume: 'Volumen', area: 'Fläche'
+  }
+};
+
+export function initExplodeView(viewportExports) {
+  const { getScene, getCamera, getRenderer, getControls } = viewportExports;
+  const state = {
+    parts: [],
+    partsByUuid: new Map(),
+    selectedPart: null,
+    explodeAmount: 0,
+    sectionPlanes: { x: null, y: null, z: null },
+    sectionPositions: { x: 0, y: 0, z: 0 },
+    measurements: [],
+    annotations: [],
+    currentLanguage: 'en',
+    centerOfMass: new THREE.Vector3(),
+    partProperties: new Map(),
+    assemblyTree: null,
+    isARMode: false,
+    assemblySteps: [],
+    currentStep: 0
+  };
+
+  // ============================================================================
+  // 1. MODEL LOADING
+  // ============================================================================
+
+  async function loadModel(file) {
+    const ext = file.name.split('.').pop().toLowerCase();
+    const scene = getScene();
+
+    if (ext === 'stl') {
+      const loader = new STLLoader();
+      const geometry = await new Promise((resolve, reject) => {
+        loader.load(URL.createObjectURL(file), resolve, undefined, reject);
+      });
+      geometry.computeVertexNormals();
+      geometry.center();
+      const material = new THREE.MeshStandardMaterial({ color: 0x0084ff });
+      const mesh = new THREE.Mesh(geometry, material);
+      scene.add(mesh);
+      addPart(mesh, file.name);
+      fitAllParts();
+      return mesh;
+    } else if (ext === 'obj') {
+      const loader = new OBJLoader();
+      const obj = await new Promise((resolve, reject) => {
+        loader.load(URL.createObjectURL(file), resolve, undefined, reject);
+      });
+      obj.traverse(child => {
+        if (child instanceof THREE.Mesh) {
+          child.material = new THREE.MeshStandardMaterial({ color: 0x0084ff });
+        }
+      });
+      obj.position.set(0, 0, 0);
+      scene.add(obj);
+      addPart(obj, file.name);
+      fitAllParts();
+      return obj;
+    } else if (ext === 'gltf' || ext === 'glb') {
+      const loader = new GLTFLoader();
+      const gltf = await new Promise((resolve, reject) => {
+        loader.load(URL.createObjectURL(file), resolve, undefined, reject);
+      });
+      const scene_obj = gltf.scene;
+      scene_obj.traverse(child => {
+        if (child instanceof THREE.Mesh) {
+          if (!child.material.map) {
+            child.material = new THREE.MeshStandardMaterial({ color: 0x0084ff });
+          }
+        }
+      });
+      scene.add(scene_obj);
+      addPart(scene_obj, file.name);
+      buildAssemblyTree(scene_obj);
+      fitAllParts();
+      return scene_obj;
+    }
+  }
+
+  async function loadSTEP(file) {
+    if (file.size > 50000000) {
+      console.warn('File > 50MB, requires server-side conversion');
+      return null;
+    }
+    try {
+      const { occt } = await import('https://cdn.jsdelivr.net/npm/occt-import-js@0.0.23/dist/index.js');
+      const arrayBuffer = await file.arrayBuffer();
+      const model = occt.readSTEP(new Uint8Array(arrayBuffer));
+      const shapes = model.getShapes();
+
+      shapes.forEach((shape, idx) => {
+        const triIndices = shape.getTriangles();
+        const triVertices = shape.getVertices();
+        const geometry = new THREE.BufferGeometry();
+
+        const vertices = new Float32Array(triVertices);
+        const indices = new Uint32Array(triIndices);
+
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+        geometry.setIndex(new THREE.BufferAttribute(indices, 1));
+        geometry.computeVertexNormals();
+        geometry.center();
+
+        const material = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff });
+        const mesh = new THREE.Mesh(geometry, material);
+        getScene().add(mesh);
+        addPart(mesh, `shape_${idx}`);
+      });
+
+      computeCenterOfMass();
+      fitAllParts();
+      return shapes.length;
+    } catch (e) {
+      console.error('STEP import failed:', e);
+      return null;
+    }
+  }
+
+  function addPart(object, name) {
+    state.parts.push(object);
+    state.partsByUuid.set(object.uuid, object);
+    state.partProperties.set(object.uuid, {
+      name: name || object.name || `Part_${state.parts.length}`,
+      visible: true,
+      material: 'steel',
+      mass: 0,
+      volume: 0
+    });
+  }
+
+  // ============================================================================
+  // 2. ASSEMBLY TREE
+  // ============================================================================
+
+  function buildAssemblyTree(root) {
+    const tree = { name: root.name || 'Assembly', children: [], uuid: root.uuid };
+
+    function traverse(node, treeNode) {
+      node.children.forEach(child => {
+        if (child instanceof THREE.Mesh) {
+          const childNode = {
+            name: child.name || `Part_${treeNode.children.length}`,
+            uuid: child.uuid,
+            children: [],
+            isMesh: true
+          };
+          treeNode.children.push(childNode);
+          state.partsByUuid.set(child.uuid, child);
+        } else {
+          const childNode = {
+            name: child.name || `Group_${treeNode.children.length}`,
+            uuid: child.uuid,
+            children: []
+          };
+          treeNode.children.push(childNode);
+          traverse(child, childNode);
+        }
+      });
+    }
+
+    traverse(root, tree);
+    state.assemblyTree = tree;
+    return tree;
+  }
+
+  function togglePartVisibility(uuid) {
+    const part = state.partsByUuid.get(uuid);
+    if (part) {
+      part.visible = !part.visible;
+      const props = state.partProperties.get(uuid);
+      if (props) props.visible = part.visible;
+    }
+  }
+
+  function isolatePart(uuid) {
+    state.parts.forEach(p => p.visible = false);
+    const part = state.partsByUuid.get(uuid);
+    if (part) {
+      part.visible = true;
+      state.selectedPart = part;
+    }
+  }
+
+  function showAllParts() {
+    state.parts.forEach(p => p.visible = true);
+  }
+
+  // ============================================================================
+  // 3. EXPLODE / COLLAPSE
+  // ============================================================================
+
+  function explodeParts(amount) {
+    state.explodeAmount = Math.max(0, Math.min(1, amount));
+    const com = state.centerOfMass;
+
+    state.parts.forEach(part => {
+      const direction = new THREE.Vector3();
+      const bbox = new THREE.Box3().setFromObject(part);
+      bbox.getCenter(direction);
+      direction.sub(com).normalize();
+
+      const basePos = part.userData.basePosition || part.position.clone();
+      part.userData.basePosition = basePos;
+
+      const distance = 200 * state.explodeAmount;
+      part.position.copy(basePos).addScaledVector(direction, distance);
+    });
+  }
+
+  function collapseParts() {
+    explodeParts(0);
+    state.parts.forEach(p => {
+      if (p.userData.basePosition) {
+        p.position.copy(p.userData.basePosition);
+      }
+    });
+  }
+
+  // ============================================================================
+  // 4. SECTION CUT
+  // ============================================================================
+
+  function setSectionCut(axis, position, enabled) {
+    const cam = getCamera();
+    const renderer = getRenderer();
+
+    if (!enabled) {
+      state.sectionPlanes[axis] = null;
+      renderer.clippingPlanes = [];
+      return;
+    }
+
+    const normal = new THREE.Vector3();
+    if (axis === 'x') normal.set(1, 0, 0);
+    else if (axis === 'y') normal.set(0, 1, 0);
+    else if (axis === 'z') normal.set(0, 0, 1);
+
+    const plane = new THREE.Plane(normal, position);
+    state.sectionPlanes[axis] = plane;
+
+    const planes = Object.values(state.sectionPlanes).filter(p => p !== null);
+    renderer.clippingPlanes = planes;
+
+    state.parts.forEach(part => {
+      part.traverse(node => {
+        if (node instanceof THREE.Mesh && node.material) {
+          if (Array.isArray(node.material)) {
+            node.material.forEach(m => {
+              m.clippingPlanes = planes;
+              m.clipIntersection = false;
+            });
+          } else {
+            node.material.clippingPlanes = planes;
+            node.material.clipIntersection = false;
+          }
+        }
+      });
+    });
+  }
+
+  // ============================================================================
+  // 5. MEASUREMENT TOOLS
+  // ============================================================================
+
+  function measureDistance(p1, p2) {
+    const dist = p1.distanceTo(p2);
+
+    const geometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
+    const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 2 }));
+    getScene().add(line);
+
+    const label = createDimensionLabel(dist.toFixed(2), p1.clone().lerp(p2, 0.5));
+    getScene().add(label);
+
+    state.measurements.push({ type: 'distance', p1, p2, distance: dist, line, label });
+    return dist;
+  }
+
+  function measureAngle(p1, center, p2) {
+    const v1 = p1.clone().sub(center).normalize();
+    const v2 = p2.clone().sub(center).normalize();
+    const angle = Math.acos(Math.max(-1, Math.min(1, v1.dot(v2)))) * (180 / Math.PI);
+
+    const geometry = new THREE.BufferGeometry().setFromPoints([p1, center, p2]);
+    const line = new THREE.LineSegments(geometry, new THREE.LineBasicMaterial({ color: 0x00ff00 }));
+    getScene().add(line);
+
+    const label = createDimensionLabel(angle.toFixed(1) + '°', center);
+    getScene().add(label);
+
+    state.measurements.push({ type: 'angle', angle, line, label });
+    return angle;
+  }
+
+  function computeVolume(mesh) {
+    if (!mesh.geometry.attributes.position) return 0;
+
+    const positions = mesh.geometry.attributes.position.array;
+    let volume = 0;
+
+    for (let i = 0; i < positions.length; i += 9) {
+      const v0 = new THREE.Vector3(positions[i], positions[i+1], positions[i+2]);
+      const v1 = new THREE.Vector3(positions[i+3], positions[i+4], positions[i+5]);
+      const v2 = new THREE.Vector3(positions[i+6], positions[i+7], positions[i+8]);
+
+      const box = new THREE.Box3().setFromPoints([v0, v1, v2]);
+      const size = box.getSize(new THREE.Vector3());
+      volume += Math.abs(v0.clone().cross(v1).dot(v2)) / 6;
+    }
+
+    return volume;
+  }
+
+  function computeSurfaceArea(mesh) {
+    if (!mesh.geometry.attributes.position) return 0;
+
+    const positions = mesh.geometry.attributes.position.array;
+    let area = 0;
+
+    for (let i = 0; i < positions.length; i += 9) {
+      const v0 = new THREE.Vector3(positions[i], positions[i+1], positions[i+2]);
+      const v1 = new THREE.Vector3(positions[i+3], positions[i+4], positions[i+5]);
+      const v2 = new THREE.Vector3(positions[i+6], positions[i+7], positions[i+8]);
+
+      const e1 = v1.clone().sub(v0);
+      const e2 = v2.clone().sub(v0);
+      area += e1.cross(e2).length() / 2;
+    }
+
+    return area;
+  }
+
+  function createDimensionLabel(text, position) {
+    const canvas = document.createElement('canvas');
+    canvas.width = 256;
+    canvas.height = 64;
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, 256, 64);
+    ctx.fillStyle = 'black';
+    ctx.font = 'bold 24px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText(text, 128, 40);
+
+    const texture = new THREE.CanvasTexture(canvas);
+    const geometry = new THREE.PlaneGeometry(1, 0.25);
+    const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
+    const sprite = new THREE.Mesh(geometry, material);
+    sprite.position.copy(position);
+
+    return sprite;
+  }
+
+  // ============================================================================
+  // 6. ANALYSIS TOOLS
+  // ============================================================================
+
+  function analyzeWallThickness(mesh, minThickness = 2) {
+    const colors = [];
+    const positions = mesh.geometry.attributes.position.array;
+
+    for (let i = 0; i < positions.length; i += 3) {
+      const point = new THREE.Vector3(positions[i], positions[i+1], positions[i+2]);
+      const normal = new THREE.Vector3();
+
+      mesh.geometry.computeVertexNormals();
+      const normals = mesh.geometry.attributes.normal.array;
+      normal.set(normals[i], normals[i+1], normals[i+2]);
+
+      const raycaster = new THREE.Raycaster(point, normal);
+      const intersections = raycaster.intersectObjects(state.parts);
+
+      let thickness = 1000;
+      if (intersections.length > 0) {
+        thickness = intersections[0].distance;
+      }
+
+      const hue = Math.max(0, Math.min(1, (minThickness - thickness) / minThickness));
+      const color = new THREE.Color().setHSL(hue * 0.3, 1, 0.5);
+      colors.push(color.r, color.g, color.b);
+    }
+
+    mesh.geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
+    mesh.material = new THREE.MeshStandardMaterial({ vertexColors: true });
+  }
+
+  function analyzeDraftAngle(mesh, pullDirection = new THREE.Vector3(0, 0, 1)) {
+    const colors = [];
+    const positions = mesh.geometry.attributes.position.array;
+    const normals = mesh.geometry.attributes.normal || mesh.geometry.computeVertexNormals().attributes.normal;
+
+    for (let i = 0; i < positions.length; i += 3) {
+      const normal = new THREE.Vector3(normals.array[i], normals.array[i+1], normals.array[i+2]).normalize();
+      const angle = Math.acos(Math.max(-1, Math.min(1, Math.abs(normal.dot(pullDirection))))) * (180 / Math.PI);
+
+      const hue = Math.max(0, (angle - 90) / 90);
+      const color = new THREE.Color().setHSL(hue * 0.3, 1, 0.5);
+      colors.push(color.r, color.g, color.b);
+    }
+
+    mesh.geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
+    mesh.material = new THREE.MeshStandardMaterial({ vertexColors: true });
+  }
+
+  function checkInterference() {
+    const boxes = state.parts.map(p => new THREE.Box3().setFromObject(p));
+    const collisions = [];
+
+    for (let i = 0; i < boxes.length; i++) {
+      for (let j = i + 1; j < boxes.length; j++) {
+        if (boxes[i].intersectsBox(boxes[j])) {
+          collisions.push({
+            part1: state.parts[i].name,
+            part2: state.parts[j].name,
+            severity: 'warning'
+          });
+        }
+      }
+    }
+
+    return collisions;
+  }
+
+  function computeCenterOfMass() {
+    let totalMass = 0;
+    const com = new THREE.Vector3();
+
+    state.parts.forEach(part => {
+      const volume = computeVolume(part);
+      const density = MATERIALS_DB[state.partProperties.get(part.uuid)?.material || 'steel'].density;
+      const mass = volume * (density / 1000000);
+
+      const bbox = new THREE.Box3().setFromObject(part);
+      const center = bbox.getCenter(new THREE.Vector3());
+
+      com.addScaledVector(center, mass);
+      totalMass += mass;
+
+      state.partProperties.get(part.uuid).mass = mass;
+      state.partProperties.get(part.uuid).volume = volume;
+    });
+
+    if (totalMass > 0) {
+      com.divideScalar(totalMass);
+    }
+
+    state.centerOfMass.copy(com);
+    return com;
+  }
+
+  // ============================================================================
+  // 7. MATERIAL DATABASE
+  // ============================================================================
+
+  function applyMaterial(uuid, materialName) {
+    const mat = MATERIALS_DB[materialName];
+    if (!mat) return;
+
+    const part = state.partsByUuid.get(uuid);
+    if (part) {
+      part.traverse(child => {
+        if (child instanceof THREE.Mesh) {
+          child.material = new THREE.MeshStandardMaterial({
+            color: mat.color,
+            roughness: mat.roughness,
+            metalness: mat.metalness
+          });
+        }
+      });
+    }
+
+    const props = state.partProperties.get(uuid);
+    if (props) props.material = materialName;
+  }
+
+  // ============================================================================
+  // 8. ANNOTATION TOOLS
+  // ============================================================================
+
+  function addAnnotation(position, text, category = 'info') {
+    const colors = { info: 0x0084ff, warning: 0xff6600, action: 0x00cc00 };
+
+    const geometry = new THREE.SphereGeometry(5, 8, 8);
+    const material = new THREE.MeshBasicMaterial({ color: colors[category] });
+    const pin = new THREE.Mesh(geometry, material);
+    pin.position.copy(position);
+
+    const annotation = {
+      uuid: Math.random().toString(36),
+      position: position.clone(),
+      text: text,
+      category: category,
+      pin: pin,
+      timestamp: Date.now()
+    };
+
+    getScene().add(pin);
+    state.annotations.push(annotation);
+    saveAnnotations();
+
+    return annotation;
+  }
+
+  function saveAnnotations() {
+    const data = state.annotations.map(a => ({
+      position: { x: a.position.x, y: a.position.y, z: a.position.z },
+      text: a.text,
+      category: a.category
+    }));
+    localStorage.setItem('cyclecad_annotations', JSON.stringify(data));
+  }
+
+  function loadAnnotations() {
+    const data = JSON.parse(localStorage.getItem('cyclecad_annotations') || '[]');
+    data.forEach(d => {
+      const pos = new THREE.Vector3(d.position.x, d.position.y, d.position.z);
+      addAnnotation(pos, d.text, d.category);
+    });
+  }
+
+  // ============================================================================
+  // 9. BOM (BILL OF MATERIALS)
+  // ============================================================================
+
+  function generateBOM() {
+    const bom = state.parts.map(part => {
+      const props = state.partProperties.get(part.uuid);
+      const volume = computeVolume(part);
+      const mat = MATERIALS_DB[props?.material || 'steel'];
+      const mass = volume * (mat.density / 1000000);
+
+      return {
+        partNumber: props?.name || part.name,
+        quantity: 1,
+        material: props?.material || 'steel',
+        volume: volume.toFixed(2),
+        mass: mass.toFixed(2),
+        unit: 'kg'
+      };
+    });
+
+    return bom;
+  }
+
+  function exportBOMcsv() {
+    const bom = generateBOM();
+    const headers = ['Part Number', 'Quantity', 'Material', 'Volume (mm³)', 'Mass (kg)'];
+
+    let csv = headers.join(',') + '\n';
+    bom.forEach(row => {
+      csv += `"${row.partNumber}",${row.quantity},${row.material},${row.volume},${row.mass}\n`;
+    });
+
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'bom.csv';
+    a.click();
+  }
+
+  function exportBOMhtml() {
+    const bom = generateBOM();
+    let html = '<table border="1"><tr><th>Part</th><th>Qty</th><th>Material</th><th>Volume</th><th>Mass</th></tr>';
+
+    bom.forEach(row => {
+      html += `<tr><td>${row.partNumber}</td><td>${row.quantity}</td><td>${row.material}</td><td>${row.volume}</td><td>${row.mass}</td></tr>`;
+    });
+
+    html += '</table>';
+    const blob = new Blob([html], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    window.open(url);
+  }
+
+  // ============================================================================
+  // 10. AI TOOLS
+  // ============================================================================
+
+  async function aiAnalyzeModel() {
+    const bom = generateBOM();
+    const totalMass = bom.reduce((sum, p) => sum + parseFloat(p.mass), 0);
+    const totalVolume = bom.reduce((sum, p) => sum + parseFloat(p.volume), 0);
+
+    const analysis = {
+      partCount: state.parts.length,
+      totalMass: totalMass.toFixed(2),
+      totalVolume: totalVolume.toFixed(2),
+      materials: [...new Set(bom.map(p => p.material))],
+      estimatedCost: (totalMass * 50).toFixed(2) // Rough estimate: €50/kg
+    };
+
+    return analysis;
+  }
+
+  async function aiNarratePartFunction(partUuid) {
+    const part = state.partsByUuid.get(partUuid);
+    if (!part) return '';
+
+    const volume = computeVolume(part);
+    const area = computeSurfaceArea(part);
+    const bbox = new THREE.Box3().setFromObject(part);
+    const size = bbox.getSize(new THREE.Vector3());
+
+    const narrative = `Part: ${part.name || 'Unknown'}\n` +
+      `Volume: ${volume.toFixed(0)} mm³\n` +
+      `Surface Area: ${area.toFixed(0)} mm²\n` +
+      `Size: ${size.x.toFixed(0)} × ${size.y.toFixed(0)} × ${size.z.toFixed(0)} mm\n` +
+      `This appears to be a structural component in the assembly.`;
+
+    return narrative;
+  }
+
+  // ============================================================================
+  // 11. SCREENSHOT & EXPORT
+  // ============================================================================
+
+  function captureScreenshot(scale = 2) {
+    const renderer = getRenderer();
+    const width = renderer.domElement.clientWidth * scale;
+    const height = renderer.domElement.clientHeight * scale;
+
+    const oldSize = renderer.getSize(new THREE.Vector2());
+    renderer.setSize(width, height);
+    renderer.render(getScene(), getCamera());
+
+    const canvas = renderer.domElement;
+    const image = canvas.toDataURL('image/png');
+
+    renderer.setSize(oldSize.x, oldSize.y);
+
+    const a = document.createElement('a');
+    a.href = image;
+    a.download = `screenshot_${Date.now()}.png`;
+    a.click();
+  }
+
+  function exportSTL(partUuid) {
+    const part = state.partsByUuid.get(partUuid);
+    if (!part) return;
+
+    const geometry = part.geometry;
+    if (!geometry) return;
+
+    geometry.computeVertexNormals();
+    const positions = geometry.attributes.position.array;
+    const indices = geometry.index?.array || Array.from({ length: positions.length / 3 }, (_, i) => i);
+
+    let stl = 'solid exported\n';
+
+    for (let i = 0; i < indices.length; i += 3) {
+      const i1 = indices[i] * 3;
+      const i2 = indices[i + 1] * 3;
+      const i3 = indices[i + 2] * 3;
+
+      const v1 = new THREE.Vector3(positions[i1], positions[i1+1], positions[i1+2]);
+      const v2 = new THREE.Vector3(positions[i2], positions[i2+1], positions[i2+2]);
+      const v3 = new THREE.Vector3(positions[i3], positions[i3+1], positions[i3+2]);
+
+      const e1 = v2.clone().sub(v1);
+      const e2 = v3.clone().sub(v1);
+      const normal = e1.cross(e2).normalize();
+
+      stl += `  facet normal ${normal.x} ${normal.y} ${normal.z}\n`;
+      stl += `    outer loop\n`;
+      stl += `      vertex ${v1.x} ${v1.y} ${v1.z}\n`;
+      stl += `      vertex ${v2.x} ${v2.y} ${v2.z}\n`;
+      stl += `      vertex ${v3.x} ${v3.y} ${v3.z}\n`;
+      stl += `    endloop\n`;
+      stl += `  endfacet\n`;
+    }
+
+    stl += 'endsolid exported\n';
+
+    const blob = new Blob([stl], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${part.name || 'part'}.stl`;
+    a.click();
+  }
+
+  function exportOBJ() {
+    let obj = 'mtllib model.mtl\n';
+    let vertexCount = 1;
+
+    state.parts.forEach((part, pidx) => {
+      const geometry = part.geometry;
+      if (!geometry) return;
+
+      const positions = geometry.attributes.position.array;
+
+      obj += `g part_${pidx}\n`;
+
+      for (let i = 0; i < positions.length; i += 3) {
+        obj += `v ${positions[i]} ${positions[i+1]} ${positions[i+2]}\n`;
+      }
+
+      const indices = geometry.index?.array || Array.from({ length: positions.length / 3 }, (_, i) => i);
+
+      obj += `usemtl material_${pidx}\n`;
+      for (let i = 0; i < indices.length; i += 3) {
+        const a = indices[i] + vertexCount;
+        const b = indices[i + 1] + vertexCount;
+        const c = indices[i + 2] + vertexCount;
+        obj += `f ${a} ${b} ${c}\n`;
+      }
+
+      vertexCount += positions.length / 3;
+    });
+
+    const blob = new Blob([obj], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'model.obj';
+    a.click();
+  }
+
+  // ============================================================================
+  // 12. DISPLAY MODES
+  // ============================================================================
+
+  function toggleWireframe() {
+    state.parts.forEach(part => {
+      part.traverse(node => {
+        if (node instanceof THREE.Mesh) {
+          node.material.wireframe = !node.material.wireframe;
+        }
+      });
+    });
+  }
+
+  function toggleTransparency(alpha = 0.5) {
+    state.parts.forEach(part => {
+      part.traverse(node => {
+        if (node instanceof THREE.Mesh) {
+          node.material.transparent = true;
+          node.material.opacity = alpha;
+        }
+      });
+    });
+  }
+
+  function toggleXray() {
+    state.parts.forEach(part => {
+      part.traverse(node => {
+        if (node instanceof THREE.Mesh) {
+          if (!node.userData.xrayMode) {
+            node.userData.xrayMode = true;
+            node.material.fog = false;
+          } else {
+            node.userData.xrayMode = false;
+            node.material.fog = true;
+          }
+        }
+      });
+    });
+  }
+
+  // ============================================================================
+  // 13. VIEW CONTROLS
+  // ============================================================================
+
+  function fitAllParts() {
+    const scene = getScene();
+    const camera = getCamera();
+    const controls = getControls();
+
+    const box = new THREE.Box3();
+    state.parts.forEach(p => box.expandByObject(p));
+
+    if (!box.isEmpty()) {
+      const size = box.getSize(new THREE.Vector3());
+      const maxDim = Math.max(size.x, size.y, size.z);
+      const fov = camera.fov * (Math.PI / 180);
+      let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
+
+      const center = box.getCenter(new THREE.Vector3());
+      camera.position.copy(center);
+      camera.position.z = cameraZ;
+      camera.lookAt(center);
+
+      if (controls) {
+        controls.target.copy(center);
+        controls.update();
+      }
+    }
+  }
+
+  function setViewDirection(direction) {
+    const camera = getCamera();
+    const scene = getScene();
+    const box = new THREE.Box3();
+    state.parts.forEach(p => box.expandByObject(p));
+    const center = box.getCenter(new THREE.Vector3());
+
+    const distance = 150;
+    const view = {
+      front: new THREE.Vector3(0, 0, distance),
+      back: new THREE.Vector3(0, 0, -distance),
+      top: new THREE.Vector3(0, distance, 0),
+      bottom: new THREE.Vector3(0, -distance, 0),
+      left: new THREE.Vector3(-distance, 0, 0),
+      right: new THREE.Vector3(distance, 0, 0),
+      iso: new THREE.Vector3(100, 100, 100)
+    };
+
+    const dir = view[direction];
+    if (dir) {
+      camera.position.copy(center).add(dir);
+      camera.lookAt(center);
+    }
+  }
+
+  // ============================================================================
+  // 14. ANIMATED ASSEMBLY
+  // ============================================================================
+
+  function createAssemblyAnimation() {
+    state.assemblySteps = state.parts.map((part, idx) => ({
+      part: part,
+      startTime: idx * 500,
+      duration: 1000,
+      startPos: part.position.clone(),
+      endPos: part.position.clone()
+    }));
+  }
+
+  function playAssemblyAnimation() {
+    const startTime = Date.now();
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+
+      state.assemblySteps.forEach(step => {
+        if (elapsed >= step.startTime && elapsed < step.startTime + step.duration) {
+          const progress = (elapsed - step.startTime) / step.duration;
+          step.part.position.lerpVectors(step.startPos, step.endPos, progress);
+        }
+      });
+
+      if (elapsed < state.assemblySteps[state.assemblySteps.length - 1].startTime + 1000) {
+        requestAnimationFrame(animate);
+      }
+    };
+
+    animate();
+  }
+
+  // ============================================================================
+  // 15. SMART PART SEARCH
+  // ============================================================================
+
+  function searchParts(query) {
+    const results = [];
+    const lower = query.toLowerCase();
+
+    state.parts.forEach(part => {
+      const props = state.partProperties.get(part.uuid);
+      if (props?.name.toLowerCase().includes(lower)) {
+        results.push(part);
+        part.traverse(node => {
+          if (node instanceof THREE.Mesh) {
+            node.material.emissive.setHex(0xffff00);
+          }
+        });
+      }
+    });
+
+    return results;
+  }
+
+  function clearSearch() {
+    state.parts.forEach(part => {
+      part.traverse(node => {
+        if (node instanceof THREE.Mesh) {
+          node.material.emissive.setHex(0x000000);
+        }
+      });
+    });
+  }
+
+  // ============================================================================
+  // 16. LANGUAGE SUPPORT
+  // ============================================================================
+
+  function setLanguage(lang) {
+    state.currentLanguage = lang;
+  }
+
+  function getTranslation(key) {
+    return LANGUAGE_STRINGS[state.currentLanguage]?.[key] || key;
+  }
+
+  // ============================================================================
+  // 17. AR MODE (Stub for WebXR)
+  // ============================================================================
+
+  async function enterARMode() {
+    if (!navigator.xr) {
+      console.warn('WebXR not supported');
+      return false;
+    }
+
+    try {
+      const session = await navigator.xr.requestSession('immersive-ar', {
+        requiredFeatures: ['hit-test'],
+        optionalFeatures: ['dom-overlay'],
+        domOverlay: { root: document.body }
+      });
+
+      state.isARMode = true;
+      return true;
+    } catch (e) {
+      console.error('AR mode failed:', e);
+      return false;
+    }
+  }
+
+  function exitARMode() {
+    state.isARMode = false;
+  }
+
+  // ============================================================================
+  // 18. GD&T ANNOTATIONS
+  // ============================================================================
+
+  function addGDTAnnotation(position, symbol, label) {
+    const canvas = document.createElement('canvas');
+    canvas.width = 128;
+    canvas.height = 128;
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, 128, 128);
+    ctx.fillStyle = 'black';
+    ctx.font = 'bold 14px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText(symbol, 64, 40);
+    ctx.fillText(label, 64, 80);
+
+    const texture = new THREE.CanvasTexture(canvas);
+    const geometry = new THREE.PlaneGeometry(0.5, 0.5);
+    const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
+    const sprite = new THREE.Mesh(geometry, material);
+    sprite.position.copy(position);
+
+    getScene().add(sprite);
+  }
+
+  // ============================================================================
+  // PUBLIC API
+  // ============================================================================
+
+  return {
+    // Model loading
+    loadModel,
+    loadSTEP,
+    addPart,
+
+    // Assembly tree
+    buildAssemblyTree,
+    togglePartVisibility,
+    isolatePart,
+    showAllParts,
+
+    // Explode/collapse
+    explodeParts,
+    collapseParts,
+
+    // Section cut
+    setSectionCut,
+
+    // Measurements
+    measureDistance,
+    measureAngle,
+    computeVolume,
+    computeSurfaceArea,
+
+    // Analysis
+    analyzeWallThickness,
+    analyzeDraftAngle,
+    checkInterference,
+    computeCenterOfMass,
+
+    // Materials
+    applyMaterial,
+
+    // Annotations
+    addAnnotation,
+    saveAnnotations,
+    loadAnnotations,
+
+    // BOM
+    generateBOM,
+    exportBOMcsv,
+    exportBOMhtml,
+
+    // AI tools
+    aiAnalyzeModel,
+    aiNarratePartFunction,
+
+    // Export
+    captureScreenshot,
+    exportSTL,
+    exportOBJ,
+
+    // Display modes
+    toggleWireframe,
+    toggleTransparency,
+    toggleXray,
+
+    // View controls
+    fitAllParts,
+    setViewDirection,
+
+    // Assembly animation
+    createAssemblyAnimation,
+    playAssemblyAnimation,
+
+    // Search
+    searchParts,
+    clearSearch,
+
+    // Language
+    setLanguage,
+    getTranslation,
+
+    // AR
+    enterARMode,
+    exitARMode,
+
+    // GD&T
+    addGDTAnnotation,
+
+    // Convenience methods for menu integration
+    computeVolumeOfSelected: () => {
+      if (state.selectedPart) return computeVolume(state.selectedPart);
+      if (state.parts.length > 0) return computeVolume(state.parts[0]);
+      return null;
+    },
+    computeAreaOfSelected: () => {
+      if (state.selectedPart) return computeSurfaceArea(state.selectedPart);
+      if (state.parts.length > 0) return computeSurfaceArea(state.parts[0]);
+      return null;
+    },
+    analyzeWallThicknessOfSelected: () => {
+      const mesh = state.selectedPart || state.parts[0];
+      if (mesh) analyzeWallThickness(mesh);
+    },
+    analyzeDraftAngleOfSelected: () => {
+      const mesh = state.selectedPart || state.parts[0];
+      if (mesh) analyzeDraftAngle(mesh);
+    },
+    exportSTLSelected: () => {
+      const mesh = state.selectedPart || state.parts[0];
+      if (mesh) exportSTL(mesh.uuid);
+    },
+    aiNarrateSelected: async () => {
+      const mesh = state.selectedPart || state.parts[0];
+      if (mesh) return await aiNarratePartFunction(mesh.uuid);
+      return 'Select a part first';
+    },
+    getMassProperties: () => {
+      computeCenterOfMass();
+      let totalMass = 0;
+      state.parts.forEach(part => {
+        const props = state.partProperties.get(part.uuid);
+        const vol = computeVolume(part);
+        const mat = MATERIALS_DB[props?.material || 'steel'];
+        totalMass += vol * (mat.density / 1000000);
+      });
+      return { totalMass, cog: state.centerOfMass, partCount: state.parts.length };
+    },
+    highlightPart: (uuid) => {
+      const part = state.partsByUuid.get(uuid);
+      if (part && part.material) {
+        state.parts.forEach(p => { if (p.material) p.material.emissive?.setHex(0x000000); });
+        part.material.emissive?.setHex(0x444444);
+        state.selectedPart = part;
+      }
+    },
+    startMeasureMode: (type) => {
+      console.log('[ExplodeView] Measure mode:', type, '— click points in viewport');
+    },
+    startAnnotationMode: () => {
+      console.log('[ExplodeView] Annotation mode — click a point on the model');
+    },
+    startGDTMode: () => {
+      console.log('[ExplodeView] GD&T mode — click a surface');
+    },
+
+    // State access
+    getState: () => state,
+    getParts: () => state.parts,
+    getAssemblyTree: () => state.assemblyTree
+  };
+}
+
+export default initExplodeView;