ขั้นที่ 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. ต้องเป็น “Single file” – ทุกอย่างอยู่ในโค้ดชุดเดียว ห้ามใช้ import maps 4. ห้ามใช้โมเดลภายนอก (GLTF) หรือเท็กซ์เจอร์ (JPG/PNG) ทั้งหมดต้องสร้างแบบ procedural ในโค้ด (MeshStandardMaterial, แสง, สี) 5. เพิ่มแสงแบบจุด (PointLight) และเงาแบบนุ่ม 6. ตั้งค่าพื้นหลังให้เป็นสีมืดมาก

3

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

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

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

4

ขั้นที่ 4: การปรับแก้แบบเรียลไทม์

ตอนนี้เริ่มเป็นการทำงานแบบเรียลไทม์จริงๆ กลับไปที่ 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

แผนแบบ Real-time: สร้างเว็บ 3D ด้วย Gemini