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:
parent
5097aba842
commit
d95615f210
|
|
@ -41,7 +41,7 @@ ttrpg-tools/
|
|||
│ │ ├── md-pins.tsx # 标记组件
|
||||
│ │ ├── md-commander/ # 命令追踪器
|
||||
│ │ ├── md-yarn-spinner.tsx # 叙事线组件
|
||||
│ │ ├── md-token.tsx # 代币组件
|
||||
|
||||
│ │ ├── Article.tsx # 文章组件
|
||||
│ │ ├── Sidebar.tsx # 侧边栏
|
||||
│ │ ├── FileTree.tsx # 文件树
|
||||
|
|
@ -77,7 +77,7 @@ ttrpg-tools/
|
|||
| 样式 | Tailwind CSS 4 + @tailwindcss/typography |
|
||||
| Markdown | marked + marked-directive + marked-alert + marked-gfm-heading-id |
|
||||
| 图表 | mermaid |
|
||||
| 3D | three.js |
|
||||
|
||||
| 测试 | Jest |
|
||||
| CLI | commander + chokidar |
|
||||
|
||||
|
|
|
|||
|
|
@ -431,26 +431,7 @@ layers="字段：起始行，起始列 - 结束列，字体大小"
|
|||
:md-yarn-spinner[./story.yarn]
|
||||
```
|
||||
|
||||
### 🪙 代币组件 (md-token)
|
||||
|
||||
用于展示游戏代币/棋子。
|
||||
|
||||
```markdown
|
||||
:md-token[./token.png]
|
||||
```
|
||||
|
||||
### 🎨 代币预览组件 (md-token-viewer)
|
||||
|
||||
用于 3D 预览 3MF 格式的代币模型。
|
||||
|
||||
```markdown
|
||||
:md-token-viewer[./token.3mf]
|
||||
```
|
||||
|
||||
**功能：**
|
||||
- 使用 Three.js 渲染 3D 模型
|
||||
- 支持鼠标拖拽旋转
|
||||
- 自动旋转展示
|
||||
|
||||
### 📋 命令追踪器 (md-commander)
|
||||
|
||||
|
|
|
|||
|
|
@ -335,7 +335,7 @@ MCP 服务器提供以下 Resources，包含 TTRPG Tools 的文档和参考材
|
|||
- `:md-table` - 表格组件
|
||||
- `:md-deck` - 卡牌组件
|
||||
- `:md-yarn-spinner` - 叙事线组件
|
||||
- `:md-token` - 代币组件
|
||||
|
||||
- `:md-commander` - 命令追踪器
|
||||
- YAML 标签
|
||||
- Mermaid 图表
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
"@modelcontextprotocol/sdk": "^0.5.0",
|
||||
"@solidjs/router": "^0.15.0",
|
||||
"@thisbeyond/solid-dnd": "^0.7.5",
|
||||
"@types/three": "^0.183.1",
|
||||
"aedes": "^1.1.1",
|
||||
"chokidar": "^5.0.0",
|
||||
"commander": "^14.0.3",
|
||||
|
|
@ -27,18 +26,16 @@
|
|||
"mqtt": "^5.15.1",
|
||||
"solid-element": "^1.9.1",
|
||||
"solid-js": "^1.9.3",
|
||||
"three": "^0.183.2",
|
||||
"three-3mf-exporter": "^45.1.0",
|
||||
"uuid": "^14.0.1",
|
||||
"ws": "^8.21.0",
|
||||
"yarn-spinner-loader": "^0.1.0",
|
||||
"zod": "^4.4.3"
|
||||
},
|
||||
"bin": {
|
||||
"ttrpg": "dist/cli/index.js"
|
||||
"ttrpg": "dist/cli/index.js",
|
||||
"ttt": "dist/cli/index.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@image-tracer-ts/core": "^1.0.2",
|
||||
"@rsbuild/core": "^1.1.8",
|
||||
"@rsbuild/plugin-babel": "^1.1.0",
|
||||
"@rsbuild/plugin-solid": "^1.1.0",
|
||||
|
|
@ -873,12 +870,6 @@
|
|||
"@jridgewell/sourcemap-codec": "^1.4.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@dimforge/rapier3d-compat": {
|
||||
"version": "0.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
|
||||
"integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
|
||||
|
|
@ -927,13 +918,6 @@
|
|||
"mlly": "^1.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@image-tracer-ts/core": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@image-tracer-ts/core/-/core-1.0.2.tgz",
|
||||
"integrity": "sha512-IY1/AMqvu6444dEwaFwJXwskp2fyKTFFVKvKHXBCT7hGz7OLRLHrWGHJrCsVw6HPSeucoHD5j/gtieWVSzocEw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@istanbuljs/load-nyc-config": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
|
||||
|
|
@ -2944,12 +2928,6 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tweenjs/tween.js": {
|
||||
"version": "23.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
|
||||
"integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tybys/wasm-util": {
|
||||
"version": "0.10.1",
|
||||
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
|
||||
|
|
@ -3356,27 +3334,6 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/stats.js": {
|
||||
"version": "0.17.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
|
||||
"integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/three": {
|
||||
"version": "0.183.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.183.1.tgz",
|
||||
"integrity": "sha512-f2Pu5Hrepfgavttdye3PsH5RWyY/AvdZQwIVhrc4uNtvF7nOWJacQKcoVJn0S4f0yYbmAE6AR+ve7xDcuYtMGw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@dimforge/rapier3d-compat": "~0.12.0",
|
||||
"@tweenjs/tween.js": "~23.1.3",
|
||||
"@types/stats.js": "*",
|
||||
"@types/webxr": ">=0.5.17",
|
||||
"@webgpu/types": "*",
|
||||
"fflate": "~0.8.2",
|
||||
"meshoptimizer": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/tough-cookie": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
|
||||
|
|
@ -3398,12 +3355,6 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/webxr": {
|
||||
"version": "0.5.24",
|
||||
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
|
||||
"integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
||||
|
|
@ -3440,12 +3391,6 @@
|
|||
"d3-transition": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@webgpu/types": {
|
||||
"version": "0.1.69",
|
||||
"resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz",
|
||||
"integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/abab": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||
|
|
@ -4450,12 +4395,6 @@
|
|||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/core-util-is": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cose-base": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
|
||||
|
|
@ -5585,41 +5524,6 @@
|
|||
],
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/fast-xml-builder": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.1.4.tgz",
|
||||
"integrity": "sha512-f2jhpN4Eccy0/Uz9csxh3Nu6q4ErKxf0XIsasomfOihuSUa3/xw6w8dnOtCDgEItQFJG8KyXPzQXzcODDrrbOg==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/NaturalIntelligence"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"path-expression-matcher": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/fast-xml-parser": {
|
||||
"version": "5.5.10",
|
||||
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.5.10.tgz",
|
||||
"integrity": "sha512-go2J2xODMc32hT+4Xr/bBGXMaIoiCwrwp2mMtAvKyvEFW6S/v5Gn2pBmE4nvbwNjGhpcAiOwEv7R6/GZ6XRa9w==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/NaturalIntelligence"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-xml-builder": "^1.1.4",
|
||||
"path-expression-matcher": "^1.2.1",
|
||||
"strnum": "^2.2.2"
|
||||
},
|
||||
"bin": {
|
||||
"fxparser": "src/cli/cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/fastparallel": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/fastparallel/-/fastparallel-2.4.1.tgz",
|
||||
|
|
@ -5649,12 +5553,6 @@
|
|||
"bser": "2.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/fflate": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
|
||||
"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||
|
|
@ -6091,12 +5989,6 @@
|
|||
],
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/immediate": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
|
||||
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/import-local": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
|
||||
|
|
@ -6256,12 +6148,6 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/isexe": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
|
|
@ -7968,18 +7854,6 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/jszip": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
|
||||
"integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
|
||||
"license": "(MIT OR GPL-3.0-or-later)",
|
||||
"dependencies": {
|
||||
"lie": "~3.3.0",
|
||||
"pako": "~1.0.2",
|
||||
"readable-stream": "~2.3.6",
|
||||
"setimmediate": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/katex": {
|
||||
"version": "0.16.45",
|
||||
"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.45.tgz",
|
||||
|
|
@ -8053,15 +7927,6 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/lie": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
|
||||
"integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"immediate": "~3.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.32.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
|
||||
|
|
@ -8536,12 +8401,6 @@
|
|||
"uuid": "dist/esm/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/meshoptimizer": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.0.1.tgz",
|
||||
"integrity": "sha512-Vix+QlA1YYT3FwmBBZ+49cE5y/b+pRrcXKqGpS5ouh33d3lSp2PoTpCw19E0cKDFWalembrHnIaZetf27a+W2g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/micromatch": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
|
||||
|
|
@ -8915,12 +8774,6 @@
|
|||
"integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
|
||||
"license": "(MIT AND Zlib)"
|
||||
},
|
||||
"node_modules/parse-json": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
|
||||
|
|
@ -8969,21 +8822,6 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/path-expression-matcher": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.2.1.tgz",
|
||||
"integrity": "sha512-d7gQQmLvAKXKXE2GeP9apIGbMYKz88zWdsn/BN2HRWVQsDFdUY36WSLTY0Jvd4HWi7Fb30gQ62oAOzdgJA6fZw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/NaturalIntelligence"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/path-is-absolute": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||
|
|
@ -9320,21 +9158,6 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
|
||||
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
|
||||
|
|
@ -9589,12 +9412,6 @@
|
|||
"seroval": "^1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/setimmediate": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
|
||||
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/setprototypeof": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||
|
|
@ -9862,18 +9679,6 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/strnum": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/strnum/-/strnum-2.2.2.tgz",
|
||||
"integrity": "sha512-DnR90I+jtXNSTXWdwrEy9FakW7UX+qUZg28gj5fk2vxxl7uS/3bpI4fjFYVmdK9etptYBPNkpahuQnEwhwECqA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/NaturalIntelligence"
|
||||
}
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/stylis": {
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
|
||||
|
|
@ -9949,25 +9754,6 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.183.2",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.183.2.tgz",
|
||||
"integrity": "sha512-di3BsL2FEQ1PA7Hcvn4fyJOlxRRgFYBpMTcyOgkwJIaDOdJMebEFPA+t98EvjuljDx4hNulAGwF6KIjtwI5jgQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/three-3mf-exporter": {
|
||||
"version": "45.2.0",
|
||||
"resolved": "https://registry.npmjs.org/three-3mf-exporter/-/three-3mf-exporter-45.2.0.tgz",
|
||||
"integrity": "sha512-Xwuciopn3ecMhf9muVIRTh/GrSdxUTrdz43fMfazPZdxQ1E0eOBIGEhQEUrGlvRLLcWeaHo5MvZQCClTAMmmog==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-xml-parser": "^5.0.9",
|
||||
"jszip": "^3.10.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"three": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/tinyexec": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.4.tgz",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
{
|
||||
"name": "ttrpg-tools",
|
||||
"version": "0.0.1",
|
||||
"description": "A TTRPG toolbox based on solid.js and rsbuild",
|
||||
"description": "A tabletop RPG toolbox based on solid.js and rsbuild",
|
||||
"type": "module",
|
||||
"bin": {
|
||||
"ttrpg": "./dist/cli/index.js"
|
||||
"ttrpg": "./dist/cli/index.js",
|
||||
"ttt": "./dist/cli/index.js"
|
||||
},
|
||||
"main": "./dist/index.js",
|
||||
"module": "./dist/index.js",
|
||||
|
|
@ -35,7 +36,6 @@
|
|||
"@modelcontextprotocol/sdk": "^0.5.0",
|
||||
"@solidjs/router": "^0.15.0",
|
||||
"@thisbeyond/solid-dnd": "^0.7.5",
|
||||
"@types/three": "^0.183.1",
|
||||
"aedes": "^1.1.1",
|
||||
"chokidar": "^5.0.0",
|
||||
"commander": "^14.0.3",
|
||||
|
|
@ -50,15 +50,12 @@
|
|||
"mqtt": "^5.15.1",
|
||||
"solid-element": "^1.9.1",
|
||||
"solid-js": "^1.9.3",
|
||||
"three": "^0.183.2",
|
||||
"three-3mf-exporter": "^45.1.0",
|
||||
"uuid": "^14.0.1",
|
||||
"ws": "^8.21.0",
|
||||
"yarn-spinner-loader": "^0.1.0",
|
||||
"zod": "^4.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@image-tracer-ts/core": "^1.0.2",
|
||||
"@rsbuild/core": "^1.1.8",
|
||||
"@rsbuild/plugin-babel": "^1.1.0",
|
||||
"@rsbuild/plugin-solid": "^1.1.0",
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ const App: Component = () => {
|
|||
>
|
||||
☰
|
||||
</button>
|
||||
<h1 class="text-2xl font-bold text-gray-900">TTRPG Tools</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Tabletop Tools</h1>
|
||||
<div class="flex-1" />
|
||||
<button
|
||||
onClick={() => setIsJournalOpen((v) => !v)}
|
||||
|
|
|
|||
|
|
@ -56,8 +56,7 @@ import mdBorderRaw from "../doc-entries/md-border.md";
|
|||
import mdEmbedRaw from "../doc-entries/md-embed.md";
|
||||
import mdDeckRaw from "../doc-entries/md-deck.md";
|
||||
import mdYarnRaw from "../doc-entries/md-yarn-spinner.md";
|
||||
import mdTokenRaw from "../doc-entries/md-token.md";
|
||||
import mdTokenViewerRaw from "../doc-entries/md-token-viewer.md";
|
||||
|
||||
import mdCommanderRaw from "../doc-entries/md-commander.md";
|
||||
|
||||
const rawDocuments: string[] = [
|
||||
|
|
@ -71,8 +70,7 @@ const rawDocuments: string[] = [
|
|||
mdEmbedRaw,
|
||||
mdDeckRaw,
|
||||
mdYarnRaw,
|
||||
mdTokenRaw,
|
||||
mdTokenViewerRaw,
|
||||
|
||||
mdCommanderRaw,
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ import "./md-embed";
|
|||
import "./md-deck";
|
||||
import "./md-commander/index";
|
||||
import "./md-yarn-spinner";
|
||||
import "./md-token";
|
||||
import "./md-token-viewer";
|
||||
|
||||
// 导出组件
|
||||
export { Article } from "./Article";
|
||||
|
|
@ -33,7 +31,6 @@ export type { FontProps } from "./md-font";
|
|||
export type { BorderProps } from "./md-border";
|
||||
export type { EmbedProps } from "./md-embed";
|
||||
export type { YarnSpinnerProps } from "./md-yarn-spinner";
|
||||
export type { TokenProps } from "./md-token";
|
||||
|
||||
// 导出 md-commander 相关
|
||||
export type {
|
||||
|
|
|
|||
|
|
@ -1,216 +0,0 @@
|
|||
import {
|
||||
createSignal,
|
||||
onMount,
|
||||
onCleanup,
|
||||
Show, createEffect,
|
||||
} from "solid-js";
|
||||
import * as THREE from "three";
|
||||
import { ThreeMFLoader } from "three/addons/loaders/3MFLoader.js";
|
||||
|
||||
export interface TokenViewerProps {
|
||||
url: string | null;
|
||||
}
|
||||
|
||||
export default function MdTokenViewer(props: TokenViewerProps) {
|
||||
|
||||
const [viewerRef, setViewerRef] = createSignal<HTMLDivElement | null>(null);
|
||||
const [isLoaded, setIsLoaded] = createSignal(false);
|
||||
const [error, setError] = createSignal<string | null>(null);
|
||||
|
||||
let scene: THREE.Scene | null = null;
|
||||
let camera: THREE.PerspectiveCamera | null = null;
|
||||
let renderer: THREE.WebGLRenderer | null = null;
|
||||
let mesh: THREE.Mesh | null = null;
|
||||
let group: THREE.Group | null = null;
|
||||
let animationId: number | null = null;
|
||||
let isDragging = false;
|
||||
let previousMousePosition = { x: 0, y: 0 };
|
||||
|
||||
// 加载 3MF 用于预览
|
||||
const load3mf = async (url: string) => {
|
||||
const viewerEl = viewerRef();
|
||||
if (!viewerEl) return;
|
||||
|
||||
// 清理旧的场景
|
||||
if (group) {
|
||||
scene?.remove(group);
|
||||
group.traverse((obj) => {
|
||||
if ((obj as THREE.Mesh).isMesh) {
|
||||
const meshObj = obj as THREE.Mesh;
|
||||
meshObj.geometry.dispose();
|
||||
(meshObj.material as THREE.Material).dispose();
|
||||
}
|
||||
});
|
||||
group = null;
|
||||
mesh = null;
|
||||
}
|
||||
|
||||
try {
|
||||
const loader = new ThreeMFLoader();
|
||||
const object = await loader.loadAsync(url);
|
||||
|
||||
// 3MF 文件可能返回一个 Group，包含多个 Mesh
|
||||
group = object instanceof THREE.Group ? object : new THREE.Group().add(object);
|
||||
group.rotateX(Math.PI);
|
||||
|
||||
// 为每个 mesh 启用原始颜色
|
||||
group.traverse((child) => {
|
||||
if ((child as THREE.Mesh).isMesh) {
|
||||
const childMesh = child as THREE.Mesh;
|
||||
const material = childMesh.material as THREE.MeshStandardMaterial;
|
||||
// 保留原始顶点颜色或材质颜色
|
||||
if (childMesh.geometry.attributes.color) {
|
||||
material.vertexColors = true;
|
||||
}
|
||||
// 确保材质是标准材质以支持光照
|
||||
if (!(childMesh.material instanceof THREE.MeshStandardMaterial)) {
|
||||
childMesh.material = new THREE.MeshStandardMaterial({
|
||||
color: material.color,
|
||||
metalness: 0.3,
|
||||
roughness: 0.7,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
scene?.add(group);
|
||||
mesh = group.children[0] as THREE.Mesh;
|
||||
|
||||
// 调整相机
|
||||
if (camera && scene) {
|
||||
const box = new THREE.Box3().setFromObject(group);
|
||||
const size = box.getSize(new THREE.Vector3());
|
||||
const maxDim = Math.max(size.x, size.y, size.z);
|
||||
|
||||
camera.position.set(maxDim * 2, maxDim * 2, maxDim * 2);
|
||||
camera.lookAt(0, 0, 0);
|
||||
}
|
||||
|
||||
setIsLoaded(true);
|
||||
} catch (e) {
|
||||
console.error("加载 3MF 预览失败:", e);
|
||||
setError(e instanceof Error ? e.message : "加载模型失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化 Three.js 场景
|
||||
onMount(() => {
|
||||
const viewerEl = viewerRef();
|
||||
if (!viewerEl) return;
|
||||
|
||||
// 创建场景
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0xf3f4f6);
|
||||
|
||||
// 创建相机
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
45,
|
||||
viewerEl.clientWidth / viewerEl.clientHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
camera.position.set(100, 100, 100);
|
||||
|
||||
// 创建渲染器
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(viewerEl.clientWidth, viewerEl.clientHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.shadowMap.enabled = true;
|
||||
|
||||
viewerEl.appendChild(renderer.domElement);
|
||||
|
||||
// 添加灯光
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
|
||||
scene.add(ambientLight);
|
||||
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
||||
directionalLight.position.set(50, 100, 50);
|
||||
directionalLight.castShadow = true;
|
||||
scene.add(directionalLight);
|
||||
|
||||
// 添加坐标轴辅助
|
||||
const axesHelper = new THREE.AxesHelper(10);
|
||||
scene.add(axesHelper);
|
||||
|
||||
// 鼠标控制
|
||||
const handleMouseDown = (e: MouseEvent) => {
|
||||
isDragging = true;
|
||||
previousMousePosition = { x: e.clientX, y: e.clientY };
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!isDragging || !group) return;
|
||||
|
||||
const deltaX = e.clientX - previousMousePosition.x;
|
||||
const deltaY = e.clientY - previousMousePosition.y;
|
||||
|
||||
group.rotation.y += deltaX * 0.01;
|
||||
group.rotation.x += deltaY * 0.01;
|
||||
|
||||
previousMousePosition = { x: e.clientX, y: e.clientY };
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
isDragging = false;
|
||||
};
|
||||
|
||||
viewerEl.addEventListener("mousedown", handleMouseDown);
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
|
||||
// 动画循环
|
||||
const animate = () => {
|
||||
if (scene && camera && renderer && group) {
|
||||
if (!isDragging) {
|
||||
group.rotation.y += 0.005; // 自动旋转
|
||||
}
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
animationId = requestAnimationFrame(animate);
|
||||
};
|
||||
animate();
|
||||
|
||||
// 清理函数
|
||||
onCleanup(() => {
|
||||
if (animationId) cancelAnimationFrame(animationId);
|
||||
viewerEl.removeEventListener("mousedown", handleMouseDown);
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
|
||||
if (renderer) {
|
||||
renderer.dispose();
|
||||
viewerEl.removeChild(renderer.domElement);
|
||||
}
|
||||
if (scene) scene.clear();
|
||||
});
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (props.url) {
|
||||
load3mf(props.url);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setViewerRef}
|
||||
class="relative border rounded-lg overflow-hidden bg-gray-50 aspect-square"
|
||||
style={{ "min-height": "200px" }}
|
||||
>
|
||||
<div class="absolute top-2 left-2 z-10 bg-black/50 text-white text-xs px-2 py-1 rounded">
|
||||
拖动旋转
|
||||
</div>
|
||||
<Show when={error()}>
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-black/50 text-white">
|
||||
⚠️ {error()}
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={!isLoaded() && !error()}>
|
||||
<div class="absolute inset-0 flex items-center justify-center text-gray-500">
|
||||
<div class="animate-spin inline-block w-6 h-6 border-2 border-current border-t-transparent rounded-full mr-2" />
|
||||
加载模型中...
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,313 +0,0 @@
|
|||
import { customElement, noShadowDOM } from "solid-element";
|
||||
import {
|
||||
Show,
|
||||
For,
|
||||
createResource,
|
||||
createMemo,
|
||||
createSignal,
|
||||
onCleanup,
|
||||
} from "solid-js";
|
||||
import { resolvePath } from "./utils/path";
|
||||
import { traceImage, type TracedLayer } from "./utils/image-tracer";
|
||||
import { generate3MF, type ExtrusionSettings } from "./utils/3mf-generator";
|
||||
import MdTokenViewer from "./md-token-viewer";
|
||||
|
||||
export interface TokenProps {
|
||||
size?: number; // 模型整体尺寸 (mm), 默认 50
|
||||
defaultThickness?: number; // 默认图层厚度 (mm), 默认 2
|
||||
}
|
||||
|
||||
interface LayerSettings {
|
||||
id: string;
|
||||
name: string;
|
||||
enabled: boolean;
|
||||
thickness: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
customElement("md-token", { size: 50, defaultThickness: 2 }, (props, { element }) => {
|
||||
noShadowDOM();
|
||||
|
||||
const [showEditor, setShowEditor] = createSignal(false);
|
||||
const [layers, setLayers] = createSignal<LayerSettings[]>([]);
|
||||
const [modelUrl, setModelUrl] = createSignal<string | null>(null);
|
||||
const [isGenerating, setIsGenerating] = createSignal(false);
|
||||
const [error, setError] = createSignal<string | null>(null);
|
||||
|
||||
// 从 element 的 textContent 获取图片路径
|
||||
const rawSrc = element?.textContent?.trim() || "";
|
||||
|
||||
// 隐藏原始文本内容
|
||||
if (element) {
|
||||
element.textContent = "";
|
||||
}
|
||||
|
||||
// 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
|
||||
const articleEl = element?.closest("article[data-src]");
|
||||
const articlePath = articleEl?.getAttribute("data-src") || "";
|
||||
|
||||
// 解析相对路径
|
||||
const resolvedSrc = resolvePath(articlePath, rawSrc);
|
||||
|
||||
// 加载图片
|
||||
const loadImage = (src: string): Promise<HTMLImageElement> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = reject;
|
||||
img.src = src;
|
||||
});
|
||||
};
|
||||
|
||||
const [image] = createResource(resolvedSrc, loadImage);
|
||||
|
||||
// 图像加载完成后进行矢量追踪
|
||||
const [traceResult] = createResource(
|
||||
() => image(),
|
||||
async (img) => {
|
||||
if (!img) return null;
|
||||
try {
|
||||
const traced = await traceImage(img);
|
||||
return traced;
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "矢量追踪失败");
|
||||
return null;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 初始化图层设置
|
||||
createMemo(() => {
|
||||
const result = traceResult();
|
||||
if (result && result.layers.length > 0) {
|
||||
const layerSettings: LayerSettings[] = result.layers.map((layer, index) => ({
|
||||
id: layer.id,
|
||||
name: layer.name || `图层 ${index + 1}`,
|
||||
enabled: true,
|
||||
thickness: props.defaultThickness || 2,
|
||||
color: `#${layer.color.getHexString()}` || `hsl(${(index * 60) % 360}, 70%, 50%)`,
|
||||
}));
|
||||
setLayers(layerSettings);
|
||||
}
|
||||
});
|
||||
|
||||
// 生成 3MF 模型
|
||||
const generateModel = async () => {
|
||||
if (!image()) return;
|
||||
|
||||
setIsGenerating(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const enabledLayers = layers().filter((l) => l.enabled);
|
||||
if (enabledLayers.length === 0) {
|
||||
setError("请至少选择一个图层");
|
||||
setIsGenerating(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const settings: ExtrusionSettings = {
|
||||
size: props.size || 50,
|
||||
layers: enabledLayers.map((l) => ({
|
||||
id: l.id,
|
||||
thickness: l.thickness,
|
||||
})),
|
||||
};
|
||||
|
||||
const modelBlob = await generate3MF(image()!, traceResult()!, settings);
|
||||
const url = URL.createObjectURL(modelBlob);
|
||||
setModelUrl(url);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "生成模型失败");
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 更新图层厚度
|
||||
const updateLayerThickness = (layerId: string, thickness: number) => {
|
||||
setLayers((prev) =>
|
||||
prev.map((l) => (l.id === layerId ? { ...l, thickness } : l))
|
||||
);
|
||||
};
|
||||
|
||||
// 切换图层启用状态
|
||||
const toggleLayer = (layerId: string) => {
|
||||
setLayers((prev) =>
|
||||
prev.map((l) => (l.id === layerId ? { ...l, enabled: !l.enabled } : l))
|
||||
);
|
||||
};
|
||||
|
||||
// 下载 3MF 文件
|
||||
const downloadModel = () => {
|
||||
const url = modelUrl();
|
||||
if (!url) return;
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `token-${Date.now()}.3mf`;
|
||||
a.click();
|
||||
};
|
||||
|
||||
// 清理 URL
|
||||
onCleanup(() => {
|
||||
const url = modelUrl();
|
||||
if (url) {
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
});
|
||||
|
||||
const visible = createMemo(() => !image.loading && !!image());
|
||||
|
||||
return (
|
||||
<div class="md-token-component my-4">
|
||||
<Show when={visible()}>
|
||||
<div class="flex flex-col gap-4">
|
||||
{/* 预览区域 */}
|
||||
<div class="flex flex-wrap gap-4 items-start">
|
||||
{/* 原始图片预览 */}
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<h4 class="text-sm font-semibold mb-2 text-gray-700">原始图片</h4>
|
||||
<div class="relative border rounded-lg overflow-hidden bg-gray-50">
|
||||
<img
|
||||
src={resolvedSrc}
|
||||
alt="Token source"
|
||||
class="max-w-full h-auto max-h-[300px] object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3D 模型预览 */}
|
||||
<Show when={modelUrl()}>
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<h4 class="text-sm font-semibold mb-2 text-gray-700">
|
||||
3D 模型预览
|
||||
</h4>
|
||||
<MdTokenViewer url={modelUrl()}/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* 错误信息 */}
|
||||
<Show when={error()}>
|
||||
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded">
|
||||
⚠️ {error()}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 控制面板 */}
|
||||
<div class="border rounded-lg p-4 bg-white shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-800">
|
||||
🎯 Token 设置
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setShowEditor(!showEditor())}
|
||||
class="text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
{showEditor() ? "隐藏设置" : "显示设置"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Show when={showEditor()}>
|
||||
<div class="space-y-4">
|
||||
{/* 整体尺寸设置 */}
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="text-sm font-medium text-gray-700 min-w-[100px]">
|
||||
模型尺寸 (mm)
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="10"
|
||||
max="100"
|
||||
step="1"
|
||||
value={props.size || 50}
|
||||
class="flex-1"
|
||||
onChange={(e) => {
|
||||
const newSize = parseInt(e.target.value);
|
||||
element?.setAttribute("size", newSize.toString());
|
||||
}}
|
||||
/>
|
||||
<span class="text-sm text-gray-600 w-12 text-right">
|
||||
{props.size || 50}mm
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 图层列表 */}
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-gray-700 mb-2">
|
||||
图层设置
|
||||
</h4>
|
||||
<div class="space-y-2 max-h-[300px] overflow-y-auto">
|
||||
<For each={layers()}>
|
||||
{(layer) => (
|
||||
<div class="flex items-center gap-3 p-2 border rounded hover:bg-gray-50">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={layer.enabled}
|
||||
onChange={() => toggleLayer(layer.id)}
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
<div
|
||||
class="w-4 h-4 rounded"
|
||||
style={{ "background-color": layer.color }}
|
||||
/>
|
||||
<span class="flex-1 text-sm text-gray-700">
|
||||
{layer.name}
|
||||
</span>
|
||||
<label class="text-xs text-gray-500">厚度:</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0.5"
|
||||
max="10"
|
||||
step="0.5"
|
||||
value={layer.thickness}
|
||||
class="w-16 px-2 py-1 border rounded text-sm"
|
||||
onChange={(e) =>
|
||||
updateLayerThickness(
|
||||
layer.id,
|
||||
parseFloat(e.target.value) || 2
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span class="text-xs text-gray-500">mm</span>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 生成按钮 */}
|
||||
<div class="flex gap-2 pt-2">
|
||||
<button
|
||||
onClick={generateModel}
|
||||
disabled={isGenerating()}
|
||||
class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white px-4 py-2 rounded font-medium transition-colors"
|
||||
>
|
||||
{isGenerating() ? "生成中..." : "🔄 生成 3D 模型"}
|
||||
</button>
|
||||
<Show when={modelUrl()}>
|
||||
<button
|
||||
onClick={downloadModel}
|
||||
class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded font-medium transition-colors"
|
||||
>
|
||||
📥 下载 3MF
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 加载状态 */}
|
||||
<Show when={image.loading}>
|
||||
<div class="text-center py-8 text-gray-500">
|
||||
<div class="animate-spin inline-block w-6 h-6 border-2 border-current border-t-transparent rounded-full mr-2" />
|
||||
加载图片中...
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
tag: md-token-viewer
|
||||
icon: 🎨
|
||||
title: 代币预览组件
|
||||
description: 使用 Three.js 在浏览器中 3D 渲染 3MF 格式的代币模型，支持旋转查看。
|
||||
syntax: ':md-token-viewer[./token.3mf]'
|
||||
props: []
|
||||
---
|
||||
|
||||
**3D 预览模型：**
|
||||
:md-token-viewer[./dragon.3mf]
|
||||
|
||||
支持鼠标拖拽旋转和自动旋转，从多角度查看模型细节。
|
||||
|
||||
## 使用场景
|
||||
|
||||
用于 3D 打印前的代币模型预览。
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
tag: md-token
|
||||
icon: 🪙
|
||||
title: 代币组件
|
||||
description: 展示游戏代币或棋子的图片。
|
||||
syntax: ':md-token[./token.png]'
|
||||
props: []
|
||||
---
|
||||
|
||||
**展示代币：**
|
||||
:md-token[./goblin.png]
|
||||
|
||||
代币图片自动渲染为圆形，适合战棋或卡牌中的棋子展示。
|
||||
|
||||
## 使用场景
|
||||
|
||||
用于展示怪物代币、角色棋子、道具图标等。
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TTRPG Tools</title>
|
||||
<title>Tabletop Tools</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue