MonkeyCodeMonkeyCode-AI用户作品集
技术交流群 Github开始智能编程
MonkeyCode 用户作品集›个人展示›作品集

嘉·阿旭·豪

作者 嘉豪累计访问 10近 7 日访问 6
访问站点开始智能编程
// preview
嘉·阿旭·豪 封面嘉·阿旭·豪 封面嘉·阿旭·豪 封面
// description

一张会随角度转动的双图光栅收藏卡,两种形态自由切换

这是一个在浏览器中用 Three.js 实时渲染的数字收藏卡展示页,作品名为《嘉豪 · 雨中操场》。页面中央是竖版 3D 卡片,卡面绘制了雨天校园操场与一位穿黑色连帽卫衣、戴黑色口罩的人物。站点提供雨中伫立与雨中奔跑两种卡面形态,用户既能点击状态按钮切换,也能用鼠标左右拖动卡面,让光栅效果随角度在两态之间过渡。右侧面板可分别调节镭射、粒子与轮廓光三条光效,并提供关闭光效、复位、自动旋转、背面翻转、原画对照与画面保存等操作。右上角的对照视图会把两张原始插画并排展示,方便比较两态差异。

核心亮点

双态光栅卡面

转动角度即切换伫立与奔跑两态

三档光效可调

镭射、粒子、轮廓光实时调整

实时 3D 渲染

可翻面、自动旋转与复位

原画对照视图

并排查看两张原始插画

画面保存导出

一键保存当前卡片画面

如何使用

  1. 打开并认识卡面

    进入页面后,中央是一张竖版数字收藏卡,右侧为标题与全部控制项,底部显示鼠标与键盘操作提示。拖动卡面前的滑块或在卡片上左右拖动,即可看到卡面随角度变化,这是理解光栅效果的主要方式。

  2. 切换两种形态

    右侧提供雨中伫立与雨中奔跑两个状态按钮,点击即可直接切到对应卡面。两种形态共用同一人物与背景,差异在姿态,可以配合转动滑杆观察过渡过程。

  3. 调节光效

    光效区域有镭射、粒子、轮廓光三条滑杆,拖动后画面会立刻更新,粒子表现为漂浮光点,轮廓光勾出人物边缘,镭射影响卡面反光。需要干净画面时可点击关闭光效。

  4. 翻面与自动旋转

    点击背面按钮可查看卡片另一面,自动按钮会让卡片持续往复旋转,便于观察光栅过渡,复位按钮把角度与状态恢复初始。

  5. 对照原画与保存

    点击右上角对照原画会打开对比视图,把两张原始插画并排显示并附短句说明,浏览后点关闭返回。想留存当前效果时,点击保存即可导出画面。

作品评分3.7
点击星级评分
// similar sites

相似站点

幻光典藏 · 嘉豪赛博镭射卡
18
查看详情

幻光典藏 · 嘉豪赛博镭射卡

作者: anonymous

可拖动转卡、翻面赏背面的赛博朋克全息镭射卡,镭射光泽与视差随视角实时变化。

作品集3.5·AI 评分
无尽绽放 · Infinite Bloom
221
查看详情

无尽绽放 · Infinite Bloom

作者: Cat

一朵由 Three.js 程序化生成的牡丹,粒子与光交织的永恒花海。

作品集3.2·2 次评分
嘉·阿旭·豪
1
查看详情

嘉·阿旭·豪

作者: 嘉豪

一张双图光栅收藏卡:拖动卡面,雨中的他从伫立转为奔跑。

作品集3.7·AI 评分
地球
198
查看详情

地球

作者: kiko

一个可旋转缩放的 3D 地球展示页,呈现电影感太空场景与大气层效果。

作品集1.3·6 次评分
Raymarching 演示
100
查看详情

Raymarching 演示

作者: anonymous

基于 Three.js 的纯 GLSL Raymarching 渲染演示,包含 SDF 图元、平滑混合与实时光照

作品集2.9·AI 评分
Snowfall
101
查看详情

Snowfall

作者: anonymous

Canvas 2D 飘雪动画,包含雪花飘落、月色光晕、远山剪影

作品集1.5·2 次评分
// join the community

把你的作品也搬上来

欢迎加群交流。有问题反馈,或用 MonkeyCode 开发了网站想要分享,可以扫码加群联系管理员。

Github 开源仓库
企业微信
企业微信
飞书
飞书
钉钉
钉钉
MonkeyCodeMonkeyCode · 用户作品集
{ 使用 MonkeyCode 构建 }
开始智能编程Github技术交流群
输入想找的应用类型,比如"五子棋"、"做封面图"、"管理待办"
没有找到想要的应用?马上用 MonkeyCode 做一个