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@プログラミングチュートリアル查看原帖
发布时间: 2026年2月5日

相似提示词

Gemini 3

特斯拉 FSD 道路识别的交互式 SVG 演示

使用 SVG 绘制一个动态、交互式的演示，展示 Tesla FSD 如何识别道路。

@余温

Gemini 3

具有交互式响应式设计的企业级着陆页

为 {argument name="business_description_en" default="[DESCRIBE YOUR BUSINESS]"} 生成一个企业级的专业着陆页。添加交互元素、动画，并使其完全响应。请给我惊喜，发挥创意，并逐步完成。

@God of Prompt

Gemini 3

在 Three.js 中使用音频响应粒子渲染 Raymarched Mandelbulb 分形

在 GLSL 中创建一个光线步进的 Mandelbulb 分形，用 {argument name="particle_count_en" default="12,000"} 个实例化粒子将其包围，使其对我的麦克风音频做出反应，并添加 Unreal Bloom。

@SRKDAN

Gemini 3

构建一个受 Keep 启发的中文“健身课程”网页：包含全屏运动员英雄图片、透明的固定导航栏、中文胶囊标签分类以及中文课程卡片网格。每张课程卡片对应一个训练计划；参考 Pamela、周六野、韩小四、Jojie、刘畊宏等创作者的课程风格，设计中文标题以及难度和时长标签。点击卡片时，在页面内打开一个课程预览视频播放器，其内容严格匹配卡片信息。整体设计应保持简约而不失细节，通过流畅的滚动和悬停动画、柔和的渐变和精致的排版，营造高端的中文体验。使用 Tailwind CSS 实现完全响应式布局。

@老白（每日干货分享✊）