# Web3DModel

**Repository Path**: blackvon/web3-dmodel

## Basic Information

- **Project Name**: Web3DModel
- **Description**: 基于Three.js的Web版本模型查看器
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-12
- **Last Updated**: 2026-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# STL 3D Model Viewer

一个基于 Three.js 的 3D 模型查看器，支持加载 GLB 格式的 3D 模型文件。

![3D Model Viewer](3d-model-viewer.png)

## 功能特性

- 支持加载 GLB 格式的 3D 模型
- 轨道控制器：鼠标拖拽旋转、滚轮缩放、右键平移
- 模型信息显示：包围盒尺寸、网格数量等
- Mesh 列表面板：显示每个 Mesh 的名称
- Mesh 独立控制：可单独显示/隐藏各 Mesh
- Mesh 颜色控制：可为每个 Mesh 单独设置颜色
- 重置视角功能

## 技术栈

- Three.js 0.160.0
- ES6 Module
- 原生 JavaScript

## 目录结构

```
Web/
├── index.html          # 主页面
├── main.js             # 主逻辑
├── package.json        # 项目配置
└── lib/                # 本地化的 Three.js 库文件
    ├── three.module.js
    ├── controls/
    │   └── OrbitControls.js
    ├── loaders/
    │   └── GLTFLoader.js
    └── utils/
        └── BufferGeometryUtils.js
```

## 运行方法

### 方式一：使用 npm（推荐）

```bash
cd Web
npm install
npm run dev
```

### 方式二：使用 npx

```bash
cd Web
npx serve .
```

### 方式三：指定端口

```bash
cd Web
npm install
npm start
```

或使用 npx 指定端口：

```bash
cd Web
npx serve . -l 3000
```

然后在浏览器中打开 `http://localhost:3000`

## 使用说明

1. 打开页面后，点击左上角的 "选择文件" 按钮
2. 选择一个 .glb 格式的 3D 模型文件
3. 等待加载完成，即可在 3D 视图中查看模型

### 鼠标操作

- **左键拖拽**：旋转模型视角
- **滚轮**：缩放模型大小
- **右键拖拽**：平移模型位置

### Mesh 控制

- 右侧面板显示所有 Mesh 的列表
- 点击复选框可以显示/隐藏对应的 Mesh
- 点击颜色选择器可以更改 Mesh 的颜色