Kế hoạch thời gian thực: Web 3D với Gemini
Hãy quên các trình tạo prompt đi. Đây là kế hoạch tương tác hoàn chỉnh, từng bước một. Từ ô chat trống cho đến trải nghiệm 3D tương tác – chỉ bằng cuộc trò chuyện với trí tuệ nhân tạo theo thời gian thực.
Bước 1: Chuẩn bị môi trường
Bạn không cần cài đặt gì trên máy tính. Toàn bộ quy trình sẽ chạy hoàn toàn trong trình duyệt. Để lặp nhanh nhất, hãy mở hai tab cạnh nhau:
- Mở Google Gemini miễn phí (gemini.google.com).
- Mở trình chỉnh sửa mã trực tuyến CodePen.io hoặc PlayCode.io. Ở đây chúng ta sẽ kiểm thử ngay lập tức mã được tạo ra mà không cần tạo và lưu các tệp HTML.
Bước 2: Master-Prompt khởi đầu
Prompt đầu tiên là quan trọng nhất. Nó xác định giới hạn cho Gemini và thiết lập nền tảng công nghệ (Three.js từ CDN, tất cả trong một tệp). Sao chép đoạn văn này và dán vào Gemini:
Bạn là chuyên gia về WebGL và thư viện Three.js. Nhiệm vụ của bạn là viết mã HTML hoàn chỉnh (bao gồm cả CSS và JS bên trong) cho một cảnh 3D hoạt động được. Yêu cầu: 1. Tạo một đối tượng 3D xoay ở giữa (TorusKnot hoặc Icosahedron). 2. Import Three.js và OrbitControls thông qua CDN link (unpkg hoặc cdnjs) trong thẻ script. 3. Phải là “single file” – mọi thứ trong một khối mã, không dùng import maps. 4. Không dùng mô hình ngoài (GLTF) hay texture (JPG/PNG). Hãy tạo mọi thứ một cách thủ tục trong mã (MeshStandardMaterial, đèn, màu sắc). 5. Thêm đèn điểm (PointLight) và bóng đổ nhẹ. 6. Đặt nền thành một màu rất tối.
Bước 3: Chạy và kiểm tra
Ngay khi Gemini tạo mã, hãy sao chép nó ở góc trên bên phải trong khung mã. Chuyển sang tab thứ hai (ví dụ CodePen) và dán toàn bộ mã CHỈ vào ô HTML (để trống các ô CSS và JS, vì mã của chúng ta đã chứa mọi thứ).
Mẹo: Bạn sẽ thấy ngay đối tượng 3D đang xoay. Hãy thử nhấp chuột và kéo – nhờ OrbitControls mà bạn có thể xoay nó!
Bước 4: Lặp (iterace) theo thời gian thực
Giờ mới là lúc bắt đầu công việc thời gian thực. Quay lại Gemini. Không cần viết mã mới hay gửi lại mã cũ (nó vẫn nhớ). Chỉ cần trò chuyện và dần dần thêm yêu cầu. Hãy lần lượt thử các tin nhắn sau:
Cái này rất tuyệt. Bây giờ hãy đổi chất liệu của đối tượng từ màu đặc sang “Wireframe” phát sáng (mô hình lưới) với màu xanh neon và hồng.
Tuyệt vời. Bây giờ hãy thêm vào nền của cảnh một hệ thống hạt (Points và PointsMaterial) xoay chậm, mô phỏng các vì sao trong không gian.
Xuất sắc. Và bây giờ hãy làm sao cho khi tôi di chuyển chuột, màu sắc của các nguồn sáng bắt đầu thay đổi mượt mà theo vị trí con trỏ trên màn hình.
Bước 5: Giải quyết vấn đề (Debugging)
Khi bạn chỉnh sửa mã theo thời gian thực, đôi khi AI sẽ mắc lỗi và trên CodePen bạn chỉ thấy một màn hình đen hoặc trắng. Bạn không cần biết lập trình, chỉ cần mô tả vấn đề vào ô chat:
Đoạn mã cuối cùng bạn gửi không hoạt động. Màn hình hoàn toàn đen và không có gì xoay. Hãy kiểm tra xem bạn đã nạp OrbitControls đúng chưa và liệu camera có nằm bên trong đối tượng hay không. Hãy thử sửa và gửi lại cho tôi toàn bộ phiên bản đã chỉnh sửa.
Hoàn tất! Lưu dự án
Khi bạn đã hài lòng 100% với kết quả, hãy sao chép đoạn mã cuối cùng hoạt động tốt từ CodePen. Trên Windows, mở Notepad hoặc trên Mac mở TextEdit, dán mã và lưu tệp với tên “muj_3D_web.html”. Xong! Bạn đã có ứng dụng 3D của riêng mình.