# three.js-skill

**Repository Path**: skill-cases/three.js-skill

## Basic Information

- **Project Name**: three.js-skill
- **Description**: three.js skill demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: 001-3d-mall-scene
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🛒 3D 商场场景 (3D Mall Scene)

[English](./README.md) | 中文

## 项目简介

这是一个使用 Vue 3 + Three.js 构建的 3D 商场场景模拟器。用户可以第一人称视角在商场内自由漫游，并进入各个商铺参观。

## 特性

- 🏬 **单层商场** - 包含 6 个风格各异的商铺
- 🚶 **第一人称漫游** - WASD/方向键移动，鼠标控制视角
- 🏪 **商铺探索** - 按 E 进入/退出商铺
- ✨ **精美装修** - 每个商铺都有独特的内部陈设
- 🔆 **照明系统** - 明亮舒适的购物氛围
- 🎮 **流畅体验** - 目标 60FPS，最低 50FPS

## 商铺列表

| 编号 | 名称 | 特色陈设 |
|------|------|----------|
| 1号 | 服装店 | 服装货架、中岛展示台、试衣间 |
| 2号 | 餐饮店 | 餐桌椅、餐台、菜单牌 |
| 3号 | 电子产品店 | 产品展柜、电视墙、收银台 |
| 4号 | 化妆品店 | 玻璃柜、化妆品瓶、美容椅 |
| 5号 | 书店 | 书架、书籍、阅读区 |
| 6号 | 配饰店 | 珠宝柜、首饰展示、镜子 |

## 技术栈

- **Vue 3** - 组件化 UI 框架
- **TypeScript** - 类型安全
- **Vite** - 快速构建工具
- **Three.js** - 3D 渲染引擎
- **@tresjs/core** - Vue + Three.js 集成

## 使用的 Skills

| Skill | 用途 |
|-------|------|
| threejs-fundamentals | Three.js 场景基础 |
| threejs-geometry | 几何体创建 |
| threejs-materials | 材质使用 (MeshStandardMaterial) |
| threejs-interaction | 第一人称控制、交互 |
| threejs-animation | 过渡动画 |
| vue-best-practices | Vue 3 最佳实践 |

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

## 操作说明

| 按键 | 功能 |
|------|------|
| W / ↑ | 前进 |
| S / ↓ | 后退 |
| A / ← | 左移 |
| D / → | 右移 |
| 鼠标移动 | 旋转视角 |
| E | 进入/退出商铺 |
| ESC | 退出商铺（备用） |
| 点击画面 | 启用鼠标锁定 |

## 项目结构

```
src/
├── components/
│   ├── MallScene.vue       # 3D 商场主场景
│   └── ui/
│       └── InteractionHint.vue  # 交互提示组件
├── composables/
│   ├── useThreeScene.ts   # Three.js 场景管理
│   ├── usePlayer.ts       # 玩家状态控制
│   ├── useShopDetection.ts # 商铺检测
│   └── useShopTransition.ts # 过渡动画
└── types/
    └── index.ts           # TypeScript 类型定义
```

## 性能目标

- 目标帧率：60 FPS
- 最低帧率：50 FPS
- 使用 BufferGeometry 优化
- 视锥剔除默认启用

## License

MIT