# vue3-vite-threejs177-web

**Repository Path**: lianggl_hai/vue3-vite-threejs177-web

## Basic Information

- **Project Name**: vue3-vite-threejs177-web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-27
- **Last Updated**: 2025-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite
## node版本
 nodejs > 20
## 安装依赖
npm install

## 项目启动：
npm run dev

## 本项目基于Vue3和Three.js实现了以下核心功能：：
### 1. 3D场景基础架构
- 在 `homeView.vue` 中构建了完整的Three.js场景，包括场景初始化、透视相机配置和WebGL渲染器设置
- 实现了相机轨道控制（OrbitControls），支持旋转、缩放和平移交互
- 添加环境光和方向光照明系统，并启用阴影效果提升视觉质量
- 响应式窗口大小调整，确保场景正确显示
### 2. 模型加载与状态管理
- 通过GLTFLoader加载3D模型（GuoTang.glb），并实现加载状态管理
- 使用Element Plus的v-loading指令提供加载中视觉反馈
- 模型加载错误处理和资源清理机制
### 3. 相机参数控制
- 定点镜头功能 ：支持设置和存储多个定点相机参数（位置和方向）
- 巡航镜头功能 ：
  - 在 `sceneData.js` 中定义巡航参数数组
  - 支持添加带停顿时间（默认5秒）和间隔时间（默认5秒）的巡航点
  - 通过GSAP实现相机在巡航点之间的平滑过渡动画
### 4. 交互控制
- 相机参数获取与设置按钮
- 多视角快速切换功能
- 巡航启动控制及巡航过程中的用户交互锁定
### 5. 代码质量与可维护性
- 关键功能代码添加详细注释
- 实现场景资源清理机制，避免内存泄漏
- 响应式状态管理与组件化设计