社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Git

盘点 2 个看起来贼炫酷酷酷的 GitHub 项目,炒的还挺火的。

逛逛GitHub • 1 周前 • 55 次点击  

最近 GitHub 上有个项目,看 Demo 的时候真的很容易停下来。

滚轮轻轻往下滑,镜头从一座微缩建筑外面钻进去,穿过精心设计的内部空间,再飞向下一个场景。

整个网页像一支可以用鼠标控制进度的品牌短片。

这种网站第一眼给人的感觉就很贵。

以前想做出类似效果,得同时处理视觉设计、视频生成、镜头衔接和网页动效。

任何一环没接好,页面都会突然跳一下,电影感当场消失。

这个开源项目把这套制作流程整理成了一个开源 Agent Skill,名字叫 scroll-world。

01

第一个项目叫 Scroll-world

装好之后,你可以把品牌资料、产品信息和想要的视觉风格交给 Agent。

它会帮你规划场景、生成图片和镜头视频,再把这些素材接进网页里的滚动播放引擎。

最后得到的页面大概是这种体验:你往下滚动,镜头就向前飞行。

滚到某个章节,品牌文案和产品卖点跟着场景出现。往回滚动,镜头也会沿着原来的路线退回去。

用它做产品发布页、品牌官网、旅行项目、地产展示或者个人作品集,都挺合适。

开源项目里提供完整的 Skill、提示词模板、批处理脚本和网页播放引擎,图片与视频则要为每个项目单独生成,不会随仓库一起提供。

02

如何生成自己的滚动官网

如果你使用 Claude Code,可以通过插件市场安装:

/plugin marketplace add oso95/scroll-world/plugin install scroll-world@scroll-world

安装完成后,输入 /scroll-world,或者描述你想要一个可以滚动穿行的品牌世界。

Codex 和其他支持 Agent Skills 的工具,可以使用 Vercel 的 skills CLI:

npx skills add oso95/scroll-world # 安装到 Codexnpx skills add oso95/scroll-world -a codex

在 Codex 里可以通过 $scroll-world 调用。

安装 Skill 只是第一步。图片和视频还要交给生成模型处理,因此本地需要准备几项依赖。

目前默认的视频链路通过 Monid CLI 调用 Seedance 2.0。

Higgsfield CLI 负责生成场景图,也可以在 Monid 不可用时承担视频生成。帧提取和编码需要 ffmpeg、ffprobe。如果要制作手机竖屏画布,还会用到 Python 3 和 Pillow。

装有 Codex CLI 的情况下,场景图也可以通过 Codex 内置的图片生成功能完成,费用走你的 ChatGPT 订阅。

03

第二个项目叫 img2threejs

一张图片,重建成可以动画的 Three.js 模型。

你给它一张耳机、机械装置、建筑或者游戏道具的参考图,它会分析物体轮廓、组成结构、材质和细节,再生成一个可以放进浏览器运行的 Three.js 模型。

输出结果很高级。

开源地址:https://github.com/img2threejs/img2threejs

img2threejs 明确选择了纯代码重建路线。用基础几何体、程序化着色器和生成式几何重新搭出参考图里的物体。

这种代码模型很适合产品展示、浏览器小游戏和交互式官网。

想换颜色、移动一个零件或者给机关加动画,都能继续在代码里调整。

img2threejs 也没有让智能体看一眼图片就开始乱写。

它会先检查图片是否适合重建,再评估物体类型、复杂度和质量目标。

生成代码之前,还要整理一份 detailInventory,把倒角、螺丝、刻线、光泽、污渍这些决定辨识度的细节列出来,并且为它们安排真实的组件或材质实现。

接下来进入分阶段制作:结构搭建→ 形体细化→ 材质→ 表面细节→ 灯光→ 交互结构→ 优化

每完成一轮,它都会在浏览器里渲染模型,截一张图和原始参考图放在一起,再交给智能体做视觉检查。

轮廓不对就改规格,几何和材质没跟上就改代码。当前阶段通过以后,才能继续解锁下一轮。

我自己试了一下,重建效果啥样呢?这个样

小猫重建对比

04

如何使用这个 SKill

img2threejs 可以在 Claude Code、Codex 和 OpenCode 中使用。

通过 skills CLI 安装到 Codex:

npx skills add img2threejs/img2threejs -a codex

Claude Code 也可以按官方文档把仓库放进 skills 目录:

git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs

然后附上一张参考图,调用:

/img2threejs 把这个物体重构成 Three.js 模型, 保持原有的比例、角度和颜色。

05

点击下方卡片,关注逛逛 GitHub

这个公众号历史发布过很多有趣的开源项目,如果你懒得翻文章一个个找,你直接关注微信公众号:逛逛 GitHub ,后台对话聊天就行了:

图片

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/199486