GoodCase.aiGoodCase.ai中文 AI Case 证据库
案例Skills创作者收藏投稿
中文EN
Agent 接入 →
GoodCase.ai · 中文 AI Case 证据库案例库加载中。
更新日志反馈
GoodCase.aiGoodCase.ai中文 AI Case 证据库
案例Skills创作者收藏投稿
中文EN
Agent 接入 →
AI 编程(UI)X2025-11-18证据 L1#youmind#Gemini 3 Pro#human-reviewedGemini 3 Pro

从一张图片生成 Three.js 体素艺术场景

IG创作者Ian Goodfellow →

用一张参考图代替文字描述整套视觉风格,只留一句话要求把图片转成体素艺术风格的 Three.js 单页代码,考验的是模型的图生代码能力而不是文字理解能力,和纯文字提示词是完全不同的技术路径。

查看原始来源 ↗
原帖 ♥ 2.9k

Prompt

我提供了一张图片。请根据这张图片编写一个漂亮的体素艺术场景。用 Three.js 写成单页代码

复用方法

关键决定

整条提示词的核心决定是完全不用文字描述视觉风格,把风格信息全部压缩进一张上传的参考图里,文字部分只负责说明任务类型体素艺术、输出格式 Three.js 单页代码,这种图生代码的技术路径考验的是模型的跨模态理解能力,而不是提示词写作能力本身,属于和其他文字驱动型案例完全不同的技术分类。要求输出为单页文件这个约束很关键,它把结果限制在了一个可以直接分享和运行的独立产物,而不是需要额外搭建环境的代码片段。

换到你的题材

这条案例的骨架就是参考图加任务类型加输出格式三样,图片可以换成任何想要转换风格的原始图像,输出格式可以从体素艺术换成低多边形、像素风格等其他程序化艺术风格,核心是被转换的视觉风格本身要有清晰的几何规律,体素、像素这类风格是规则网格,比水彩、油画这类风格更容易被代码化表达。

容易翻车

图生代码类任务对参考图的清晰度和构图复杂度非常敏感,参考图里元素太多或者太杂乱时,生成的体素场景经常会丢失大量细节或者结构错乱,复测时优先用主体简单、背景干净的参考图。作为单页 Three.js 代码,不同浏览器的 WebGL 兼容性也会影响最终效果,复测时最好在多个浏览器里各跑一次。

建议模型

Gemini 3 Pro
稳定度
成本
低

Derived Skill

这个 Case 可以学走的方法。

Skill 只从多个已发布 Case 的重复模式中派生,不是另一套投稿内容。

通用 Skill3D / 动效 Hero查看证据 →
IG

创作者

Ian Goodfellow

Ian Goodfellow 在X输出 UI 工程化实践,《从一张图片生成 Three.js 体素艺术场景》搭 Gemini 3 Pro 出方案,带可复现代码。

编辑精选AI 编程(UI)来源互动高低成本可学
查看创作者 →

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →
Gemini 模拟理论交互网站
AI 编程(UI)X@chetaslua →

Gemini 模拟理论交互网站

@chetaslua 使用 Gemini 3 Pro完成的网页案例,包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 HeroSkill · 落地页信息结构

提示语

🚨 Gemini 3.0 pro - ecpt checkpoint Holy shit,我们的 Prompt 和想象力就是唯一的限制,去看看这个网站。 Prompt:编写一个关于模拟理论的神秘网站。让它感觉像现实正在实时渲染——实体物体下方出现线框网格,纹理逐步加载,元素短暂漂浮的物理故障。加入 Matrix 风格的代码雨背景,让各个区块在“已渲染”和“源代码”视图之间闪烁切换,并加入环境计算机处理声音;最后设计一个元叙事时刻,让网站承认自己正在被观看。把它设计成一位

来源热度
73
稳定度
投票催复测
查看 Case →
Mediapipe 实时人脸激光眼特效网页
AI 编程(UI)X2025/11/19愚瞳 | winterx →

Mediapipe 实时人脸激光眼特效网页

三行技术栈清单直接对应三个实现步骤:摄像头取流、Mediapipe 抓人脸关键点、Three.js 按关键点实时渲染激光眼特效,提示词本身就是一份技术方案而不是效果描述,作者后来还把它做成了开源网页。

Skill · 落地页信息结构

提示语

使用电脑的前置摄像头 使用 mediapipe 库捕捉面部关键点 使用 threejs,根据 mediapipe 提供的实时 3D 关键点信息,为摄像头捕捉到的面部应用激光眼特效

来源热度
81
稳定度
投票催复测
查看 Case →
一句话新粗野主义网页
AI 编程(UI)X2025/11/13Dorksense →

一句话新粗野主义网页

三句话生成一整个可交互网页:风格、动效、色彩三个关键词加一个页面标题,证明 Gemini 3 对新粗野主义这种视觉语言高度共识的风格,短提示词也能跑出完整效果,而不需要逐段拆解排版要求。

Skill · 落地页信息结构

提示语

做一个新粗野主义风格的网页,尽可能极具创意,把限制推到极致。加上流畅的滚动动画,加上花哨的配色和 Tailwind CSS 样式。做成响应式的。页面标题是 dorksense

来源热度
86
稳定度
投票催复测
查看 Case →
GoodCase.ai · 中文 AI Case 证据库Case 详情页把作品、方法、作者与复测证据放在同一条阅读路径里。
更新日志反馈