【标签】 按所选赛道选择话题标签：生活娱乐/学习工作/社会服务/硬件交互，必须四选一；参加附加赛题的还可加选 社会公益 标签。（需要跟报名通过的赛道保持一致）
【标题】 【生活娱乐】做一个遨游太空，每颗星星都是论坛，主在消化人类情绪，兼科普太空知识的AI程序
（示例：【生活娱乐赛道】+XXXX
【正文】 至少包含以下4个部分，可以增加额外的部分（比如自我介绍、经验总结、踩坑复盘等）
0.先和大家打个招呼吧 
-
你是谁： 我是一位很多时候想要倾诉但是没有人听我说缺乏倾诉对象的人；
-
你是怎么用TRAE把Demo做出来的： 深夜睡不着的时候，我总喜欢抬头看天。可城市的夜空总是灰蒙蒙的，看不到几颗星。我就想： 如果有一个地方，天上每一颗星都亮着，而每颗星下面都坐着一个愿意听你说话的人，那该 多好。
于是我把这个念头，一点点讲给了TRA E听。
老实说，我并不是科班出身的前端工程师，Three.js、GLSL着色器、WebSocket这些词一开始对我来说像天书。但我发现TRAE最神奇的地方在于——我只需要把脑子里那个“画面”用大白话描述出来，它就能帮我把代码骨架搭起来。 我说“我想要一个能拖拽旋转的太阳系，点哪颗行星就弹出科普”，它就真的给了我一份能跑的StarScene. vue。
最让我有“原来这么简单”的一刻，是我让它给地球写昼夜分界的着色器。我以为这种效果要啃好几天图形学，结果它一段smoothstep + Lambert的GLSL就出来了，地球一半白天一半黑夜，那一刻我在屏幕前愣了几秒——原来我脑子里的画面，真的能这么 快变成现实。
它帮我跨过的最大的坎，是“从零到一”。没有它，我大概永远停在“想 ”这一步。
- （我们相信，每个作品背后都有一个真实的人。这段不计入评分，但真诚的分享，会让你的作品更有温度、也更容易 被看到
）
1 . Demo简介
-
是什么：星语宇宙是一个3D太空探索×真实天文科普×星际轻社交的Web网站 （Vue3 + Three.js前端+ Sprin gBoot后端）。
-
面向谁：像我一想倾诉却缺少倾听者的人；对宇宙天文有好奇心的普通人；想在星 空下安放情绪的夜猫子。
-
主要功能：
3D银河系自由遨游— Three.js实时渲染的太阳系，11颗天体按NASA真实轨道布局，WASD键鼠飞行、拖拽旋转、滚轮缩放，点哪颗星看哪颗星。土星有环、木星 有条纹、地球有昼夜分界。
每颗星都是一个论坛—你可以在任何一颗星下发表心情、倾诉烦恼，也可以回复其他流浪者。3000颗未发现星体也能评论——因为它们本来就是为“无 处安放的情绪”准备的。
流星与陨石毁灭系统—每10秒划过一颗流星，每75秒一场彩色流星雨。后端定时任务每5分钟有30%概率摧毁一颗“陨石活跃星体”，爆炸瞬间全员收到WebSocket广播——提醒你：情绪会消散，但记录会留下痕迹。
配图建议：3D太阳系主界面截图/星体详情 页截图/论坛发帖界面截图
2. Demo创作思路
- 灵感来源 ：我自己的孤独。很多次话到嘴边又咽回去，因为怕打扰别人，也怕没人回应。抬头看天的时候我总想：星星那么多，能不能每颗都听我说一句？于是“星语宇宙”这个名字就出 现了——星星，是宇宙的耳朵。
想解决的问题 ：现代人普遍存在的“倾诉饥渴”——不是没话说，是没人听。传统树洞App是冷冰冰的列表，缺少“被温柔接住”的感觉。我想让倾诉这件事变得 有美感、有仪式感 ：你不是在匿名区打字，而是在一颗 以你情绪命名的星辰下，留下 一段话。
为什么做这个方向 ：
-
-
生活娱乐赛道 而非纯工具：倾诉本身需要“治愈感”和“陪伴感”，3D 星空+轻社交比纯文字树洞更有温度。
-
真实天文科普做外壳 ：用太阳系真实贴图、AU轨道、行星档案，让“倾诉”这件事披上一层浪漫的科学外衣——你在金星下说 心事，顺便就知道金星表面462°C。
-
零AI生成内容 ：我刻意不用AI写帖子。情绪必须是真人写的才有重量， AI只负责帮我把“舞台”搭好。
-
3. Demo体验地址（三选一）
- 我选择 交互式可体验的 HTML格式文件 （已打包为Zip上传社区）。
文件名： 项目沉浸式体验.html打开方式：解压后用浏览器（推荐Chrome）直接 打开，需联网加载 Three.js CDN，无需后端。
体验核心：
-
-
拖拽顶部3D太阳系，点击任意行星查看天文档案
-
滚动浏览15个章节，含真实可交互的T hree.js场景、着色器代码、论坛模拟、通知系统、开发历程
-
内置Session ID汇 总与踩坑复盘，供评审核验
-
项目沉浸式体验.html (139.8 KB)
4. TRAE实践过程
- 完整开发流程
我用T RAE完成了从需求拆解到沉浸式HTML的全 流程，分6个阶段：
Step 01需求拆解·任务书定义
我先让TRAE在Builder模式下帮我梳理项目任务书，把“太空+情绪+科普”这个模糊念头拆成3层架构：3D渲染层（Three.js）、数据服务层（SpringBoot + JPA + H 2）、社交互动层（论坛+通知+收藏），并定义了7个实体模 型。
Step 02 3D主场景搭建· StarScene.vue
核心难点是Three.js版本兼容 。关键Prompt：“创建3D银河系场景，支持OrbitControls拖拽旋转、Raycaster点击拾取星体、WASD自由飞行，controls.minDistance=0.01允许无限拉近”。
踩坑 ：Three.js r160删除了examples/js目录，OrbitControls 404 白屏。 解决 ：降级锁定r128，手动重启Vite +浏览器硬刷新。
Step 03真实天文贴图·太阳系11天体
我从Three.js官方与threex.planets仓库取NASA图像，建立STAR_TEXTURE_MAP。还为太阳写了fBm着色器（米粒组织流动+黑子），为地球写了昼夜着色器。
踩坑 ：用户反馈“太阳太亮看不清表面”“方块状星体难看”。 解决 ：emissiveIntensit y降至0.9，halo面数提到24×24，背景星点 改用圆形粒子纹理。
Step 04 3000颗未发现星体+陨石毁灭系统
前端生成3000颗星不存后端，但后端要能评论——这是架构矛盾。我让TRAE设计：前端在大立方体内生成，后端移除存在性校验。陨石系统@Scheduled(fixedDelay=300000)每5分钟30%概率毁灭一颗，触发前端爆炸动画+ WebSocket广播。
踩坑 ：①后端存在性校验阻止UND星体评论；②定时任务抛未捕获异常崩溃后端；③删除操作缺@Tra nsactional。 解决 ：移除校验、try/ catch保护、补全事务注解。
Step 05零AI三重审核+防沉迷
前端关键词预检→后端黑名单→管理员人工审核，全程零AI生成。防沉迷minorMode +会话计时+ 40分钟限制。
踩坑 ：Elemen t Plus图标Keyboard无对应名称致白屏。 解决 ：改用emoji替代。
Step 06三级离线降级+沉浸式HTML
设计API → IndexedDB →本地兜底降级链，保证后端没起也能体验。 最后用TRAE生成这份可交互H TML—— 你正在体验的页面本身就是TRAE的产物 。
截图：
Session ID：
1】.3031781966100601:871a1d15d30f2a790efa0489e27d0815_6a3bfec3b86346af813a5dec.6a3bff5fb86346af813a5def. 6a3bff5e446602f777fe67b9:Trae CN.T(2026/6/25 00:01:35)
2】.3031781966100601:b9f8ca114134a830fe9b2281f821e0d0_6a3bfec3b86346af813a5dec.6a3d55654e7834fc9390d01a .6a3d55658321fb336f3ade98:Trae CN.T(2026/6/26 00:20:54)
3】.3031781966100601:7f7695ae7c780e7e26c862767a98f546_6a3bfec3b86346af813a5dec.6a3e9e5e120d578a46df42d c.6a3e9e5d1f8bae2de46 d397c:Trae CN.T(2026/6/26 23:44:30)
5.对应的报名审核通过的帖子链接
Session ID在哪找？Session ID是TRAE每段对话任务的唯一标识，用来证明作品确实由TRAE开发完成。请在创作 时保留关键任 务的对话记录，发帖时附上对应Session ID——双击TRAE的对话复制出来即可。（如下图）
