refactor: remove token and token-viewer components
Remove the `md-token` and `md-token-viewer` components along with their associated 3D generation and image tracing utilities. Update documentation and project metadata to reflect these changes and rename the project title to "Tabletop Tools".
This commit is contained in:
@@ -1,119 +0,0 @@
|
||||
import * as THREE from "three";
|
||||
import { exportTo3MF } from "three-3mf-exporter";
|
||||
import type { TraceResult } from "./image-tracer";
|
||||
import {Vector3} from "three";
|
||||
|
||||
export interface ExtrusionSettings {
|
||||
size: number; // 模型整体尺寸 (mm)
|
||||
layers: Array<{
|
||||
id: string;
|
||||
thickness: number; // 图层厚度 (mm)
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface LayerMesh {
|
||||
id: string;
|
||||
mesh: THREE.Mesh;
|
||||
thickness: number;
|
||||
color: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从图层索引生成颜色（使用黄金角确保颜色分散）
|
||||
*/
|
||||
function generateLayerColor(index: number): number {
|
||||
const hue = (index * 137.508) % 360; // 黄金角
|
||||
return new THREE.Color(`hsl(${hue}, 70%, 50%)`).getHex();
|
||||
}
|
||||
|
||||
/**
|
||||
* 将矢量路径生成 3MF 文件
|
||||
* @param image - 原始图片
|
||||
* @param traceResult - 矢量追踪结果
|
||||
* @param settings - 挤压设置
|
||||
* @returns 3MF Blob
|
||||
*/
|
||||
export async function generate3MF(
|
||||
image: HTMLImageElement,
|
||||
traceResult: TraceResult,
|
||||
settings: ExtrusionSettings
|
||||
): Promise<Blob> {
|
||||
// 创建 Three.js 场景
|
||||
const scene = new THREE.Scene();
|
||||
|
||||
// 计算缩放比例，使模型适应指定尺寸
|
||||
const maxDimension = Math.max(traceResult.width, traceResult.height);
|
||||
const scale = settings.size / maxDimension;
|
||||
|
||||
// 中心偏移
|
||||
const offsetX = -traceResult.width / 2;
|
||||
const offsetY = -traceResult.height / 2;
|
||||
|
||||
// 为每个启用的图层创建网格
|
||||
let currentHeight = 0;
|
||||
const meshes: LayerMesh[] = [];
|
||||
let layerIndex = 0;
|
||||
|
||||
let boundingBox = new THREE.Box3();
|
||||
for (const layerSetting of settings.layers) {
|
||||
const layer = traceResult.layers.find((l) => l.id === layerSetting.id);
|
||||
if (!layer) continue;
|
||||
|
||||
// 创建挤压几何体
|
||||
const extrudeSettings: THREE.ExtrudeGeometryOptions = {
|
||||
depth: layerSetting.thickness,
|
||||
curveSegments: 36,
|
||||
bevelEnabled: true,
|
||||
bevelSize: 0.4
|
||||
};
|
||||
const geometry: THREE.ExtrudeGeometry = new THREE.ExtrudeGeometry(layer.paths, extrudeSettings);
|
||||
geometry.computeBoundingBox();
|
||||
|
||||
// 为该图层生成颜色
|
||||
const color = generateLayerColor(layerIndex);
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
color,
|
||||
metalness: 0.3,
|
||||
roughness: 0.7,
|
||||
});
|
||||
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
boundingBox.expandByObject(mesh);
|
||||
|
||||
// 设置图层高度（堆叠）
|
||||
mesh.position.y = currentHeight;
|
||||
|
||||
scene.add(mesh);
|
||||
meshes.push({
|
||||
id: layerSetting.id,
|
||||
mesh,
|
||||
thickness: layerSetting.thickness,
|
||||
color,
|
||||
});
|
||||
|
||||
currentHeight += layerSetting.thickness;
|
||||
layerIndex++;
|
||||
}
|
||||
|
||||
const center = boundingBox.getCenter(new Vector3());
|
||||
for(const mesh of meshes){
|
||||
mesh.mesh.position.sub(center);
|
||||
}
|
||||
|
||||
if (meshes.length === 0) {
|
||||
throw new Error("没有可生成的图层");
|
||||
}
|
||||
|
||||
// 导出为 3MF
|
||||
const data = await exportTo3MF(scene);
|
||||
const blob = new Blob([data], { type: "model/3mf" });
|
||||
|
||||
// 清理
|
||||
scene.clear();
|
||||
meshes.forEach(({ mesh }) => {
|
||||
mesh.geometry.dispose();
|
||||
(mesh.material as THREE.Material).dispose();
|
||||
});
|
||||
|
||||
return blob;
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
import { ImageTracer, Options } from "@image-tracer-ts/core";
|
||||
//@ts-ignore
|
||||
import {SVGLoader, SVGResult} from "three/examples/jsm/loaders/SVGLoader";
|
||||
import {Color, ShapePath, Shape} from "three";
|
||||
|
||||
export interface TracedLayer {
|
||||
id: string;
|
||||
name: string;
|
||||
color: Color;
|
||||
paths: Shape[];
|
||||
}
|
||||
|
||||
export interface PathData {
|
||||
points: Point[];
|
||||
isClosed: boolean;
|
||||
}
|
||||
|
||||
export interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface TraceResult {
|
||||
width: number;
|
||||
height: number;
|
||||
layers: TracedLayer[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 将图像转换为矢量路径
|
||||
* @param image - 要追踪的图片元素
|
||||
* @param options - 追踪选项
|
||||
* @returns 追踪结果
|
||||
*/
|
||||
export async function traceImage(
|
||||
image: HTMLImageElement,
|
||||
options?: Partial<Options>
|
||||
): Promise<TraceResult> {
|
||||
// 创建 canvas 来获取图片数据
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
if (!ctx) {
|
||||
throw new Error("无法创建 canvas 上下文");
|
||||
}
|
||||
|
||||
// 设置 canvas 尺寸为图片原始尺寸
|
||||
canvas.width = image.naturalWidth || image.width;
|
||||
canvas.height = image.naturalHeight || image.height;
|
||||
|
||||
// 绘制图片到 canvas
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
// 获取图片数据
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 默认配置 - 使用 detailed preset 作为基础
|
||||
const defaultOptions: Partial<Options> = {
|
||||
...Options.Presets.default,
|
||||
numberOfColors: 8, // 限制颜色数量以控制图层数
|
||||
minColorQuota: 0.01, // 降低最小颜色占比阈值
|
||||
strokeWidth: 0, // 不需要描边
|
||||
lineFilter: true,
|
||||
...options,
|
||||
};
|
||||
|
||||
// 创建追踪器
|
||||
const tracer = new ImageTracer(defaultOptions);
|
||||
|
||||
// 执行追踪，返回 SVG 字符串
|
||||
const svgString = tracer.traceImage(imageData);
|
||||
|
||||
// 解析 SVG 字符串
|
||||
const loader = new SVGLoader();
|
||||
const result = loader.parse(svgString) as SVGResult;
|
||||
const paths: ShapePath[] = result.paths;
|
||||
|
||||
const layers: TracedLayer[] = paths.map((path, i,) => {
|
||||
return {
|
||||
id: `layer-${i}`,
|
||||
name: `颜色层 ${i + 1}`,
|
||||
color: path.color,
|
||||
paths: SVGLoader.createShapes(path),
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
layers,
|
||||
};
|
||||
}
|
||||
@@ -1,172 +0,0 @@
|
||||
import * as THREE from "three";
|
||||
import type { TraceResult, PathData, Point } from "./image-tracer";
|
||||
|
||||
export interface ExtrusionSettings {
|
||||
size: number; // 模型整体尺寸 (mm)
|
||||
layers: Array<{
|
||||
id: string;
|
||||
thickness: number; // 图层厚度 (mm)
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface LayerMesh {
|
||||
id: string;
|
||||
mesh: THREE.Mesh;
|
||||
thickness: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将矢量路径生成 STL 文件
|
||||
* @param image - 原始图片
|
||||
* @param traceResult - 矢量追踪结果
|
||||
* @param settings - 挤压设置
|
||||
* @returns STL Blob
|
||||
*/
|
||||
export async function generateSTL(
|
||||
image: HTMLImageElement,
|
||||
traceResult: TraceResult,
|
||||
settings: ExtrusionSettings
|
||||
): Promise<Blob> {
|
||||
// 创建 Three.js 场景
|
||||
const scene = new THREE.Scene();
|
||||
|
||||
// 计算缩放比例，使模型适应指定尺寸
|
||||
const maxDimension = Math.max(traceResult.width, traceResult.height);
|
||||
const scale = settings.size / maxDimension;
|
||||
|
||||
// 中心偏移
|
||||
const offsetX = -traceResult.width / 2;
|
||||
const offsetY = -traceResult.height / 2;
|
||||
|
||||
// 为每个启用的图层创建网格
|
||||
let currentHeight = 0;
|
||||
const meshes: LayerMesh[] = [];
|
||||
|
||||
for (const layerSetting of settings.layers) {
|
||||
const layer = traceResult.layers.find((l) => l.id === layerSetting.id);
|
||||
if (!layer) continue;
|
||||
|
||||
// 创建挤压几何体 - Three.js 支持直接传入 shape 数组
|
||||
const extrudeSettings: THREE.ExtrudeGeometryOptions = {
|
||||
depth: layerSetting.thickness,
|
||||
curveSegments: 12,
|
||||
bevelEnabled: false,
|
||||
};
|
||||
|
||||
// 直接将所有 shape 传给 ExtrudeGeometry，它会自动处理多个 shape
|
||||
const geometry = new THREE.ExtrudeGeometry(layer.paths, extrudeSettings);
|
||||
|
||||
// 创建网格并设置位置
|
||||
const material = new THREE.MeshBasicMaterial({ color: 0x808080 });
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
|
||||
// 设置图层高度（堆叠）
|
||||
mesh.position.y = currentHeight;
|
||||
|
||||
scene.add(mesh);
|
||||
meshes.push({
|
||||
id: layerSetting.id,
|
||||
mesh,
|
||||
thickness: layerSetting.thickness,
|
||||
});
|
||||
|
||||
currentHeight += layerSetting.thickness;
|
||||
}
|
||||
|
||||
if (meshes.length === 0) {
|
||||
throw new Error("没有可生成的图层");
|
||||
}
|
||||
|
||||
// 导出为 STL
|
||||
const stlString = exportToSTL(scene);
|
||||
const blob = new Blob([stlString], { type: "model/stl" });
|
||||
|
||||
// 清理
|
||||
scene.clear();
|
||||
meshes.forEach(({ mesh }) => {
|
||||
mesh.geometry.dispose();
|
||||
(mesh.material as THREE.Material).dispose();
|
||||
});
|
||||
|
||||
return blob;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从路径数据创建 Three.js 形状
|
||||
*/
|
||||
function createShapeFromPath(
|
||||
path: PathData,
|
||||
scale: number,
|
||||
offsetX: number,
|
||||
offsetY: number
|
||||
): THREE.Shape | null {
|
||||
if (path.points.length < 2) return null;
|
||||
|
||||
const shape = new THREE.Shape();
|
||||
|
||||
// 移动到起点
|
||||
const startPoint = path.points[0];
|
||||
shape.moveTo(
|
||||
(startPoint.x + offsetX) * scale,
|
||||
(startPoint.y + offsetY) * scale
|
||||
);
|
||||
|
||||
// 绘制线段到后续点
|
||||
for (let i = 1; i < path.points.length; i++) {
|
||||
const point = path.points[i];
|
||||
shape.lineTo(
|
||||
(point.x + offsetX) * scale,
|
||||
(point.y + offsetY) * scale
|
||||
);
|
||||
}
|
||||
|
||||
// 如果是闭合路径，闭合形状
|
||||
if (path.isClosed) {
|
||||
shape.closePath();
|
||||
}
|
||||
|
||||
return shape;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 Three.js 场景导出为 ASCII STL 格式
|
||||
*/
|
||||
function exportToSTL(scene: THREE.Scene): string {
|
||||
let output = "solid token\n";
|
||||
|
||||
scene.traverse((object) => {
|
||||
if (object instanceof THREE.Mesh && object.geometry) {
|
||||
const geometry = object.geometry as THREE.BufferGeometry;
|
||||
const positions = geometry.getAttribute("position") as THREE.BufferAttribute;
|
||||
const normals = geometry.getAttribute("normal") as THREE.BufferAttribute;
|
||||
|
||||
for (let i = 0; i < positions.count; i += 3) {
|
||||
// 获取法线
|
||||
let normalStr = "";
|
||||
if (normals) {
|
||||
const nx = normals.getX(i);
|
||||
const ny = normals.getY(i);
|
||||
const nz = normals.getZ(i);
|
||||
normalStr = ` normal ${nx.toFixed(6)} ${ny.toFixed(6)} ${nz.toFixed(6)}`;
|
||||
}
|
||||
|
||||
output += ` facet${normalStr}\n`;
|
||||
output += " outer loop\n";
|
||||
|
||||
// 获取三个顶点
|
||||
for (let j = 0; j < 3; j++) {
|
||||
const x = positions.getX(i + j);
|
||||
const y = positions.getY(i + j);
|
||||
const z = positions.getZ(i + j);
|
||||
output += ` vertex ${x.toFixed(6)} ${y.toFixed(6)} ${z.toFixed(6)}\n`;
|
||||
}
|
||||
|
||||
output += " endloop\n";
|
||||
output += " endfacet\n";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
output += "endsolid token\n";
|
||||
return output;
|
||||
}
|
||||
Reference in New Issue
Block a user