自制3D小球时钟 SphereClock

一个结合3D球体动画和数字时钟的交互式Web应用 ## 项目描述 这是一个使用Three.js和Canvas API创建的创意Web应用，包含两个主要组件： 1. **3D星空球体**：一个可鼠标交互的3D球体，上面散布着1000个白色粒子，模拟星空效果。鼠标移动会影响相机视角。 2. **数字时钟**：一个2D数字时钟，使用彩色球体显示时间。每当时间变化时，会产生爆炸效果的彩色球体动画。 ## 功能特性 - **3D交互**：鼠标移动控制相机视角，观察星空球体 - **实时时钟**：显示当前时间（小时:分钟:秒） - **动画效果**：时间变化时产生彩色球体爆炸动画 - **响应式设计**：适应不同屏幕尺寸 - **高DPI支持**：在高分辨率显示器上自动调整画布分辨率 ## 技术栈 - **Three.js**：用于3D渲染和相机控制 - **Canvas API**：用于2D时钟渲染和动画 - **HTML5/CSS3**：页面结构和样式 - **JavaScript (ES5)**：核心逻辑和动画 ## 如何运行 1. 克隆或下载项目文件 2. 在浏览器中打开 `index.html` 文件 3. 享受3D星空和时钟动画！ 无需服务器或构建步骤，直接在浏览器中运行。 ## 文件结构 ``` sphere+clock/ ├── index.html # 主页面文件 └── static/ └── js/ ├── threejs-6ebcc050.js # Three.js库 ├── projector-2f448d36.js # Three.js投影器 └── canvasrenderer-0792e9f3.js # Three.js Canvas渲染器 ``` ## 浏览器兼容性 - Chrome 60+ - Firefox 55+ - Safari 11+ - Edge 79+ 需要支持WebGL和Canvas的现代浏览器。 下载：https://afdian.com/a/lygalaxy?tab=shop