Kenerate AI
返回提示词库
奢华 3D 腕表产品体验页面 (Next.js + Three.js) 1
Gemini 3建站

奢华 3D 腕表产品体验页面 (Next.js + Three.js)

一个详细的日文提示,用于设计一个豪华 3D 产品体验网页,面向高端手表,使用 Next.js、Three.js、React Three Fiber、GLSL,并包含特定的滚动部分和着色器要求。

提示词
为一款奢华腕表设计一个 3D 产品体验页面。
**目标用户:** 30-50 岁的富裕客户、腕表爱好者和商务人士。
**品牌调性:** 奢华 × 科技(现代、精致的高端感受)。
滚动体验(5 个部分):
英雄部分 – 腕表从黑暗中缓缓浮现,旋转着进入光线。实现全息效果和菲涅尔反射,并使用自定义着色器。
细节放大 – 表盘特写。使用 GLSL 实现金属反射、视差映射和实时光泽度。
机械分解 – 腕表分解,内部机芯在空中漂浮。使用置换着色器实现能量场效果,并为每个部件添加发光效果。
材质体验 – 在不同的材质变体之间切换。以基于物理的方式,使用 PBR 着色器表达金属感、玻璃折射和钛金属的哑光纹理。
结尾 – 腕表重新组装,背景是使用自定义着色器制作的抽象渐变网格。应用后期处理,如泛光和景深。
**技术栈:** Next.js 15 + Three.js + React Three Fiber + GLSL (自定义着色器) + react-postprocessing + Lenis。
着色器要求:
菲涅尔反射着色器(边缘光效果)
PBR 材质着色器(粗糙度、金属度、AO)
全息着色器(虹彩干涉效果)
置换着色器(波动和扭曲效果)
自定义背景着色器(渐变噪声)
后期处理:泛光 (Bloom)、色差 (ChromaticAberration)、景深 (DepthOfField)、晕影 (Vignette)。
请为以下各项提出具体的数值:
每个部分的滚动范围(以 % 或 vh 为单位)
动画参数(位置、旋转、缩放等的起始/结束值)
缓动函数(缓动类型)
相机 FOV、位置和目标值
灯光设置(强度、颜色、位置)
每个着色器的 Uniform 值(时间进程、滚动进度、色相、强度等)。
作者
@Shin@プログラミングチュートリアル查看原帖
发布时间
2025年10月9日

相似提示词

生成 40 个带下载按钮的简单 SVG 图标
Gemini 3

生成 40 个带下载按钮的简单 SVG 图标

生成 {argument name="icon_count_en" default="40"} 个简单且高度通用的 SVG 格式图标。请务必在画布上绘制它们。颜色应为 {argument name="icon_color_en" default="light blue"}。背景应为 {argument name="background_color_en" default="white"}。使用具有 Material Design 风格的线条式图标。添加一个按钮,让用户可以下载每个 SVG 图标的 SVG 数据。

@KAWAI
中国传统色彩每日网络应用
Gemini 3

中国传统色彩每日网络应用

生成一个网页应用程序,每天介绍一种{argument name="color_system_en" default="传统中国色彩"}(例如:{argument name="example_color_1_en" default="天青"}、{argument name="example_color_2_en" default="胭脂"}、{argument name="example_color_3_en" default="黛螺"}),并配以相关的古典诗词、文物插图或自然风光。

@松果先森
复古摩托罗拉寻呼机打字机网页应用
Gemini 3

复古摩托罗拉寻呼机打字机网页应用

请帮我创建一个复古打字机风格的网页应用,主题围绕着 {argument name="device_name_en" default="Motorola Fix Beeper"}。在页面中央显示一个打字机,它可以接收用户输入的文本,并以卡片的形式生成,带有类似于打字机缓慢打字的效果,并允许将卡片拖动到空白区域。

@被减数
奢华智能手表 Three.js 动画着陆页
Gemini 3

奢华智能手表 Three.js 动画着陆页

使用 Three.js、Anime.js 和 Tailwind 为一个 {argument name="product_type_en" default="奢华智能手表"} 页面创建一个 HTML 文件。制作一个 3D {argument name="main_object_en" default="手表"} 模型,一个带有圆形孔洞的深色纹理叠加层,显示 {argument name="main_object_background_en" default="米色背景上的手表"},并在页面加载时让标题和大数字滑入。 让页面更专业。用一个加载时打开的光圈替换静态孔洞。在 {argument name="focus_area_en" default="表盘"} 上添加一个带反射的玻璃罩,改进金属材质,添加鼠标视差效果,使 {argument name="parallax_target_en" default="手表"} 随光标旋转,并在 {argument name="dial_area_en" default="表盘"} 上绘制时间及健身环。 将单屏页面转换为多段滚动网站。当用户滚动时,动画化 3D {argument name="scroll_object_en" default="手表"},使其移动和旋转以匹配每个部分。保持 3D 画布和背景固定,而文本在其上方滚动;只有 {argument name="moving_element_en" default="手表"} 移动。 - 固定画布:定位画布

@Harshith
AI 汉服衣橱虚拟试穿应用
Gemini 3

AI 汉服衣橱虚拟试穿应用

开发一款中文 AI 汉服衣橱应用。该应用使用 AI 换脸或 3D 人体塑形技术。用户上传一张照片后,即可一键“试穿”来自不同朝代(如唐、宋、明)的汉服,或自行定制发簪和妆容。

@松果先森
中国 Twitter KOL 排行榜落地页
Gemini 3

中国 Twitter KOL 排行榜落地页

作为一名对美学有强烈追求的前端工程师,请为“{argument name="leaderboard_name_en" default="Chinese Twitter KOL Leaderboard"}”创建一个网站着陆页。设计应高度精致,采用极简配色方案、深色模式和高对比度。从网络获取数据源。 使用 Tailwind CSS + HTML5,添加动画,并直接输出 HTML 代码。

@katon
带混合和求解控制的 3D 魔方网页应用
Gemini 3

带混合和求解控制的 3D 魔方网页应用

构建一个 3D {argument name="puzzle_type_en" default="魔方"},包含一个用于打乱魔方的“打乱”按钮,以及一个“解决”按钮来解开谜题。同时允许用户手动操作并自行解开谜题。

@Alan Shiflett
复古宝丽来风格相机网络应用
Gemini 3

复古宝丽来风格相机网络应用

请帮我创建一个复古宝丽来风格的相机网页应用。在页面的左下角,显示一个可以连接网络摄像头并显示实时预览的相机。当点击快门按钮时,一张相纸会从相机顶部缓慢弹出,照片会从模糊逐渐变得清晰。用户可以将冲洗好的照片从相机上方拖动到页面中相机以外的区域,从而创建出照片墙般的效果。

@饼干哥哥AGI(2.0)

部分提示词收录自 X 平台创作者,版权归原作者所有。