返回赛题列表
太阳系动态模型
进阶用 Three.js 实现一个可交互的 3D 太阳系动态模型，支持拖拽/缩放视角，点击任意星体弹出磨砂玻璃风格中文科普信息面板。考察模型对 WebGL 三维场景构建、Raycaster 交互、光照渲染与 UI 叠加层设计的综合把控能力。原题灵感来源linux.do论坛 (https://linux.do/t/topic/286836) ，未修改原提示词。
规则说明▼
单阶段挑战。允许通过 CDN 引入 Three.js 及其附加模块（OrbitControls 等），禁止引用任何外部图片纹理，所有星球外观必须用 Three.js 内置材质和颜色模拟，最终输出一个可直接双击在浏览器中运行的单文件 HTML。
Prompt▼
Prompt▼
你现在是一位资深的 WebGL/前端图形学工程师。请帮我编写一个单文件的 HTML 代码（包含 HTML, CSS 和 JavaScript），实现一个具有交互性的 3D 太阳系动态模型，并且支持点击星球查看详细科普介绍。
为了保证代码可以直接在浏览器中双击运行，请严格遵守以下要求：
1. 技术栈要求：
- 只能输出一个 `index.html` 文件，所有代码必须内联。
- 使用 Three.js 库（请通过 CDN 引入，例如 cdnjs 或 unpkg，并包含 OrbitControls）。
- 不要引用任何外部的图片纹理（Texture），请使用 Three.js 自带的材质（Materials）和颜色来模拟星球外观。
2. 视觉与对象要求：
- 中心天体：太阳（发光，纯色或渐变，不受场景光照阴影影响）。
- 八大行星：水星、金星、地球、火星、木星、土星、天王星、海王星。土星必须包含 3D 星环。
- 宇宙背景：使用粒子系统（Points）生成满天繁星。
- 光照：太阳位置放置点光源（PointLight），让行星产生真实的明暗面。
3. 物理与动画要求：
- 具有相对合理的体积比例和轨道距离比例（需保证能同屏较好地观看）。
- 所有行星围绕太阳公转，距离越远公转越慢，且行星自身有自转。
4. 💡 交互与 UI 数据要求（核心重点）：
- 支持鼠标通过 OrbitControls 拖拽、缩放视角。
- 引入 Three.js 的 `Raycaster`（射线检测）。当用户的鼠标**点击**某个行星或太阳时：
1. 识别被点击的星体。
2. 在网页的左侧或右侧浮现一个用 HTML/CSS 制作的【信息面板】（UI 面板需具备现代感、半透明磨砂玻璃效果更佳）。
3. 面板内展示该星体的名称以及一段约 100 字左右的详细中文科普介绍（包括其物理特征、环境等数据）。点击空白宇宙处，关闭面板。
- 请在 JS 代码中构建一个完整的数据字典（Array/Object），将每个星球的名称、颜色、大小、公转半径、速度以及“详细介绍文本”统一管理。
5. 响应式：
- 窗口大小改变时，3D 画布和 UI 面板都能自适应，不发生变形。
请直接输出完整且可以直接运行的代码，不需要过多解释。代码中请附带关键步骤的中文注释。