Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hawkezhk/three-model-system
基于 THREE.JS 的在线 3D 建模系统
https://github.com/hawkezhk/three-model-system
ant-design cssmodules react threejs typescript webpack4
Last synced: about 13 hours ago
JSON representation
基于 THREE.JS 的在线 3D 建模系统
- Host: GitHub
- URL: https://github.com/hawkezhk/three-model-system
- Owner: HAWKEZHK
- License: mit
- Created: 2019-03-11T14:43:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T00:34:10.000Z (almost 2 years ago)
- Last Synced: 2024-09-21T03:03:54.388Z (4 days ago)
- Topics: ant-design, cssmodules, react, threejs, typescript, webpack4
- Language: TypeScript
- Homepage:
- Size: 20.1 MB
- Stars: 21
- Watchers: 0
- Forks: 5
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# three-model-system
> 基于 THREE.JS 的 3D 建模系统（毕设项目）
### 预览 ###
[点击访问](https://hawkezhk.github.io/three-model-system/)
### 技术栈 ###
React + TypeScript + Css-Module + Ant-Design + Three.js
### 目录结构 ###
```
three-model-system/
│
│── src/ * 源文件
│ |
| |—— common/ * 公共文件
| | |
| | |—— constants/ * 常数
| | |
| | |—— helper/ * 工具方法
| | |
| | |—— models/ * 模型
| |
| |—— components/ * 组件
| | |
| | |—— home/ * 工作区
| | |
| | |—— operation/ * 模型控制区
| | |
| | |—— three-drawer/ * 外部模型库
│ |
| |—— entry/ * 入口文件
│ |
| |—— static/ * 静态文件
| | |
| | |—— 3D-files/ * 3D文件
| | |
| | |—— images/ * 图片
| | |
| | |—— template/ * 模板
│
│── webpack/
│ |
| |—— webpack.common.js * 公共配置
│ |
| |—— webpack.dev.js * 开发环境配置
│ |
| |—— webpack.prod.js * 生产环境配置
```
### 如何启动 ###
Step 1
```
yarn install
```
Step 2
```
yarn start
```
Step 3
```
打开 http://localhost:3000/ 进行预览
```
### 关键功能说明 ###
这里列一下鼠标操作几何体的事件及效果 ~
| 操作 | 效果 |
| :--------: | :-----: |
| 单击左键 | 几何体位置固定 |
| 在场景中移动 | 几何体随鼠标移动 |
| 单击右键 | 移除预览几何体 |
| 双击实体 | 转换为预览几何实体 |
### BTW ###
> 这是毕设做的小项目，受到在公司一个大佬的启发而选的这个题目，正好也让我学习了一下 three.js。由于时间和精力问题没有将这个项目做到太完美，有几个可以优化的地方在这稍微列一下 ~（基本上是因为没有精力去写后台导致的 hh）
+ 可以增加一个账号体系
+ 项目中的“外部模型导入”功能就可以做成直接上传本地文件的形式，带进度条之类的。（目前这个功能在生产环境体验会比较差，因为要下载比较大的文件，代码 clone 下来在开发环境体验会好一些~）
+ 缓存功能可以将数据存在后台，配合账号体系保存草稿。现在为了简单是直接缓存在 localstorage 中
+ 还有一些建模功能上的优化比如扫描、镜像还有爆炸图这些，有兴趣的可以探索探索，这些功能比较复杂但应该是可以实现的