三色软糖坠落玻璃池 THreeJS kimi

「03-三色软糖坠落玻璃池 THreeJS kimi」

/~71723ZnYOm~:/

链接：https://pan.quark.cn/s/5250f31acce3

Satisfying Loops · 解压循环

三色软糖坠落玻璃池 ------ 3D 可交互网页 · 9:16 竖屏 · 实时物理软糖雨

🍬 线上体验

EP01 · 软糖池

打开即玩:点击屏幕上半空区域落一颗软糖,可拖拽环绕视角、滚轮缩放

右下角有「自动雨」「音效」开关,默认关闭,需要时自行打开

基于 web-3d-design 插件质量状态机(asset-craft → first-frame → continue → 独立盲审 → complete)制作的「oddly satisfying」解压内容系列。

第一期 · EP01 三色软糖坠落玻璃池

主交付物:浏览器实时 3D 交互页 (ep01-gummy-pool/web/)

三色软糖实时坠落、碰撞、堆积:撞击挤压回弹(squash-stretch)、没入糖浆触发事件涟漪、稳态循环无尽下落

交互:拖拽环绕视角 · 滚轮缩放 · 点击上半空区域落一颗糖

9:16 竖屏舞台:桌面端居中,移动端全屏自适应

本地运行:cd ep01-gummy-pool/web && npm install && npm run dev

部署入口:根目录或 ep01-gummy-pool/web 均可 npm install + npm run dev

副产品:预渲染无缝循环视频 ep01-gummy-pool/video/gummy-pool-loop-9x16.mp4(1080×1920,6s @ 24fps,H.264,中点旋转 + 12 帧交叉淡化,接缝逐帧差分验证通过)

质检 :交互版与视频版均过独立盲审(六类复核 + 几何缺陷必查 + 交互/软体感/循环接缝专项),报告见各自 evidence/ 目录。

📣 宣传物料

publish/ 目录(已被 .gitignore 排除,仅本地)收录 EP01 的全套宣传物料:

publish/video/ ------ 35s 竖屏成片

publish/covers/ ------ B站 / 小红书 / 抖音三平台封面

publish/copy/ ------ 各平台发布文案

publish/audio/ ------ 配音与氛围音

平台发布链接(发布后补充):

B站:发布后补充

小红书:发布后补充

抖音:发布后补充

🚀 部署到 Kimi Websites

线上版本托管于 Kimi Websites。关键经验:

该平台预览/发布管线对「带 package.json 的构建型项目」会触发内部错误(500),需采用纯静态形态部署。

本仓库做法:维护 deploy-slim 孤儿分支(仅含部署必需文件);本地 npm ci && npm run build 后,把 ep01-gummy-pool/web/dist 的产物平铺为纯静态工作区保存版本即可正常预览与发布。

目录结构
复制代码
├── concept/            # 概念参考图(4K)
└── ep01-gummy-pool/    # 第一期工程
    ├── web/            # ★ 3D 交互网页(Vite + React Three Fiber + Rapier)
    ├── docs/           # 视觉规格、资产定义卡
    ├── assets/         # GLB 资产 + 隔离 QA 预览
    ├── blender/        # Blender Python 构建/渲染/编码脚本
    ├── scene/          # .blend 工程
    ├── video/          # 无缝循环 MP4
    └── evidence/       # 首帧、接缝指标、盲审报告
渲染帧序列(约 890MB)与 web/node_modules 不入库:帧可用 blender/ 脚本从 .blend 工程重新生成,依赖用 npm install 恢复。

环境

Node.js ≥ 20(Web 交互版)

Blender 4.5 LTS(资产生产与视频渲染,脚本均 --background --python 无头执行)

Python 3.12+(循环拼接与接缝指标计算)

🛠️ 技术栈

AI 生成(Kimi Work + web-3d-design 插件)· React Three Fiber + Rapier 实时物理 · Vite + TypeScript · Three.js 自定义 shader(糖浆涟漪/分区校色)· Blender 4.5(hero 资产生产 + 预渲染视频)· Playwright(视觉回归 QA)

📃 许可

代码:MIT License

美术资产(模型、贴图、视频、设计文档):CC BY-NC 4.0(署名-非商业使用)

详见。本项目的商标与原作 IP 不归本许可覆盖;请勿将美术资产用于商业用途。
本文介绍了一款名为《SatisfyingLoops·解压循环》的3D交互式网页作品EP01，主打通过三色软糖坠入玻璃池的物理模拟实现解压效果。该作品支持浏览器实时交互（点击落糖、视角旋转、缩放），提供自动落糖和音效开关功能，采用Vite+ReactThreeFiber+Rapier技术栈实现软糖的挤压回弹和糖浆涟漪效果。项目包含9:16竖屏交互页面和6秒无缝循环视频两种交付形式，均通过严格质检流程。技术亮点包括Three.js自定义着色器、Blender资产生产，采用MIT代码许可和CC-BY-NC美术资产