https://github.com/wx-chevalier/ts-3d-model-viewer
整合了 google-model-viewer/WebGL/Three.js/WASM 等一系列 3D 模型（STL/OBJ/GLTF/PLY/STEP/X_T）预览工具，便捷地进行模型预览、生成截图、计算拓扑信息。支持 Blender 进行模型压缩优化，提供了基于 Web 的简单 CAD 在线排版操作。
https://github.com/wx-chevalier/ts-3d-model-viewer
gltf micro-components model-viewer stl-viewer wx-code wx-fe wx-fe-kits
Last synced: 12 months ago
JSON representation
整合了 google-model-viewer/WebGL/Three.js/WASM 等一系列 3D 模型（STL/OBJ/GLTF/PLY/STEP/X_T）预览工具，便捷地进行模型预览、生成截图、计算拓扑信息。支持 Blender 进行模型压缩优化，提供了基于 Web 的简单 CAD 在线排版操作。
- Host: GitHub
- URL: https://github.com/wx-chevalier/ts-3d-model-viewer
- Owner: wx-chevalier
- Created: 2020-03-10T09:02:43.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-07T02:31:49.000Z (over 3 years ago)
- Last Synced: 2025-06-14T23:03:00.766Z (about 1 year ago)
- Topics: gltf, micro-components, model-viewer, stl-viewer, wx-code, wx-fe, wx-fe-kits
- Language: JavaScript
- Homepage: https://ng-tech.icu/
- Size: 125 MB
- Stars: 209
- Watchers: 8
- Forks: 44
- Open Issues: 62
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
@m-fe/react-model-viewer
STL 3D 预览
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
# Introduction
整合了 `google-model-viewer` 等一系列 3D 模型预览工具，便捷地进行模型预览、生成截图、计算拓扑信息。
> 模板来自于 [m-fe-libs](https://github.com/wx-chevalier/m-fe-libs)。
# Getting Started
To get a local copy up and running follow these simple steps.
## Installation
Install NPM packages
```sh
npm install @m-fe/react-model-viewer
# or
yarn add @m-fe/react-model-viewer
```
## Usage
### GoogleModelViewer
Add the ``
```web
```
```ts
import * as React from "react";
import { GoogleModelViewer } from "@m-fe/react-model-viewer";
export default function Simple() {
return (
{
console.log(m);
}}
/>
);
}
```
### WebGLViewer
```js
{
// console.log(m);
}}
onZip={(b) => {
// 执行解压缩
const modelArray: Uint8Array = pako.inflate(new Uint8Array(b));
console.log(modelArray);
}}
onError={(err) => {
console.log(err);
}}
/>
```
### WasmViewer
# About
## Roadmap
See the [open issues](https://github.com/wx-chevalier/3d-model-viewer/issues) for a list of proposed features (and known issues).
- [ ] https://github.com/josdirksen/threejs-cookbook/blob/master/06-particles-postprocessing/06.06-explode-geometry-model.html 添加爆炸模式
- [ ] 支持多个模型组同时加载，支持 OBJ/3MF 等原色渲染
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Acknowledgements
- [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-编程/算法/软件架构/人工智能等领域的文章/书籍/资料/项目链接精选。
- [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: 优秀计算机科学与技术领域相关的书籍归档。
- [UZIP.js #Project#](https://github.com/photopea/UZIP.js): Simple ZIPping library for Javascript.
### Viewer
- [webgl-3d-viewer #Project#](http://piscis.github.io/webgl-3d-viewer/example/)
- 参考设计：[Sketchfab](https://sketchfab.com/3d-models/lost-heritage-f8d4561b75c64769b4c88a3478b5a184)
- [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.
- [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.
- [f3d #Project#](https://github.com/f3d-app/f3d): A fast and minimalist 3D viewer.
- [mayo #Project#](https://github.com/fougue/mayo): 3D CAD viewer and converter based on Qt + OpenCascade
- [Online3DViewer #Project#](https://github.com/kovacsv/Online3DViewer): A free and open source web solution to visualize and explore 3D models right in your browser.
### Optimizer
- [meshoptimizer #Project#](https://github.com/zeux/meshoptimizer): Mesh optimization library that makes meshes smaller and faster to render
### Studio
- [jsketcher #Project#](https://github.com/xibyte/jsketcher): JS.Sketcher is a parametric 2D and 3D CAD modeler written in pure javascript.
- [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.
- [meshy #Project#](https://github.com/0x00019913/meshy): Slicing, measurements, transformations, and visualizations on polygon meshes.
- [CascadeStudio #Project#](https://github.com/zalo/CascadeStudio): A Full Live-Scripted CAD Kernel and IDE in the Browser.
- [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.
## Copyright & More | 延伸阅读
笔者所有文章遵循[知识共享 署名 - 非商业性使用 - 禁止演绎 4.0 国际许可协议](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh)，欢迎转载，尊重版权。您还可以前往 [NGTE Books](https://ng-tech.icu/books/) 主页浏览包含知识体系、编程语言、软件工程、模式与架构、Web 与大前端、服务端开发实践与工程架构、分布式基础架构、人工智能与深度学习、产品运营与创业等多类目的书籍列表：
[](https://ng-tech.icu/books/)
[contributors-shield]: https://img.shields.io/github/contributors/wx-chevalier/3d-model-viewer.svg?style=flat-square
[contributors-url]: https://github.com/wx-chevalier/3d-model-viewer/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/wx-chevalier/3d-model-viewer.svg?style=flat-square
[forks-url]: https://github.com/wx-chevalier/3d-model-viewer/network/members
[stars-shield]: https://img.shields.io/github/stars/wx-chevalier/3d-model-viewer.svg?style=flat-square
[stars-url]: https://github.com/wx-chevalier/3d-model-viewer/stargazers
[issues-shield]: https://img.shields.io/github/issues/wx-chevalier/3d-model-viewer.svg?style=flat-square
[issues-url]: https://github.com/wx-chevalier/3d-model-viewer/issues
[license-shield]: https://img.shields.io/github/license/wx-chevalier/3d-model-viewer.svg?style=flat-square
[license-url]: https://github.com/wx-chevalier/3d-model-viewer/blob/master/LICENSE.txt