Gemini 3建站

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

一个详细的多步骤提示序列，用于 Gemini 3 Pro 构建一个使用 Three.js、Anime.js 和 Tailwind 的奢华智能手表着陆页，然后将其完善为一个具有高级动画和交互的多部分滚动网站。

提示词

使用 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 查看原帖
发布时间: 2025年10月30日

相似提示词

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 实现完全响应式布局。

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