星球主题个人主页（纯HTML 开源）

「03-星球主题个人主页」

/~46c23LktDZ~:/

链接：https://pan.quark.cn/s/87e6d15b8260

星球主题个人主页 - 纯HTML版本

一个基于 Three.js 的沉浸式 3D 个人主页，使用纯 HTML + JavaScript 开发，无需构建工具。

📁 文件结构
复制代码
pure-html-package/
├── index.html              # 主HTML文件（54KB）
├── textures/               # 行星纹理目录
│   ├── 2k_earth_daymap.jpg         # 地球表面纹理 (453KB)
│   ├── 2k_earth_normal_map.tif     # 地球法线贴图 (510KB)
│   ├── 2k_mars.jpg                 # 火星表面纹理 (733KB)
│   └── 2k_moon.jpg                 # 月球表面纹理 (1.1MB)
└── README.md               # 使用说明（本文件）
总大小: 约 2.8MB

✨ 特性

✅ 纯HTML单文件 - 无需Node.js、Webpack或Vite，直接打开即可使用

✅ Three.js 3D场景 - 包含粒子星系、3颗行星（地球、火星、月球）、星空背景

✅ GLSL着色器 - 自定义着色器实现高质量渲染效果

✅ 响应式设计 - 基于Tailwind CSS，支持移动端

✅ 交互动画 - 滚动动画、悬停效果、鼠标跟随

✅ 纹理贴图 - 使用真实的行星纹理和法线贴图

🚀 使用方法

方法1：直接打开（推荐用于本地预览）

直接双击 index.html 文件，在浏览器中打开即可。

方法2：使用HTTP服务器（推荐）

由于浏览器安全策略，某些功能可能需要HTTP服务器才能正常工作。

使用Python：
复制代码
# Python 3
python -m http.server 8080

# Python 2
python -m SimpleHTTPServer 8080
使用Node.js：
复制代码
# 安装http-server（仅需安装一次）
npm install -g http-server

# 启动服务器
http-server -p 8080
使用PHP：
复制代码
php -S localhost:8080
然后在浏览器中访问：http://localhost:8080

方法3：部署到Web服务器

将整个文件夹上传到任何Web服务器即可：

GitHub Pages

Netlify

Vercel

任何传统Web主机

🎨 技术栈

Three.js - 3D图形渲染

GLSL - 着色器编程

Tailwind CSS (CDN) - 样式框架

Google Fonts - Space Grotesk, Inter, JetBrains Mono

IntersectionObserver API - 滚动动画

🌍 行星纹理来源

行星纹理来自 Solar System Scope，基于 CC Attribution 4.0 International 许可证。

📝 自定义配置

修改行星

在 index.html 的 createPlanets() 函数中（约1083行）：
复制代码
createPlanet([x, y, z], 'texture_name', {
    radius: 1,                    // 行星半径
    displacementScale: 0.1,       // 置换强度
    normalScale: 0.5,             // 法线强度
    metalness: 0.15,              // 金属度
    roughness: 0.75,              // 粗糙度
    ambientLightIntensity: 0.3,   // 环境光强度
    pointLightIntensity: 1.5,     // 点光源强度
    normalMapName: 'normal_map'   // 法线贴图名称（可选）
});
修改星系参数

在 createParticleGalaxy() 函数中（约481行）：
复制代码
const parameters = {
    count: 10000,              // 粒子数量
    branches: 5,               // 旋臂数量
    radius: 8,                 // 星系半径
    innerRadius: 0.3,          // 内半径
    spin: 1.5,                 // 旋转强度
    randomness: 0.3,           // 随机性
    colorInside: '#ff6030',    // 内部颜色
    colorOutside: '#1b3984',   // 外部颜色
};
修改内容

所有文字内容都在HTML的对应section中，可以直接修改：

Hero区域 - 约180行

About区域 - 约250行

Projects区域 - 约300行

Contact区域 - 约380行

🌐 浏览器兼容性

✅ Chrome 90+

✅ Firefox 88+

✅ Safari 14+

✅ Edge 90+

需要支持 WebGL 和 ES6+ 的现代浏览器。

📄 许可证

本项目基于 MIT 许可证开源。

行星纹理基于 CC Attribution 4.0 International 许可证。

🙏 致谢

Three.js - 强大的3D图形库

Solar System Scope - 提供高质量行星纹理

Tailwind CSS - 实用优先的CSS框架

Google Fonts - 优秀的Web字体

享受你的星际之旅！ 🚀✨