# 3dshow

**Repository Path**: iotsink/3dshow

## Basic Information

- **Project Name**: 3dshow
- **Description**: 一款基于 **Three.js** 构建的在线 3D 模型浏览器，支持多种主流格式的模型加载与实时渲染展示。
- **多格式支持** — GLB · GLTF · OBJ · FBX · STL · DAE
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 3D 模型展示器

> **Powered by [iotsink.com](https://iotsink.com)**

一款基于 **Three.js** 构建的在线 3D 模型浏览器，支持多种主流格式的模型加载与实时渲染展示。


![](images/预览.gif)

---

## ✨ 功能特性

- **多格式支持** — GLB · GLTF · OBJ · FBX · STL · DAE
- **拖放加载** — 将模型文件拖入画布或点击上传区域即可加载
- **动画播放** — 自动检测并播放 GLB/GLTF/FBX 内嵌骨骼动画
- **Draco 解压** — 支持 Draco 压缩的 GLTF 模型
- **示例模型** — 内置立方体、球体、圆环、结状体快速预览
- **模型统计** — 实时显示顶点数、面数、网格数、材质数、尺寸
- **4 种视角** — 透视 / 前视图 / 顶视图 / 侧视图
- **显示控制** — 线框模式、自动旋转、网格地板、环境光照
- **参数调节** — 旋转速度、曝光度、背景颜色（5 种预设 + 自定义）
- **截图导出** — 一键保存当前渲染画面为 PNG
- **实时 FPS** — 右上角帧率计数器

---

## 🚀 快速开始

### 方式一：使用 Python 内置服务器（推荐）

```bash
# Python 3
python -m http.server 8765
```

然后打开浏览器访问：[http://localhost:8765](http://localhost:8765)

### 方式二：使用 VS Code Live Server 插件

安装 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 插件，右键 `index.html` → **Open with Live Server**。

### 方式三：使用 Node.js serve

```bash
npx serve .
```

> ⚠️ 由于使用了 ES Module，**不支持**直接双击 `index.html` 打开，需通过本地 HTTP 服务器访问。

---

## 📁 项目结构

```
3D模型展示/
├── index.html   # 页面结构与 UI 布局
├── style.css    # 深色主题现代化样式
├── main.js      # Three.js 渲染核心逻辑
└── README.md    # 项目说明文档
```

---

## 🎮 操作说明

| 操作 | 功能 |
|------|------|
| 左键拖动 | 旋转视角 |
| 右键拖动 | 平移画面 |
| 滚轮 | 缩放 |
| 双击画布 | 重置视角 |
| 拖放文件 | 加载模型 |

---

## 🛠 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| [Three.js](https://threejs.org) | r160 | 3D 渲染引擎 |
| GLTFLoader | — | 加载 GLB / GLTF |
| OBJLoader | — | 加载 OBJ |
| FBXLoader | — | 加载 FBX |
| STLLoader | — | 加载 STL |
| ColladaLoader | — | 加载 DAE |
| DRACOLoader | — | Draco 网格解压 |
| OrbitControls | — | 轨道相机控制 |

所有依赖均通过 **CDN（jsDelivr）** 加载，无需安装 npm 包。

---

## 📄 License

MIT © [iotsink.com](https://iotsink.com)