# demo-collection

**Repository Path**: whaxy/demo-collection

## Basic Information

- **Project Name**: demo-collection
- **Description**: 一些赛博朋克风格的按钮文字等，一个m3u8播放器，几个360度全景的东西，一些VR的页面，一个VR看房的demo，还有点cesium和GIS，后续会加上数据大屏
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://axydemo.netlify.app
- **GVP Project**: No

## Statistics

- **Stars**: 16
- **Forks**: 5
- **Created**: 2023-05-19
- **Last Updated**: 2025-06-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: CSS, bigscreen, Cesium, GIS, vr

## README

# demo-collection

[![license](https://img.shields.io/github/license/whanxueyu/demo-collection.svg)](LICENSE)
![Contributors](https://img.shields.io/github/contributors/whanxueyu/demo-collection.svg)


[![GitHub Stars](https://img.shields.io/github/stars/whanxueyu/demo-collection.svg?style=social)](https://github.com/whanxueyu/demo-collection/stargazers)
[![GitHub Forks](https://img.shields.io/github/forks/whanxueyu/demo-collection.svg?style=social)](https://github.com/whanxueyu/demo-collection/network/members)


## <font color="red">重要通知</font>

<font color="orange"><strong>项目中 Cesium 相关的例子将迁移至新的仓库中，使用 Vite 构建的 Vue3 项目，并全面使用 TypeScript。项目正在重构中，等候将迁移到新的仓库中，增加从基础到高级的各类例子 demo，并重新开源。</strong></font>
<font color="red"><strong>新的项目预览地址在这里 [AXY-Cesium](https://axy-cesium.netlify.app/) ，目前正在重构中，请关注。</strong></font>


## 项目介绍

这是一个在业余时间创建的示例集合项目，包含多种视觉效果如CSS与SVG特效，包括霓虹风格按钮、赛博朋克元素等。此外，还实现了360度全景展示和VR页面浏览功能，并且有一个简单的VR看房应用。项目还包括了`cesium`相关的很多案例和组件、数据可视化大屏模板以及其他实验性内容。如果你觉得这些内容对你有所帮助，请给予一个Star。

此外，我还在开发一个Vue组件库——[CyberPunk-UI](https://github.com/whanxueyu/cyberpunk-ui)，欢迎提交 ``issue`` 和 ``pr``。


---

### GitHub仓库
- [GitHub](https://github.com/whanxueyu/demo-collection.git)

### Gitee仓库
- [Gitee](https://gitee.com/whaxy/demo-collection.git)

### 在线预览
- [在线演示](https://axydemo.netlify.app/)

---

## 快速开始

### 克隆项目
```bash
git clone https://github.com/whanxueyu/demo-collection.git
```
推荐使用 ```pnpm``` 作为依赖管理工具

### 安装pnpm
```bash
npm install pnpm -g
```

### 安装依赖

```bash
pnpm install
```

### 开发环境编译启动热更新
```bash
pnpm run serve
```

### 生产环境打包
```bash
pnpm run build
```

## 展示截图

### 特效与界面

- **魔术文字和3D立体进度条**
  ![首页加载loading](./public/images/example/loading.png)

- **3D轮播图和JS打字效果**
  ![3D轮播图](./public/images/example/lunbo.png)

- **可视化大屏模板**
  ![可视化大屏](./public/images/example/bigscreen.png)

- **纯前端OCR文字识别**
  ![OCR文字识别](./public/images/example/orc.png)

- **各种方式实现的VR看房**
  ![VR看房](./public/images/example/vr.png)

### Three.js

- **粒子波浪效果**
  ![波浪](./public/images/example/wave.png)

- **太空背景登录页模板**
  ![太空背景](./public/images/example/space.png)

### Cesium

- **div标签、vue组件标签、gif标签等各类标签展示**
  ![各类标签](./public/images/example/billboard_layer.png)

- **模型队列计算和队形转换效果，模型拖拽添加，位置修改、缩放、旋转编辑工具**
  ![模型队列](./public/images/example/deploy.png)

- **结合Echarts实现迁徙线效果及饼图加载**
  ![结合Echarts](./public/images/example/echarts.png)

- **计算赛贝尔曲线生成迁徙线效果**
  ![迁徙线](./public/images/example/flyline.png)

- **视频材质、雷达、动态墙、动态线、雷达扫描、电弧球体、粒子效果和暗色地图图层编辑**
  ![各类材质特效](./public/images/example/effect.png)