ขั้นตอนที่ 1: เตรียมสภาพแวดล้อม

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

เปิด Google Gemini (gemini.google.com) เวอร์ชันฟรี
เปิดตัวแก้ไขโค้ดออนไลน์อย่าง CodePen.io หรือ PlayCode.io ที่นี่เราจะทดสอบโค้ดที่สร้างขึ้นได้ทันทีโดยไม่ต้องสร้างหรือบันทึกไฟล์ HTML ใด ๆ

2

ขั้นตอนที่ 2: Master-Prompt เริ่มต้น

พรอมต์แรกสำคัญที่สุด เพราะเป็นตัวกำหนดกรอบให้ Gemini และตั้งค่าพื้นฐานทางเทคโนโลยี (Three.js จาก CDN ทุกอย่างอยู่ในไฟล์เดียว) ให้คัดลอกข้อความนี้แล้ววางลงใน Gemini:

คุณเป็นผู้เชี่ยวชาญด้าน WebGL และไลบรารี Three.js งานของคุณคือเขียนโค้ด HTML แบบสมบูรณ์ (รวม CSS และ JS ไว้ภายใน) สำหรับฉาก 3D ที่ทำงานได้จริง ข้อกำหนด: 1. สร้างวัตถุ 3D ที่หมุนอยู่ตรงกลาง (TorusKnot หรือ Icosahedron) 2. นำเข้า Three.js และ OrbitControls ผ่านลิงก์ CDN (unpkg หรือ cdnjs) ในแท็ก script 3. ต้องเป็น “ไฟล์เดี่ยว” – ทุกอย่างอยู่ในโค้ดก้อนเดียว ห้ามใช้ import maps 4. ห้ามใช้โมเดลภายนอก (GLTF) หรือเท็กซ์เจอร์ (JPG/PNG) ทั้งหมดต้องสร้างแบบ procedural ในโค้ด (MeshStandardMaterial, แสง, สี) 5. เพิ่มแสงแบบจุด (PointLight) และเงาแบบนุ่ม 6. ตั้งค่าพื้นหลังให้เป็นสีมืดมาก

3

ขั้นตอนที่ 3: รันและตรวจสอบ

เมื่อ Gemini สร้างโค้ดเสร็จแล้ว ให้คัดลอกโค้ดจากกรอบแสดงโค้ดด้านขวาบน ไปยังแท็บที่สอง (เช่น CodePen) แล้ววางโค้ดทั้งหมดลงเฉพาะในช่อง HTML เท่านั้น (ปล่อยช่อง CSS และ JS ให้ว่างไว้ เพราะโค้ดของเรามีครบทุกอย่างอยู่แล้ว)

เคล็ดลับ: คุณจะเห็นวัตถุ 3D ที่กำลังหมุนทันที ลองคลิกด้วยเมาส์แล้วลากดู – ด้วย OrbitControls คุณจะสามารถหมุนมุมมองรอบ ๆ วัตถุได้!

4

ขั้นตอนที่ 4: การวนปรับ (Iterate) แบบเรียลไทม์

ตอนนี้คือการทำงานจริงแบบเรียลไทม์ กลับไปที่ Gemini ไม่จำเป็นต้องเขียนโค้ดใหม่หรือส่งโค้ดเก่าให้มันอีก (มันจำได้อยู่แล้ว) แค่คุยกับมันต่อไปและค่อย ๆ เพิ่มความต้องการของคุณ ลองส่งข้อความเหล่านี้ทีละข้อ:

ยอดเยี่ยม ตอนนี้เปลี่ยนวัสดุของวัตถุจากสีทึบให้เป็นแบบ ‘Wireframe’ ที่เรืองแสง (โมเดลลวดลายตาข่าย) ด้วยสีฟ้านีออนและชมพูนีออน

ดีมาก ตอนนี้เพิ่มระบบอนุภาคที่หมุนช้า ๆ (Points และ PointsMaterial) เป็นฉากหลังของซีน เพื่อจำลองเป็นดวงดาวในอวกาศ

เยี่ยมเลย แล้วตอนนี้ให้ทำให้เมื่อฉันขยับเมาส์ สีของแสงจะเริ่มเปลี่ยนอย่างนุ่มนวลไปตามตำแหน่งของเคอร์เซอร์บนหน้าจอ

5

ขั้นตอนที่ 5: การแก้ปัญหา (Debugging)

เมื่อคุณปรับแก้โค้ดแบบเรียลไทม์ บางครั้ง AI อาจทำผิดพลาด และคุณจะเห็นแค่หน้าจอดำหรือขาวบน CodePen คุณไม่จำเป็นต้องรู้การเขียนโปรแกรม เพียงอธิบายปัญหาในแชทก็พอ:

โค้ดล่าสุดที่คุณส่งมาใช้งานไม่ได้ หน้าจอเป็นสีดำสนิทและไม่มีอะไรหมุนเลย ตรวจสอบดูว่าคุณโหลด OrbitControls ถูกต้องหรือไม่ และกล้องไม่ได้อยู่ภายในวัตถุ ลองแก้ไขแล้วส่งเวอร์ชันที่แก้ไขครบทั้งหมดมาให้ฉัน

เสร็จสิ้น! การบันทึกโปรเจกต์

เมื่อคุณพอใจกับผลลัพธ์ 100% แล้ว ให้คัดลอกโค้ดเวอร์ชันล่าสุดที่ใช้งานได้จาก CodePen บน Windows ให้เปิด Notepad หรือบน Mac ให้เปิด TextEdit วางโค้ดลงไป แล้วบันทึกไฟล์เป็น ‘muj_3D_web.html’ เสร็จแล้ว! คุณมีแอป 3D ของตัวเองแล้ว

Real-time Plán: 3D Gemini

การเข้าถึงแอปถูกล็อกไว้

แผนแบบเรียลไทม์: สร้างเว็บ 3D ด้วย Gemini