# 硬件认知工坊

**Repository Path**: dujun_h5/hardware-cognitive-workshop

## Basic Information

- **Project Name**: 硬件认知工坊
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-30
- **Last Updated**: 2026-06-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 硬件认知工坊 · 3D 整机组装

基于 Three.js 的电脑硬件认知交互式 3D 网页应用。通过拖拽组装真实 3D 硬件模型，学习台式机各部件的认知与安装位置。

## 功能特性

- **3D 工作台场景**：升降桌（坐/立切换）、工学椅、板凳、显示器、海景房玻璃机箱
- **真实硬件模型**：CPU、主板、显卡（RTX 4060/4070/5060/5070）、内存、硬盘、电源、散热、音响，每种含多种型号
- **拖拽安装交互**：点击右侧型号 → 拖入机箱对应槽位 → 落槽高亮 + 咔哒音效
- **机箱内部视角**：可深入机箱内部，贴近主板安装内存 / 显卡
- **360° 环绕查看**：OrbitControls 支持旋转、缩放、平移
- **Bloom 后处理**：霓虹辉光效果，立体感拉满

## 技术栈

- Three.js 0.160（ES Modules + importmap）
- UnrealBloomPass 后处理
- Web Audio API 合成音效（无需外部音频文件）
- 纯静态前端，无需后端

## 本地运行

```bash
# 方式一：Python
python3 -m http.server 8000

# 方式二：Node
npx serve
```

浏览器打开 `http://localhost:8000`

> 需要支持 WebGL 的桌面浏览器（Chrome / Edge / Firefox）

## 项目结构

```
pc-builder/
├── index.html          # 页面入口 + importmap
├── css/
│   └── style.css       # 深色霓虹玻璃拟态 UI
└── js/
    ├── scene-setup.js   # 场景 / 相机 / 灯光 / Bloom 后处理
    ├── workspace.js     # 桌椅 / 海景房机箱 / 安装槽位
    ├── hardware.js      # 硬件目录 + 参数化 3D 模型工厂
    ├── interaction.js   # 拖拽 / 吸附 / 音效 / 相机飞行
    └── main.js          # 入口编排
```