# Code with SOLO 3D Footprint

**Repository Path**: chaoo/trae-footprint

## Basic Information

- **Project Name**: Code with SOLO 3D Footprint
- **Description**: 【Code with SOLO】3D 地球旅行足迹记录
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-28
- **Last Updated**: 2026-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 【Code with SOLO】3D 地球旅行足迹记录网页

> 基于 Vue 3 + Three.js 构建的交互式 3D 地球旅行足迹记录的静态网站应用
> 
> 🎯 **TRAE × 脉脉「AI 无限职场」SOLO 挑战赛参赛作品**
> 
> 📌 [参赛链接](https://forum.trae.cn/t/topic/13101)

---

## 🌟 项目亮点

- **沉浸式 3D 地球展示**：使用 Three.js 渲染高精度地球模型，支持鼠标交互旋转、缩放
- **全球地标标记**：在地球上标记 50+ 世界著名风景名胜古迹
- **交互体验**：点击标记点可查看详细信息，支持平滑飞行动画
- **响应式设计**：支持 PC 端和移动端，自适应不同屏幕尺寸
- **足迹列表**：左侧可折叠列表，方便快速定位和选择地标

---

## 🛠️ 技术栈

- **框架**: Vue 3 + TypeScript
- **3D 渲染**: Three.js
- **构建工具**: Vite

---

## ✨ 功能特性

### 🌍 3D 地球交互
- 支持鼠标拖拽旋转地球
- 滚轮缩放视角
- 自动旋转动画（可暂停）

### 📍 标记点功能
- 50+ 全球著名地标标记
- 细光柱+小红球的钉子样式标记
- 点击标记点显示详情弹窗
- 平滑飞行到标记点位置

### 📋 足迹列表
- 可折叠的地标列表
- PC 端默认展开，移动端默认收起
- 点击列表项快速定位到对应地标

### 📱 响应式设计
- PC 端：左侧列表，右侧地球
- 移动端：顶部折叠列表，全屏地球

---

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```