# ThreeJs-Demo **Repository Path**: forest_dqc/three-js-demo ## Basic Information - **Project Name**: ThreeJs-Demo - **Description**: self - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-06-12 - **Last Updated**: 2026-10-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Three.js 科技感 3D 场景演示系统 基于 Vue 3 + Vite + Three.js 构建的交互式 3D 场景应用，专为工业冷却循环系统可视化设计，支持模型加载、科技感材质、光源控制及实时变换。 --- ## 📋 项目概述 本项目是基于 **Vue 3 + Vite + Three.js** 构建的工业级 3D 可视化平台，专为工业冷却循环系统设计。系统展示冷水机组、制热机组、水泵、冷却塔等设备的科技感可视化效果，具备完整的模型管理、交互控制和视觉效果处理能力。 ### 🌟 项目亮点 - **科技感视觉效果**：边缘发光、半透明材质、流光动画、温度雾效等多种视觉效果 - **完整的模型管理**：支持内置模型、预设模型和外部导入模型三种来源 - **丰富的交互控制**：视角操作、模型选中、变换调整、实时数据监控 - **响应式布局设计**：支持桌面端和移动端的自适应显示 - **高性能渲染**：优化的材质管理、场景遍历和后处理效果 --- ## ✨ 主要功能 ### 🔧 模型管理 - **内置模型**：冷水机组、制热机组、水泵×2、冷却塔等工业设备 - **预设模型**：支持复选框加载/卸载，自定义缩放倍数 - **外部导入**：支持 GLTF/GLB/FBX/OBJ 格式，自动居中缩放 ### 🎯 交互控制 - **视角控制**：OrbitControls 始终启用，支持旋转、平移、缩放 - **模型选中**：支持左侧面板选择和场景点击选中 - **子模型控制**：选中任意子模型或光源，均可独立变换和配置 - **变换控制**：精确调整位置、旋转、缩放参数 ### 🎨 科技感风格 - **边缘发光**：蓝色发光线条，支持多级亮度调整 - **半透明材质**：塑料质感材质，透明度可调 - **流光效果**：底部光圈动态旋转 - **温度雾效**：热力雾团，颜色随温度变化 - **档位控制**：关闭/低/高三档快速切换 ### 💡 光照系统 - **环境光**：冷色调全局照明 - **定向光源**：侧方柔光，凸显模型轮廓 - **点光源/聚光灯**：可独立配置位置和参数 - **环境贴图**：增强金属、玻璃反射真实感 ### 📊 数据可视化 - **实时温度监控**：设备温度数据动态更新 - **热力雾团效果**：低温绿色→高温红色渐变 - **设备状态显示**：运行状态实时反馈 --- ## 🎮 交互说明 ### 视角控制 | 操作 | 效果 | |------|------| | 左键拖拽 | 旋转视角 | | 右键拖拽 | 平移视角 | | 滚轮缩放 | 缩放视角 | > **提示**：视角控制始终可用，不会被模型选中或变换操作拦截 ### 模型选中 - **左侧面板**：点击下拉框选择模型，右侧面板自动同步信息 - **3D 场景点击**：开启"点击选中模型"开关后，可直接点击模型 ### 变换控制（右侧面板） - **位置调整**：X / Y / Z 三轴滑动条 - **旋转调整**：X / Y / Z 三轴角度滑动条 - **缩放调整**：支持统一缩放和独立轴缩放 - **重置变换**：一键重置为初始状态 ### 科技感控制 - **模型级**：对当前选中模型调整边缘亮度、材质透明度 - **全局级**：批量应用到场景内所有模型及光源 - **预设档位**：默认 / 低 / 高三档快速切换 --- ## 🛠️ 技术栈 | 分类 | 技术 | 版本 | |------|------|------| | 框架 | Vue 3 | ^3.4.21 | | 构建工具 | Vite | ^5.2.0 | | 3D 渲染 | Three.js | ^0.162.0 | | UI 组件 | Element Plus | ^2.6.1 | | 后处理 | EffectComposer | Three.js 内置 | | 模型加载 | GLTFLoader, OBJLoader | Three.js 内置 | --- ## 📁 项目结构 ``` src/ ├── components/ # 可复用组件 │ ├── TechScene.vue # 科技风3D场景主组件（核心） │ └── ControlGroup.vue # 控制面板组件 ├── views/ # 页面视图 │ ├── TechSceneView.vue # 科技风场景页面 │ └── HomeView.vue # 首页 ├── composables/ # Vue组合式函数 │ ├── useThree.js # Three.js核心封装 │ ├── useModelLoader.js # 模型加载器 │ └── useInteraction.js # 交互控制 ├── utils/ # 工具函数 │ └── three/ # Three.js工具集 │ ├── scene.js # 场景创建 │ ├── lighting.js # 光照系统 │ └── techMaterialUtils.js # 科技风材质工具 ├── config/ # 配置文件 │ ├── constants.js # 常量定义 │ └── models.js # 模型配置 ├── router/ # 路由配置 │ └── index.js # 路由定义 ├── App.vue # 根组件 ├── main.ts # 入口文件 └── style.css # 全局样式 ``` --- ## 🚀 快速开始 ### 环境要求 - **Node.js**: >= 18.0.0 - **npm**: >= 9.0.0 ### 安装依赖 ```bash npm install ``` ### 开发模式 ```bash npm run dev ``` 启动后访问：http://localhost:5176 ### 生产构建 ```bash npm run build ``` ### 预览生产版本 ```bash npm run preview ``` ### 代码检查 ```bash # 代码格式化 npm run format # ESLint检查 npm run lint # TypeScript类型检查 npm run typecheck ``` --- ## 📝 使用指南 ### 1. 加载模型 - **内置模型**：场景初始化时自动加载 - **预设模型**：在左侧面板勾选需要加载的预设模型 - **导入模型**：点击"导入模型"按钮，选择 GLB/GLTF/OBJ 文件 ### 2. 调整视角 - 使用鼠标左键拖拽旋转视角 - 使用鼠标右键拖拽平移视角 - 使用滚轮缩放视角 ### 3. 选中模型 - 在左侧面板的模型列表中选择 - 或开启"点击选中模型"开关后直接点击场景中的模型 ### 4. 调整模型变换 - 在右侧面板调整位置、旋转、缩放参数 - 点击"重置变换"恢复初始状态 ### 5. 科技风效果 - 使用底部档位按钮切换科技风强度 - 调整发光条亮度和材质透明度 - 开启/关闭流光效果和温度雾效 --- ## ⚙️ 配置说明 ### 预设模型配置 预设模型存储在 `public/models/config.js` 中： ```javascript { id: 'LenDongJiFang', name: '冷冻机房', path: '/models/LenDongJiFang/LenDongJiFang_model.gltf', scale: 3.0 // 自定义缩放倍数 } ``` ### 科技风档位 | 档位 | 强度值 | 效果 | |------|--------|------| | 关闭 | 0 | 恢复原始材质 | | 低 | 0.5 | 显示模型面 + 蓝色发光边缘 | | 高 | 1.0 | 塑料材质 + 蓝色发光边缘 | --- ## 📄 开发文档 详细的开发指南请参考：[threeJs开发指南.md](src/threeJs开发指南.md) --- ## 📜 许可证 MIT License --- ## 🤝 贡献 欢迎提交 Issue 和 Pull Request！