小白也能看懂:iPhone Duo 网页交互效果是怎么制作的?
作者受苹果 iPhone Duo 官网折叠手机交互动效吸引,借助 Codex 复刻并拆解其实现原理。通过网页源码和网络请求证据,确认核心是实时 3D 渲染(Lotus 架构封装 Three.js),而非视频或图片序列。文章讲解了模型、贴图、场景配置、渲染引擎的组成,滑块 0 到 1 数值如何驱动铰链折叠与运镜,以及弹簧回弹、端点磁吸等物理拟真细节带来的「苹果高级感」,并分享了用 AI 辅助翻源码、复现交互和排错的完整学习方法。
作者受苹果 iPhone Duo 官网折叠手机交互动效吸引,借助 Codex 复刻并拆解其实现原理。通过网页源码和网络请求证据,确认核心是实时 3D 渲染(Lotus 架构封装 Three.js),而非视频或图片序列。文章讲解了模型、贴图、场景配置、渲染引擎的组成,滑块 0 到 1 数值如何驱动铰链折叠与运镜,以及弹簧回弹、端点磁吸等物理拟真细节带来的「苹果高级感」,并分享了用 AI 辅助翻源码、复现交互和排错的完整学习方法。
文章以AI辅助逆向拆解苹果官网3D交互为线索,证据链清晰、提示词和排错细节可复现,可读性极佳,但核心方法论(AI扒源码+实时3D原理)并无突破性新意。
文章详细介绍了如何利用 Kimi K3 模型开发 3D WebGL 应用。相较于 Claude 和 GPT-5.6,K3 在 Three.js、WebGPU 等复杂 3D 场景和着色器代码生成上表现优异。作者分享了在开发工具中接入 K3 的步骤、构建 3D 场景的提示词公式,以及视觉循环测试流程。并建议开发者采用混合策略:用 Claude 处理快速逻辑,用 K3 应对复杂的 3D 空间计算,从而发挥两者最大优势。
本文是一篇手把手教程,讲解如何在不使用任何 3D 模型、贴图或照片的情况下,用 AI 编程助手(Claude Code)写代码生成一部 3 分 05 秒的亚马逊雨林竖屏纪录短片。作者介绍了三个关键方法:先画以米为单位的平面图作为总契约、把场景拆成 13 个区让多个 AI 并行施工、以及通过截图对比迭代改进。教程涵盖生成参考图、搭建地基(固定随机种子、统一材质光照)、多智能体分工、镜头安排、黄昏到月夜的光线变化、渲染成片及用开源 AI 模型配环境音的完整流程,并总结了常见坑与解决方案。
作者分享使用 Codex + Tripo AI + Headless Blender + Three.js 自动化生成 3D 游戏资产的第六天开发实录。文章分两部分:资产线部分介绍如何通过四视角原画定稿、穿装合成图确认、Prompt 工程约束等手段控制模型质量,并区分『用脚本修复』与『重新建模』两类问题,强调检测器必须直接运行游戏本身的代码;主线部分阐述如何通过『制度即代码』(41 条规则、21 个 CI 校验器)、决策记录机制管理多个 AI 协作开发,避免 AI 跑偏。还公开了累计消耗 4860 Tripo 积分的成本数据,以及从装备机制反推世界观的设计思路。
文章以开发者用AI在16天内将《小王子》做成3D探索游戏为例,讲解普通人如何借助AI独立完成一款游戏。作者按流程介绍七大环节:硬件只需普通电脑;策划阶段用Claude或Gemini通过对话生成游戏设计文档;引擎可选Three.js、Godot、Unity或虚幻;编程推荐Opus 5.5规划、Codex写代码,并搭配游戏开发Skill;美术用GPT Image、Tripo、Blender等生成与修整2D/3D资产;音频用Suno、ElevenLabs并注意商用授权;发行建议从微信/抖音小游戏切入,通过战绩卡片、好友排行等裂变设计获取流量。
作者分享了用 Codex CLI、Tripo AI、Headless Blender、gltfpack 和 Three.js/WebGPU 搭建自动化 3D 游戏资产生产线的完整过程。文章详细记录了角色骨骼标准化与换装拆件、怪物绑骨问题的程序化绕行方案(如用数学驱动蝙蝠翅膀动画)、武器挂点矩阵化、模型压缩优化等关键技术决策,最终将整批角色、怪物和装备资产控制在 16.48 MB。作者还探讨了选择动态漫画分镜而非传统 3D 地图的设计思路,提出核心方法论:不要自动化每个步骤,而要自动化整个结果,把一次性人工修复转化为可重复执行的参数化规则。
作者 Kobin 分享用 AI 逐步开发个人 3D 网站「观星台」的完整过程。文章从让 GPT 生成视觉效果图讲起,逐步拆解实现路径:先区分网页内容(HTML/CSS)与 Three.js 场景,再依次实现粒子签名、作品星座、由星点组成的粒子人物侧影,接着通过统一色板、亮暗关系和轻量 Bloom 提升画面质感,然后将滚动与章节状态绑定实现场景过渡,最后接入音乐让星空随节奏变化。每个阶段都给出可直接交给 AI 编码工具的练习指令与检查方法,适合想用 AI 入门 3D 网页创作的读者按序实践。
NVIDIA 推出 Jetson Agent Skills,将设备特定的平台知识注入 AI 辅助开发流程。边缘 AI 开发不仅涉及代码,还需处理硬件、内存、JetPack 版本、容器和部署约束。Jetson Agent Skill 是包含指令、参考资料、安全边界和辅助脚本的可检查包,分为 Device Skills(设备诊断、环境配置、模型服务、基准测试)和 BSP Skills(刷机前的平台定制)。文章介绍了基于 Codex 的完整工作流教程,从连接 Jetson Orin Nano 到构建本地运行的视觉语言模型(VLM)应用,并展示了 JetPack 7.2.1 中基于 Video Codec SDK 和 PyNvVideoCodec 的视频技能如何自动生成并验证编解码流水线,最终返回可复现的性能测量结果。
作者用 Claude 制作 3D 历史纪录短片,通过将制作经验封装成开源 skill(code-doc-film),把《郑和下西洋》片子的制作时间从 116 分钟压缩到 55 分钟,只需两句指令。skill 本质是一个包含说明文档和脚本的文件夹,核心是一张「翻车表」:记录镜头钻山、音画不同步、史实错误、渲染纯色等 7 类踩坑问题及自动化校验方案。文章同时坦承 skill 的局限:人物建模粗糙、未做过的题材仍慢、事实核对只保证有出处不保证正确。
文章系统讲解了如何用 Claude Opus 5.5 通过写代码的方式制作 AI 视频。作者指出 Opus 并不能直接生成视频,而是通过生成网页代码绘制每一帧画面,再截图合成为 MP4。文章详细介绍了七类实现方案:Canvas 2D、HTML/CSS/SVG、WebGL 着色器、Three.js、p5.js、HyperFrames/Remotion 和 Manim,并通过像素巫师、界面动效、游戏史短片、舞蹈视频、AI 发展史等五个案例拆解代码组合方式与提示词设计技巧,附完整提示词和开源 Skill,帮助零基础读者快速上手。
作者因 Claude 账号被封,无法使用 Opus 5.5 的代码动画玩法,于是尝试用 Codex 复现该路线:将参考视频交给 Codex 分析画法、编写剧本、拆分镜,最终用 p5.js 和 Canvas 生成动画并导出带中文旁白、配乐的 MP4。作者还将做法整理成开源 Skill(wtt-code-animation-studio),支持剧本编写、十种画风推荐与选择、配音、渲染导出等全流程,并验证了同一角色在扁平、沙画、粒子等画法下的多种组合,以及随机三种风格混合的新故事测试片。
作者分享了用 Claude Opus 5.5 通过代码逐帧渲染制作视频的经验,并开源了包含 39 种风格视频样片的 Lemo-opuscar 库。库内包含导演方法(DIRECTOR.md)、技术方法(TECHNIQUE.md)和 39 份风格文档。文章阐述了如何稳定出片的关键:agent 手里要有成熟的方法论,用户需求要说到点上。作者详细讲解了需求表述的六个要点(主题、故事、节奏、导演能力、素材、审阅检验),并提供了万能提示词模板,还针对非 Opus 5.5 用户给出了降低难度、拆分步骤、强弱模型协作等替代方案。
作者宝玉分享用 ChatGPT Pro 的 GPT 6 Astra 制作 3D 版《桃花源记》网页的完整过程。通过一套详细的提示词,让 AI 将课文拆成 20 幕,实现可拖动视角、跟随原文叙事的'循文入境'体验。针对 TTS 朗诵不佳的问题,改用央视李立宏的真人朗诵并配以 SRT 时间戳同步;再由 Codex 做工程化优化,将音频独立、更换真实环境音,文件从 5.6MB 缩至约 777KB。文章总结了几点体会:明确审美与验收标准比堆形容词更重要,声音是交互的一部分,不同 AI 工具分工协作。文末附有可复用的完整提示词模板,可套用于其他古文场景制作。