หน้าเว็บ

หน้าประสบการณ์ผลิตภัณฑ์นาฬิกา 3D สุดหรู (Next.js + Three.js)

พรอมต์ภาษาญี่ปุ่นแบบยาวและละเอียดสำหรับการออกแบบหน้าเว็บประสบการณ์ผลิตภัณฑ์ 3D สุดหรูสำหรับนาฬิการะดับไฮเอนด์ โดยใช้ Next.js, Three.js, React Three Fiber, GLSL และข้อกำหนดเฉพาะสำหรับส่วนการเลื่อนและเชเดอร์

สร้างเว็บเพจด้วยพรอมต์นี้

พรอมต์หน้าประสบการณ์ผลิตภัณฑ์นาฬิกา 3D สุดหรู (Next.js + Three.js)

ออกแบบหน้าประสบการณ์ผลิตภัณฑ์ 3D สำหรับนาฬิกาข้อมือสุดหรู
**กลุ่มผู้ใช้เป้าหมาย:** ลูกค้าผู้มั่งคั่ง ผู้ที่ชื่นชอบนาฬิกา และนักธุรกิจ อายุ 30–50 ปี
**โทนเสียงของแบรนด์:** หรูหรา × เทคโนโลยี (ให้ความรู้สึกทันสมัย ซับซ้อน และระดับไฮเอนด์)
ประสบการณ์การเลื่อน (5 ส่วน):
ส่วน Hero – นาฬิกาข้อมือค่อยๆ ปรากฏขึ้นจากความมืดสู่แสงสว่างพร้อมกับการหมุน ใช้เอฟเฟกต์โฮโลแกรมและการสะท้อนแบบ Fresnel ด้วย custom shaders
การซูมรายละเอียด – ภาพระยะใกล้ของหน้าปัด ใช้ GLSL เพื่อให้ได้การสะท้อนแบบโลหะ, parallax mapping และความเงางามแบบเรียลไทม์
การแยกกลไก – นาฬิกาจะแยกชิ้นส่วนและกลไกภายในจะลอยอยู่ในอวกาศ ใช้ displacement shader สำหรับเอฟเฟกต์สนามพลังงาน และเพิ่มเอฟเฟกต์เรืองแสงให้กับแต่ละส่วน
ประสบการณ์วัสดุ – สลับระหว่างวัสดุที่แตกต่างกัน แสดงความมันวาวของโลหะ, การหักเหของแสงในแก้ว และพื้นผิวด้านของไทเทเนียมด้วย PBR shaders ในลักษณะที่อิงตามหลักฟิสิกส์
ส่วนท้าย – นาฬิกาประกอบกลับคืน โดยมีพื้นหลังเป็น abstract gradient mesh ที่สร้างด้วย custom shader ใช้ post-processing เช่น bloom และ depth of field
**Tech stack:** Next.js 15 + Three.js + React Three Fiber + GLSL (custom shaders) + react-postprocessing + Lenis
ข้อกำหนดของ Shader:
Fresnel reflection shader (เอฟเฟกต์ rim-light)
PBR material shader (roughness, metallic, AO)
Holographic shader (เอฟเฟกต์การรบกวนแบบสีรุ้ง)
Displacement shader (เอฟเฟกต์การโบกและบิดเบือน)
Custom background shader (gradient noise)
Post-process: Bloom, ChromaticAberration, DepthOfField, Vignette
โปรดเสนอค่าตัวเลขเฉพาะสำหรับ:
ช่วงการเลื่อนของแต่ละส่วน (ในหน่วย % หรือ vh)
พารามิเตอร์แอนิเมชัน (ค่าเริ่มต้น/สิ้นสุดสำหรับตำแหน่ง, การหมุน, สเกล ฯลฯ)
ฟังก์ชัน Easing (ประเภท ease)
FOV ของกล้อง, ตำแหน่ง และค่าเป้าหมาย
การตั้งค่าแสง (ความเข้ม, สี, ตำแหน่ง)
ค่า Uniform สำหรับแต่ละ shader (ความคืบหน้าของเวลา, ความคืบหน้าของการเลื่อน, hue, ความเข้ม ฯลฯ)

วิธีใช้ prompt นี้

1
คัดลอก prompt เต็มด้านบน
2
เปิดแพลตฟอร์มที่รองรับ Gemini 3 Pro เช่น YouMind แล้ววาง prompt ลงไป
3
เปลี่ยนหัวข้อ สไตล์ หรือรายละเอียดให้ตรงไอเดียของคุณ แล้วสร้าง

นี่คือ AI prompt ฟรีจากคลัง prompt ของ YouMind สำรวจ เว็บเพจ prompt อีกนับพันรายการ ทั้งหมดคัดลอกและปรับใช้ได้ฟรี

ดู เว็บเพจ prompt เพิ่มเติม

เพิ่มเติมจาก Gemini 3 Pro

ฟีเจอร์พรอมต์เพิ่มเติม

คลัง AI

ค้นหา prompt ด้วย AI

ให้ AI ช่วยค้นหา prompt หลายหมื่นรายการ กรองตามโมเดล ช่วงเวลา คีย์เวิร์ด และจัดเรียงตามยอดมีส่วนร่วม เช่น ยอดวิว ยอดบันทึก ยอดแชร์ และอื่นๆ

ลองใช้ฟรี

เครื่องมือด้านภาพ

รูปภาพเป็นพรอมต์

เปลี่ยนรูปภาพใดก็ได้ให้เป็นพรอมต์ภาพ AI แบบละเอียด เครื่องมือแปลงรูปภาพเป็นพรอมต์ฟรีจะวิเคราะห์องค์ประกอบ สไตล์ และแสง ให้คุณสร้างลุคเดิมซ้ำได้ในไม่กี่วินาที

แปลงรูปภาพเป็นพรอมต์