{"id":28756717,"url":"https://github.com/wx-chevalier/ts-3d-model-viewer","last_synced_at":"2025-06-17T03:08:42.267Z","repository":{"id":37105999,"uuid":"246253283","full_name":"wx-chevalier/ts-3d-model-viewer","owner":"wx-chevalier","description":"整合了 google-model-viewer/WebGL/Three.js/WASM 等一系列 3D 模型（STL/OBJ/GLTF/PLY/STEP/X_T）预览工具，便捷地进行模型预览、生成截图、计算拓扑信息。支持 Blender 进行模型压缩优化，提供了基于 Web 的简单 CAD 在线排版操作。","archived":false,"fork":false,"pushed_at":"2023-03-07T02:31:49.000Z","size":131361,"stargazers_count":209,"open_issues_count":62,"forks_count":44,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-06-14T23:03:00.766Z","etag":null,"topics":["gltf","micro-components","model-viewer","stl-viewer","wx-code","wx-fe","wx-fe-kits"],"latest_commit_sha":null,"homepage":"https://ng-tech.icu/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wx-chevalier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-10T09:02:43.000Z","updated_at":"2025-06-08T09:02:45.000Z","dependencies_parsed_at":"2024-10-04T15:43:15.630Z","dependency_job_id":null,"html_url":"https://github.com/wx-chevalier/ts-3d-model-viewer","commit_stats":null,"previous_names":["wx-chevalier/3d-model-viewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wx-chevalier/ts-3d-model-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Fts-3d-model-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Fts-3d-model-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Fts-3d-model-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Fts-3d-model-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wx-chevalier","download_url":"https://codeload.github.com/wx-chevalier/ts-3d-model-viewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2Fts-3d-model-viewer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260281527,"owners_count":22985630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gltf","micro-components","model-viewer","stl-viewer","wx-code","wx-fe","wx-fe-kits"],"created_at":"2025-06-17T03:08:41.634Z","updated_at":"2025-06-17T03:08:42.213Z","avatar_url":"https://github.com/wx-chevalier.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/wx-chevalier/3d-model-viewer\"\u003e\n    \u003cimg src=\"https://s2.ax1x.com/2020/03/10/8iEuqO.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003e@m-fe/react-model-viewer\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    STL 3D 预览\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/wx-chevalier/3d-model-viewer\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/wx-chevalier/3d-model-viewer\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/wx-chevalier/3d-model-viewer/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/wx-chevalier/3d-model-viewer/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n# Introduction\n\n整合了 `google-model-viewer` 等一系列 3D 模型预览工具，便捷地进行模型预览、生成截图、计算拓扑信息。\n\n\u003e 模板来自于 [m-fe-libs](https://github.com/wx-chevalier/m-fe-libs)。\n\n![WebGLViewer 截图](https://s1.ax1x.com/2020/10/23/BEAXzF.md.png)\n\n# Getting Started\n\nTo get a local copy up and running follow these simple steps.\n\n## Installation\n\nInstall NPM packages\n\n```sh\nnpm install @m-fe/react-model-viewer\n# or\nyarn add @m-fe/react-model-viewer\n```\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\n## Usage\n\n### GoogleModelViewer\n\nAdd the `\u003cmodel-viewer\u003e`\n\n```web\n\u003cscript type=\"module\" src=\"https://unpkg.com/@google/model-viewer/dist/model-viewer.js\"\u003e\u003c/script\u003e\n\u003cscript nomodule src=\"https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js\"\u003e\u003c/script\u003e\n```\n\n```ts\nimport * as React from \"react\";\n\nimport { GoogleModelViewer } from \"@m-fe/react-model-viewer\";\n\nexport default function Simple() {\n  return (\n    \u003cdiv\u003e\n      \u003cGoogleModelViewer\n        key=\"1\"\n        type=\"gltf\"\n        src=\"https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.glb?1542147958948\"\n      /\u003e\n      \u003cGoogleModelViewer\n        key=\"2\"\n        type=\"stl\"\n        src=\"https://ufc-assets.oss-cn-shanghai.aliyuncs.com/test/pr2_head_pan.stl\"\n        onTopology={(m) =\u003e {\n          console.log(m);\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### WebGLViewer\n\n```js\n\u003cWebGLViewer\n  key=\"33\"\n  type=\"stl\"\n  src=\"/error.stl\"\n  width={600}\n  height={400}\n  onTopology={(m) =\u003e {\n    // console.log(m);\n  }}\n  onZip={(b) =\u003e {\n    // 执行解压缩\n    const modelArray: Uint8Array = pako.inflate(new Uint8Array(b));\n    console.log(modelArray);\n  }}\n  onError={(err) =\u003e {\n    console.log(err);\n  }}\n/\u003e\n```\n\n### WasmViewer\n\n# About\n\n\u003c!-- ROADMAP --\u003e\n\n## Roadmap\n\nSee the [open issues](https://github.com/wx-chevalier/3d-model-viewer/issues) for a list of proposed features (and known issues).\n\n- [ ] https://github.com/josdirksen/threejs-cookbook/blob/master/06-particles-postprocessing/06.06-explode-geometry-model.html 添加爆炸模式\n\n- [ ] 支持多个模型组同时加载，支持 OBJ/3MF 等原色渲染\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003c!-- LICENSE --\u003e\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## Acknowledgements\n\n- [Awesome-Lists](https://github.com/wx-chevalier/Awesome-Lists): 📚 Guide to Galaxy, curated, worthy and up-to-date links/reading list for ITCS-Coding/Algorithm/SoftwareArchitecture/AI. 💫 ITCS-编程/算法/软件架构/人工智能等领域的文章/书籍/资料/项目链接精选。\n\n- [Awesome-CS-Books](https://github.com/wx-chevalier/Awesome-CS-Books): :books: Awesome CS Books/Series(.pdf by git lfs) Warehouse for Geeks, ProgrammingLanguage, SoftwareEngineering, Web, AI, ServerSideApplication, Infrastructure, FE etc. :dizzy: 优秀计算机科学与技术领域相关的书籍归档。\n\n- [UZIP.js #Project#](https://github.com/photopea/UZIP.js): Simple ZIPping library for Javascript.\n\n### Viewer\n\n- [webgl-3d-viewer #Project#](http://piscis.github.io/webgl-3d-viewer/example/)\n\n- 参考设计：[Sketchfab](https://sketchfab.com/3d-models/lost-heritage-f8d4561b75c64769b4c88a3478b5a184)\n\n- [xeogl #Project#](https://github.com/xeolabs/xeogl): xeogl is a data-driven WebGL-based engine created by xeolabs for 3D visualization in the browser without using plugins.\n\n- [Foxtrot #Project#](https://github.com/Formlabs/foxtrot): Foxtrot is a fast viewer for STEP files, a standard interchange format for mechanical CAD. It is an experimental project built from the ground up, including new libraries for parsing and triangulation.\n\n- [f3d #Project#](https://github.com/f3d-app/f3d): A fast and minimalist 3D viewer.\n\n- [mayo #Project#](https://github.com/fougue/mayo): 3D CAD viewer and converter based on Qt + OpenCascade\n\n- [Online3DViewer #Project#](https://github.com/kovacsv/Online3DViewer): A free and open source web solution to visualize and explore 3D models right in your browser.\n\n### Optimizer\n\n- [meshoptimizer #Project#](https://github.com/zeux/meshoptimizer): Mesh optimization library that makes meshes smaller and faster to render\n\n### Studio\n\n- [jsketcher #Project#](https://github.com/xibyte/jsketcher): JS.Sketcher is a parametric 2D and 3D CAD modeler written in pure javascript.\n\n- [JSCAD #Project#](https://openjscad.org/dokuwiki/doku.php?id=start): JSCAD (formally know as OpenJSCAD) provides a programmer’s approach to develop 3D models. In particular, this functionality is tuned towards creating precise models for 3D printing.\n\n- [meshy #Project#](https://github.com/0x00019913/meshy): Slicing, measurements, transformations, and visualizations on polygon meshes.\n\n- [CascadeStudio #Project#](https://github.com/zalo/CascadeStudio): A Full Live-Scripted CAD Kernel and IDE in the Browser.\n\n- [Plasticity #Project#](https://github.com/nkallen/plasticity): Plasticity is a 3d modelling software for concept artists. Modelling in Plasticity is quick and efficient due to the unique gizmos, shortcuts, and thoughtful workflow.\n\n## Copyright \u0026 More | 延伸阅读\n\n笔者所有文章遵循[知识共享 署名 - 非商业性使用 - 禁止演绎 4.0 国际许可协议](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh)，欢迎转载，尊重版权。您还可以前往 [NGTE Books](https://ng-tech.icu/books/) 主页浏览包含知识体系、编程语言、软件工程、模式与架构、Web 与大前端、服务端开发实践与工程架构、分布式基础架构、人工智能与深度学习、产品运营与创业等多类目的书籍列表：\n\n[![NGTE Books](https://s2.ax1x.com/2020/01/18/19uXtI.png)](https://ng-tech.icu/books/)\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[contributors-shield]: https://img.shields.io/github/contributors/wx-chevalier/3d-model-viewer.svg?style=flat-square\n[contributors-url]: https://github.com/wx-chevalier/3d-model-viewer/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/wx-chevalier/3d-model-viewer.svg?style=flat-square\n[forks-url]: https://github.com/wx-chevalier/3d-model-viewer/network/members\n[stars-shield]: https://img.shields.io/github/stars/wx-chevalier/3d-model-viewer.svg?style=flat-square\n[stars-url]: https://github.com/wx-chevalier/3d-model-viewer/stargazers\n[issues-shield]: https://img.shields.io/github/issues/wx-chevalier/3d-model-viewer.svg?style=flat-square\n[issues-url]: https://github.com/wx-chevalier/3d-model-viewer/issues\n[license-shield]: https://img.shields.io/github/license/wx-chevalier/3d-model-viewer.svg?style=flat-square\n[license-url]: https://github.com/wx-chevalier/3d-model-viewer/blob/master/LICENSE.txt\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-chevalier%2Fts-3d-model-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwx-chevalier%2Fts-3d-model-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-chevalier%2Fts-3d-model-viewer/lists"}