这是一个我花了数月时间打磨的 3D 低代码平台，终于可以和大家分享了！
前言
作为一名前端开发，我一直对 3D 可视化有着浓厚的兴趣。在工作中，我发现很多团队都有 3D 数据大屏的需求，但市面上的解决方案要么太贵，要么太复杂。
于是，我决定自己动手，打造一个开箱即用、易于扩展的 3D 可视化平台 —— Meteor3D。
✨ 项目亮点
1️⃣ 场景编辑器 - 所见即所得
一个功能完整的 3D 场景编辑器，支持：
- 🎨 模型拖拽加载（支持 GLB/GLTF/FBX/OBJ）
- 📍 GIS 坐标定位（经纬度直接摆放模型）
- 🗺️ 卫星影像底图（无缝对接高德/天地图）
- ⚡ 实时性能监控（FPS、三角面数统计）
[📸 截图1：场景编辑器主界面 - 展示模型加载和GIS配置]
2️⃣ 应用编辑器 - 零代码搭建数据大屏
这是我最满意的功能！拖拽式搭建 3D 数据可视化大屏：
- 💡 组件化设计（ECharts、时钟、按钮、3D标签...）
- 🔗 交互配置（点击按钮触发场景切换）
- 📊 数据面板（JSON 数据绑定到 3D 标签）
- ✨ 描边/高亮效果（一键添加对象特效）
[📸 截图2：应用编辑器界面 - 展示组件拖拽和数据面板]
3️⃣ SDK 独立封装 - 二次开发友好
核心功能封装为 @meteor3d/core，可独立使用：
import { loadScene } from '@meteor3d/core';
// 一行代码加载 3D 场景
const meteor3d = await loadScene('#container');
// 加载模型
const model = await meteor3d.loadModel('/models/city.glb');
// 添加高亮效果
meteor3d.enableHighlight(model.uuid, {
color: 0x00ff00,
intensity: 0.8
});
// 创建 3D 标签
meteor3d.createLabel({
position: { x: 0, y: 10, z: 0 },
content: '<div class="label">监控点A</div>'
});
🛠️ 技术栈
| 模块 | 技术 |
|---|---|
| 3D 渲染 | Three.js + EffectComposer |
| 前端框架 | Vue 3 + Vite + Pinia |
| 文档站点 | VitePress |
| 后端服务 | Node.js + Express |
| 工程管理 | pnpm monorepo |
🎯 核心 API 一览
// 场景控制
meteor3d.fitCameraToScene()
meteor3d.resize(width, height)
// 效果 API
meteor3d.enableOutline(uuid, { color, thickness, strength })
meteor3d.enableHighlight(uuid, { color, intensity })
// 标签系统
meteor3d.createLabel({ position, content, style })
meteor3d.getLabels()
meteor3d.clearLabels()
// GIS 坐标
meteor3d.lngLatToWorld(lng, lat, height)
meteor3d.worldToLngLat(worldPos)
// 辅助工具
meteor3d.setGridHelper(visible, length, width)
meteor3d.setAxesHelper(visible, size)
meteor3d.enableStats() // FPS 监控
📦 项目结构
Meteor3D/
├── packages/
│ ├── core/ # @meteor3d/core SDK
│ ├── scene-editor/ # 场景编辑器
│ └── asset-manager/ # 资产管理
└── meteor3d-server/ # 后端服务
🚀 快速体验
# 克隆项目
git clone https://github.com/nikonikoCW/Meteor3DEditor
cd Meteor3DEditor
# 安装依赖
pnpm install
# 启动场景编辑器
pnpm dev:scene
🔮 未来规划
- LOD 场景渲染优化
- 周边建筑geojson自动生成
- 更多动画效果
- 云端部署方案
- 3dtiles、rvt等多格式数据导入
🌟 写在最后
这个项目从第一行代码到现在，经历了无数次重构和优化。我希望它能帮助到有类似需求的开发者。
项目开源地址： GitHub - Meteor3DEditor
官网地址： Meteor3D Saas
如果你觉得这个项目有价值，欢迎 Star ⭐ 支持一下！
有任何问题或建议，欢迎在评论区交流~
我是一个热爱 3D 可视化的前端开发。如果你也对 Three.js、数据可视化感兴趣，欢迎关注我，一起交流学习！
