如何用scroll-world构建无缝3D滚动页面零基础入门教程与实战案例【免费下载链接】scroll-worldA skill that turn any brand into a scrollable 3D world项目地址: https://gitcode.com/gh_mirrors/sc/scroll-worldscroll-world是一款能够将任何品牌转化为可滚动3D世界的工具让你轻松打造令人惊艳的交互式网页体验。本教程将带你从零开始掌握使用scroll-world构建无缝3D滚动页面的方法无需复杂的编程知识只需跟随简单步骤即可完成。 准备工作环境搭建与安装要开始使用scroll-world首先需要将项目克隆到本地。打开终端执行以下命令git clone https://gitcode.com/gh_mirrors/sc/scroll-world克隆完成后根据你使用的AI助手Claude Code或Codex将技能文件复制到相应的技能目录# 对于Claude Code cp -R scroll-world/skills/scroll-world ~/.claude/skills/ # 对于Codex cp -R scroll-world/skills/scroll-world ~/.codex/skills/如果你使用插件市场可以直接通过以下命令安装/plugin marketplace add oso95/scroll-world /plugin install scroll-worldscroll-world或者使用npx命令添加技能npx skills add oso95/scroll-world # 按提示选择代理 npx skills add oso95/scroll-world -a codex # 直接指定Codex 设计你的3D世界核心概念与准备在开始构建3D滚动页面之前需要明确几个关键概念和准备工作。scroll-world通过场景Scenes和连接器Connectors来构建无缝的3D滚动体验每个场景都是一个独立的3D环境通过连接器平滑过渡。收集必要信息在开始之前需要收集并记录以下信息参考skills/scroll-world/references/prompts.md主题SUBJECT你的业务及其一句话描述品牌名称BRAND_NAME显示用的品牌名称调色板PALETTE4-6个命名的十六进制颜色如taro #9B7EBD, cream #F5EDE0风格TONE一两个描述风格的词如舒适/高端、有趣、工业风艺术风格STYLE艺术指导方向如黏土模型、扁平纸艺、光泽玩具等场景SECTIONS[]有序列表每个场景包含id、标签、主题、标题等移动适配MOBILE是否需要移动设备适配测试版功能选择艺术风格scroll-world提供多种艺术风格你可以根据品牌特性选择黏土模型默认等距低多边形3D模型柔和的哑光黏土渲染圆角玩具模型形状扁平纸艺等距分层纸艺模型哑光卡片纸干净的模切边缘层间微妙的阴影光泽玩具等距光泽乙烯基玩具模型光滑的塑料阴影柔和的边缘光收藏品外观黏土动画等距定格动画黏土场景可见的指纹手工橡皮泥纹理霓虹之夜夜间等距微缩模型温暖的室内光芒和霓虹招牌情绪化的边缘光写实建筑超写实建筑摄影适合房地产、酒店、高端奢华品牌 构建3D滚动页面的基本步骤使用scroll-world构建3D滚动页面主要分为以下几个步骤我们将逐步介绍每个环节的核心操作。1. 创建场景静态图Scene Stills场景静态图是3D世界的基础每个场景都需要一张静态图作为起点。这些静态图需要保持一致的风格以确保整个3D世界的连贯性。首先为每个场景创建提示文件保存到$WORK/still_name.txt。提示文件应包含风格前导和场景主题例如Isometric low-poly 3D diorama floating as a small rounded island on a plain solid #F5EDE0 background with a soft contact shadow beneath it. Soft matte clay 3D render, rounded toy-model shapes, gentle warm studio lighting, soft long shadows, tilt-shift miniature look. Cohesive color palette of taro #9B7EBD, cream #F5EDE0, caramel #C88A5A, matcha #8FB98A, plum #3A2E48. Highly detailed, centered composition, absolutely no text, no letters, no numbers, no logos. Subject: A cozy farm scene with a small barn, green fields, and a farmer tending to crops.然后使用以下命令生成静态图参考skills/scroll-world/references/pipeline.mdgen_still() { # name higgsfield generate create gpt_image_2 --prompt $(cat $WORK/still_$1.txt) \ --aspect_ratio 3:2 --resolution 2k --quality high --wait --wait-timeout 15m --json \ $WORK/still_$1.json 2 $WORK/still_$1.err url$(jq -r .[0].result_url // empty $WORK/still_$1.json) [ -n $url ] curl -fsSL $url -o $WORK/still_$1.png echo still $1 ok || echo still $1 FAIL } for n in $NAMES; do gen_still $n done ; wait生成后将静态图转换为webp格式用于网站for n in $NAMES; do cwebp -quiet -q 84 -resize 1800 0 $WORK/still_$n.png -o $ASSETS/$n.webp; done2. 创建潜入动画Dive-in Clips潜入动画是用户进入每个场景时的过渡效果使静态场景变为动态3D环境。创建潜入动画提示文件保存到$WORK/dive_name.txt例如Single continuous cinematic camera move, no cuts. Begin high and far, looking down at the whole farm scene from outside like a tiny model. The camera slowly glides forward and descends toward it, sweeping in toward the farmer, as if flying inside. As the camera pushes in, the roof and upper structure gently lift and open away to reveal the warm interior. Soft matte clay diorama, tilt-shift miniature, warm light, taro #9B7EBD, cream #F5EDE0, caramel #C88A5A, matcha #8FB98A, plum #3A2E48. Smooth, graceful, slow motion, subtle parallax. No text, no captions.使用以下命令生成潜入动画gen_dive() { # name higgsfield generate create $VMODEL --prompt $(cat $WORK/dive_$1.txt) \ --start-image $WORK/still_$1.png \ $VOPTS --aspect_ratio 16:9 --duration $DIVE_DUR \ --wait --wait-timeout 20m --json $WORK/dive_$1.json 2 $WORK/dive_$1.err url$(jq -r .[0].result_url // empty $WORK/dive_$1.json) [ -n $url ] curl -fsSL $url -o $WORK/dive_$1.mp4 echo dive $1 ok || echo dive $1 FAIL } for n in $NAMES; do gen_dive $n done ; wait3. 提取边界帧Boundary Frames为了实现场景之间的无缝过渡需要从每个潜入动画中提取第一帧和最后一帧作为场景之间的连接点set -- $NAMES prev for n in $; do ffmpeg -v error -ss 0 -i $WORK/dive_$n.mp4 -frames:v 1 -q:v 2 $WORK/first_$n.png # 第一帧 ffmpeg -v error -sseof -0.15 -i $WORK/dive_$n.mp4 -frames:v 1 -q:v 2 $WORK/last_$n.png # 最后一帧 done4. 创建连接动画Connector Clips连接动画用于平滑过渡两个相邻场景使用前一个场景的最后一帧和后一个场景的第一帧作为开始和结束图像。创建连接动画提示文件保存到$WORK/conn_i.txt例如Single continuous cinematic camera move, no cuts. The camera smoothly pulls up and back out of the farm scene, rising into the sky, then glides forward across the connected miniature world and arrives above the kitchen scene, beginning to descend toward it. One connected miniature clay world, seamless flowing aerial transition. Soft matte clay diorama, tilt-shift miniature, warm light, taro #9B7EBD, cream #F5EDE0, caramel #C88A5A, matcha #8FB98A, plum #3A2E48. Smooth graceful slow motion. No text, no captions.使用以下命令生成连接动画gen_conn() { # i startPng endPng higgsfield generate create $VMODEL --prompt $(cat $WORK/conn_$1.txt) \ --start-image $2 --end-image $3 \ $VOPTS --aspect_ratio 16:9 --duration $CONN_DUR \ --wait --wait-timeout 20m --json $WORK/conn_$1.json 2 $WORK/conn_$1.err url$(jq -r .[0].result_url // empty $WORK/conn_$1.json) [ -n $url ] curl -fsSL $url -o $WORK/conn_$1.mp4 echo conn $1 ok || echo conn $1 FAIL } set -- $NAMES ; i0 ; prev for n in $; do if [ -n $prev ]; then i$((i1)); gen_conn $i $WORK/last_$prev.png $WORK/first_$n.png fi prev$n done ; wait5. 编码优化与配置生成所有动画后需要对视频进行编码优化以确保在网页上流畅播放enc() { ffmpeg -v error -y -i $1 -an -vf unsharp5:5:0.8:5:5:0.0 \ -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p \ -g 8 -keyint_min 8 -sc_threshold 0 -movflags faststart $2; echo enc $2 $(du -h $2|cut -f1); } for n in $NAMES; do enc $WORK/dive_$n.mp4 $ASSETS/vid/$n.mp4; done i0; for f in $WORK/conn_*.mp4; do i$((i1)); enc $f $ASSETS/vid/conn$i.mp4; done如果需要移动设备支持还需生成移动版视频encm() { ffmpeg -v error -y -i $1 -an -vf scale-2:720,unsharp5:5:0.6:5:5:0.0 \ -c:v libx264 -preset slow -crf 23 -pix_fmt yuv420p \ -g 4 -keyint_min 4 -sc_threshold 0 -movflags faststart $2; echo encm $2 $(du -h $2|cut -f1); } for n in $NAMES; do encm $WORK/dive_$n.mp4 $ASSETS/vid/$n-m.mp4; done i0; for f in $WORK/conn_*.mp4; do i$((i1)); encm $f $ASSETS/vid/conn$i-m.mp4; done最后在引擎配置中设置场景和连接器sections[k].clip assets/vid/name.mp4; sections[k].clipMobile assets/vid/name-m.mp4; // 移动版 connectors [assets/vid/conn1.mp4, ...]; // 连接器列表 connectorsMobile [assets/vid/conn1-m.mp4, ...]; // 移动版连接器 实用技巧与注意事项保持风格一致性风格前导Style Preamble在所有场景提示中必须保持完全一致这是确保整个3D世界感觉像一个统一场所的关键。例如Isometric low-poly 3D diorama floating as a small rounded island on a plain solid #F5EDE0 background with a soft contact shadow beneath it. Soft matte clay 3D render, rounded toy-model shapes, gentle warm studio lighting, soft long shadows, tilt-shift miniature look. Cohesive color palette of taro #9B7EBD, cream #F5EDE0, caramel #C88A5A, matcha #8FB98A, plum #3A2E48. Highly detailed, centered composition, absolutely no text, no letters, no numbers, no logos.优化移动设备体验如果启用了移动适配需要注意移动版视频使用更小的分辨率720p和更紧密的GOP关键帧间隔以提高滚动流畅度场景构图应保持中心聚焦避免重要元素出现在边缘手机会裁剪16:9视频的左右部分可以通过调整crf值23-26来平衡文件大小和视频质量处理常见问题动画生成失败检查higgsfield工作区信用和错误日志$WORK/*.err可以单独重新生成失败的动画风格不一致确保所有提示使用相同的风格前导必要时使用--image参数锁定风格移动设备卡顿减小GOP值如-g 2或-g 1增加关键帧数量提高 seek 性能NSFW过滤问题如果某个场景反复被标记可以尝试使用kling3_0模型重新生成该场景预览与测试在完成所有步骤后可以通过以下方式在AI助手中调用scroll-world在Codex中使用$scroll-world命令或/skills浏览技能直接请求创建一个可滚动的3D世界着陆页 实战案例构建你的第一个3D滚动页面假设我们要为一个名为GreenHarvest的有机农场品牌创建3D滚动页面按照以下步骤进行收集信息SUBJECT: GreenHarvest有机农场提供新鲜采摘的有机蔬菜和水果BRAND_NAME: GreenHarvestPALETTE: 翠绿 #4CAF50, 土黄 #E6A157, 天空蓝 #81D4FA, 米白 #FFF8E1, 深绿 #2E7D32TONE: 自然、健康、温馨STYLE: 黏土模型SECTIONS: [farm, kitchen, shop, delivery, finale]创建场景提示farm场景描述农场场景有谷仓、田地、农民劳作kitchen场景展示用新鲜食材烹饪的场景shop场景农场商店展示各种有机产品delivery场景配送过程新鲜产品送到客户手中finale场景展示最终产品和品牌标语生成静态图和动画按照前面介绍的步骤生成各个场景的静态图、潜入动画和连接动画编码和配置优化视频并配置引擎完成后在AI助手中调用scroll-world查看效果通过这个案例你可以看到如何将一个简单的品牌概念转化为引人入胜的3D滚动体验。 进一步学习资源详细流水线脚本skills/scroll-world/references/pipeline.md提示模板skills/scroll-world/references/prompts.md技能定义skills/scroll-world/SKILL.mdscroll-world为品牌展示提供了全新的方式通过简单的步骤和清晰的提示即使没有3D设计经验的新手也能创建出专业级的3D滚动页面。开始尝试将你的品牌带入令人惊艳的3D世界吧【免费下载链接】scroll-worldA skill that turn any brand into a scrollable 3D world项目地址: https://gitcode.com/gh_mirrors/sc/scroll-world创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考