Wiki 知识库

全部文档 / 标签: WebGL

11 篇
清除

小白 3D 创作系列 02 -- 用 AI 开发会随音乐舞动的 3D 网站

作者 Kobin 分享用 AI 逐步开发个人 3D 网站「观星台」的完整过程。文章从让 GPT 生成视觉效果图讲起,逐步拆解实现路径:先区分网页内容(HTML/CSS)与 Three.js 场景,再依次实现粒子签名、作品星座、由星点组成的粒子人物侧影,接着通过统一色板、亮暗关系和轻量 Bloom 提升画面质感,然后将滚动与章节状态绑定实现场景过渡,最后接入音乐让星空随节奏变化。每个阶段都给出可直接交给 AI 编码工具的练习指令与检查方法,适合想用 AI 入门 3D 网页创作的读者按序实践。

技术 › 前端 Kobin 2026-10-1132.6 KB 9.1K 44 84

把照片变成复古印刷:我做了一个小工具,免费开源!

作者开源了一个名为「孔版印刷机」的网页小工具,可将照片转成复古孔版印刷风格。工具提供7组控制项:油墨颜色、色彩数量、明暗阈值、网点大小、套印偏移、纸张颗粒和效果强度,支持原图/效果图对比查看与随机配色。图片在浏览器本地处理,使用WebGL加速并提供本地Worker回退,可导出原尺寸PNG。项目采用MIT许可,源码托管在GitHub,可直接打开index.html使用,为内容创作者提供了新的封面风格选择,也是动手做工具的起点。

技术 › 工具与效率 Derek Wen|德里克文 2026-10-035.0 KB 976 7 78

我把《红楼梦》里的大观园,做成了一个能走进去的 3D 世界

作者将《红楼梦》中的大观园重建为可在浏览器中漫游的三维世界,把文本与空间放进同一窗口。项目整理了二十处景致,涵盖五十九回原文、三十三首诗词和一百五十八位人物。读者可点选景致查看对应原文与诗笺,跟随第十七回贾政游园路线导览,或在漫步模式中自由行走,并可切换四季、昼夜与天气共三十六种环境状态。整个项目依据原著游园路线与北京大观园复建格局推定,最终打包为约 2.7 MB 的 HTML 文件,离线也能体验,成为一份可交互、可行走的阅读批注。

技术 › 前端 谁是专家 2026-09-295.8 KB 20.5K 74 72

开源了39种风格视频库后,我学会了如何用Opus5.5稳定出片

作者分享了用 Claude Opus 5.5 通过代码逐帧渲染制作视频的经验,并开源了包含 39 种风格视频样片的 Lemo-opuscar 库。库内包含导演方法(DIRECTOR.md)、技术方法(TECHNIQUE.md)和 39 份风格文档。文章阐述了如何稳定出片的关键:agent 手里要有成熟的方法论,用户需求要说到点上。作者详细讲解了需求表述的六个要点(主题、故事、节奏、导演能力、素材、审阅检验),并提供了万能提示词模板,还针对非 Opus 5.5 用户给出了降低难度、拆分步骤、强弱模型协作等替代方案。

技术 › Claude Lemomo 2026-09-2618.7 KB 157.5K 1.3K 93

用 Astra 高保真复刻视觉动效的 4 个实操案例与提示词秘诀

作者通过四个实操案例展示如何用 Astra 进行视觉动效高保真复刻:高级动效视频复刻、业务介绍动效视频改写、ElevenLabs 动态背景复刻(WebGL+GLSL 技术栈)以及语音交互光球效果移植。文章强调分步验证、单点把控的方法论,如先验证背景再加图文音轨、把视觉效果与交互功能拆开验证等,并分享核心提示词「一边参考原片一边修改直到近乎一样」,总结 AI 自查与人工定点反馈两种协作路径,附通用 Prompt 模板与止损建议,展示普通人无需懂代码也能参与 AI 视觉制作的生产力价值。

技术 › 前端 罗歌 2026-09-1310.9 KB 5.1K 37 83

小白也能看懂:iPhone Duo 网页交互效果是怎么制作的?

作者受苹果 iPhone Duo 官网折叠手机交互动效吸引,借助 Codex 复刻并拆解其实现原理。通过网页源码和网络请求证据,确认核心是实时 3D 渲染(Lotus 架构封装 Three.js),而非视频或图片序列。文章讲解了模型、贴图、场景配置、渲染引擎的组成,滑块 0 到 1 数值如何驱动铰链折叠与运镜,以及弹簧回弹、端点磁吸等物理拟真细节带来的「苹果高级感」,并分享了用 AI 辅助翻源码、复现交互和排错的完整学习方法。

技术 › 前端 卡尔森 2026-09-1013.9 KB 4.2K 18 83

Day 6 building the Figma for hardware

作者正在开发一款硬件设计工具,被称为“硬件领域的 Figma”。本文是第 6 天的构建日志,重点研究了透明外壳设计:探讨外壳厚度、折射、色调、磨砂玻璃、光学层以及从小开口到凸透镜等多种窗口形状对设备内部可视性的影响。目标是让透明度也实现参数化,让设计者可以控制硬件展示内部组件的方式,使设备内部成为设计的一部分。整个工具完全在网页端实时运行,未来还将包含发布等更多功能,不仅是美学工具。

技术 › 前端 Tykra (@ty_kra_lab) 2026-09-081.8 KB 51

Kimi K3 3D WebGL 开发配置与提示词指南

文章详细介绍了如何利用 Kimi K3 模型开发 3D WebGL 应用。相较于 Claude 和 GPT-5.6,K3 在 Three.js、WebGPU 等复杂 3D 场景和着色器代码生成上表现优异。作者分享了在开发工具中接入 K3 的步骤、构建 3D 场景的提示词公式,以及视觉循环测试流程。并建议开发者采用混合策略:用 Claude 处理快速逻辑,用 K3 应对复杂的 3D 空间计算,从而发挥两者最大优势。

技术 › 前端 Nazar 2026-08-096.9 KB 5.8K 10 83

跟 Opus 4.8 打的有来有回?!Kimi K3 首测

本文评测了全新上线的 Kimi K3 模型。作者选取了 3D 玻璃折射、WebGL Shader、视差滚动及家具网页动效四个高难度前端场景,与 Claude Opus 4.8 进行对比。结果显示,K3 在多模态理解和自检修正上表现优异,能以 Sonnet 级价格提供接近 Opus 的性能,整体表现惊艳。

技术 › LLM 歸藏 2026-07-1710.6 KB 157.8K 89