Quyền truy cập ứng dụng đã bị khóa
Để truy cập hướng dẫn 3D này, trước tiên bạn phải đăng ký kênh YouTube của chúng tôi.
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 trong 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 soạn thảo mã online CodePen.io hoặc PlayCode.io. Ở đây chúng ta sẽ test ngay 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ó đặt ranh giới 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 bả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 qua link CDN (unpkg hoặc cdnjs) trong thẻ script. 3. Phải là 'Single file' – tất cả trong một khối mã, không dùng import maps. 4. Không dùng model bên ngoài (GLTF) hay texture (JPG/PNG). Hãy tạo mọi thứ bằng 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
Khi Gemini tạo xong 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ẽ ngay lập tức thấy đối tượng 3D đang xoay. Hãy thử click chuột vào nó và kéo – nhờ OrbitControls bạn có thể xoay cảnh!
Bước 4: Lặp lại trong thời gian thực
Giờ mới là công việc thời gian thực thực sự. Quay lại Gemini. Không cần viết mã mới hay gửi lại mã cũ cho nó (nó đã ghi nhớ). Chỉ cần trò chuyện và dần dần bổ sung 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 vật liệu của đối tượng từ màu đặc sang 'Wireframe' (mô hình lưới) phát sáng 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ảnh một hệ thống hạt xoay chậm (Points và PointsMaterial), mô phỏng các ngôi sao trong vũ trụ.
Xuất sắc. Và bây giờ hãy làm sao cho khi tôi di chuyển chuột, màu 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ã trong thời gian thực, đôi khi AI sẽ mắc lỗi và trên CodePen bạn chỉ thấy 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 khung 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 cả. Hãy kiểm tra xem bạn đã nạp đúng OrbitControls chưa và liệu camera có đang nằm bên trong đối tượng hay không. Thử sửa lại và gửi cho tôi toàn bộ phiên bản đã chỉnh sửa.
Xong! 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 đang hoạt động từ CodePen. Trên Windows, mở Notepad hoặc trên Mac mở TextEdit, dán mã vào 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.