# 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

A 3D model viewer based on Three.js that supports loading GLB format 3D model files.

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

## Features

- Support loading GLB format 3D models
- Orbit controls: drag to rotate, scroll to zoom, right-click to pan
- Model information display: bounding box size, mesh count, etc.
- Mesh list panel: displays each Mesh's name
- Individual Mesh control: show/hide each Mesh independently
- Mesh color control: set color for each Mesh individually
- Reset view functionality

## Tech Stack

- Three.js 0.160.0
- ES6 Module
- Vanilla JavaScript

## Project Structure

```
Web/
├── index.html          # Main HTML page
├── main.js             # Main application logic
├── package.json        # Project configuration
└── lib/                # Localized Three.js library files
    ├── three.module.js
    ├── controls/
    │   └── OrbitControls.js
    ├── loaders/
    │   └── GLTFLoader.js
    └── utils/
        └── BufferGeometryUtils.js
```

## How to Run

### Method 1: Using npm (Recommended)

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

### Method 2: Using npx

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

### Method 3: Specify Port

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

Or use npx with port:

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

Then open `http://localhost:3000` in your browser.

## Usage

1. Open the page and click the "Select File" button in the upper left corner
2. Choose a .glb format 3D model file
3. Wait for loading to complete, then view the model in the 3D viewport

### Mouse Controls

- **Left-click drag**: Rotate model view
- **Scroll wheel**: Zoom in/out
- **Right-click drag**: Pan model position

### Mesh Control

- The right panel shows a list of all Meshes
- Click the checkbox to show/hide the corresponding Mesh
- Click the color picker to change the Mesh's color