Hệ Mặt Trời Pixel

Triển khai hoàn chỉnh một "trang web Hệ Mặt Trời tương tác theo phong cách nghệ thuật pixel đen trắng" (thuần tĩnh, chạy cục bộ, có thể triển khai lên dịch vụ lưu trữ tĩnh). Mọi yêu cầu đều được liệt kê dưới đây; hãy triển khai và kiểm tra từng mục.

[1. Nền tảng kỹ thuật]
1. Trang web thuần tĩnh: importmap + ESM gốc; three.js và toàn bộ phần phụ thuộc được đóng gói cục bộ; không CDN, không bước build, không backend; điểm vào là index.html.
2. Chiến lược tài nguyên hai hướng: hình học dùng hình cầu / lưới tham số tích hợp của three.js; kết cấu dùng ảnh thiên văn thực tế (NASA Visible Earth, bản đồ Mặt Trăng LRO, SolarSystemScope), được tổ chức theo ba cấp chất lượng — tiêu chuẩn / HD 4K / siêu 8K — kèm trình quản lý tải kết cấu (bộ nhớ đệm Promise, phân biệt không gian màu SRGB và tuyến tính, anisotropy ≤ 8, thử lại khi lỗi và quay về cấp tiêu chuẩn).
3. Trình dựng hình: antialias, đầu ra SRGB, ACESFilmicToneMapping (exposure ≈ 1.05), DPR ≤ 2 (≤ 1.5 trên thiết bị di động), near plane 0.002, nền cảnh màu đen.

[2. Nội dung cảnh (toàn bộ là 3D thời gian thực; không dùng ảnh hoặc video giả làm 3D)]
1. Thành phần: Mặt Trời + tám hành tinh + Mặt Trăng (khóa thủy triều, quay quanh Trái Đất). Hành tinh phía trong quay quanh nhanh hơn và phía ngoài chậm hơn, tự quay theo tỷ lệ thực tế và dùng độ nghiêng trục thực (Sao Thổ 27°, Sao Thiên Vương 82°).
2. Mặt Trời: hình cầu phát sáng + quầng sáng mờ; một đèn điểm chiếu sáng + một đèn môi trường mờ.
3. Trái Đất: hai kết cấu ngày/đêm chuyển đổi thời gian thực theo "tích vô hướng giữa pháp tuyến · hướng Mặt Trời" (chuyển tiếp đường phân giới sáng tối), đèn thành phố ở phía đêm tự phát sáng (bật/tắt độc lập); một lớp vỏ mây riêng (1.006R, alphaMap) và lớp vỏ viền sáng Fresnel khí quyển (1.025R, nhân với hệ số ánh sáng Mặt Trời) — cả ba lớp đều có thể bật/tắt riêng.
4. Sao Thổ: hình cầu và vành đai cùng chung nhóm nghiêng 27°; vành là lưới tham số trên mặt phẳng XZ, UV ánh xạ kết cấu sọc dài theo bán kính, hai mặt, alphaTest ≈ 0.04, depthWrite = false.
5. Mặt Trăng: kết cấu bề mặt Mặt Trăng 8K (cung cấp cấp 4K / 8K trên web); ánh sáng cận cảnh phải tối hơn để có vẻ chân thực màu xám trung tính.
6. Nền: các điểm sao cố định thưa thớt (không dùng kết cấu tinh vân lớn).

[3. Hệ thống tương tác]
1. Chọn thiên thể: nhấp trong danh mục / nhấp raycast trong cảnh (các thiên thể nhỏ có hình cầu chọn vô hình phóng to) / chuyển lần lượt trước-sau.
2. Camera lấy nét: camera liên tục khóa vào thiên thể mục tiêu đang di chuyển (đồng bộ vị trí mỗi khung hình) và không bao giờ bị chuyển động quỹ đạo kéo đi; khoảng cách xem = bán kính bao / hệ số lấp đầy khung hình (mặc định 0.7, Mặt Trăng 0.78, Mặt Trời 0.45 với viền đen); chuyển cảnh mượt ease-out 850ms theo dõi mục tiêu thời gian thực ngay cả khi đang chuyển; thao tác kéo của người dùng lập tức được ưu tiên (hủy di chuyển camera được lập trình).
3. Góc xem có sẵn: sáu vị trí camera — mặt được chiếu sáng / đường phân giới sáng tối / vùng cực / rìa / mặt đêm / chi tiết (tạo từ các độ lệch "hướng về Mặt Trời × ngang × lên"; khi mục tiêu ở gốc tọa độ, dùng hướng cố định để tránh suy biến vector 0).
4. Thời gian và hiển thị: tạm dừng tất cả, bật/tắt tự quay độc lập, bật/tắt quỹ đạo độc lập, tốc độ 0–4×, bật/tắt đường quỹ đạo, bật/tắt nhãn, đặt lại góc xem; trạng thái tự quay/quỹ đạo phải luôn đồng bộ chặt chẽ với UI.

[4. UI pixel đen trắng (theo tinh thần careers.kimi.com, chỉ đen/trắng/xám, không xanh dương)]
1. Dùng phông chữ monospace làm nền tảng; phông pixel cho số / tiêu đề ngắn / điều hướng (giấy phép OFL, tự lưu trữ); phông thân bài rõ ràng cho văn bản tiếng Trung.
2. Thanh trên cùng: logo SOLAR SYSTEM (chữ tiếng Anh cùng tên tiếng Trung) bên trái, "Tổng quan / Thiên thể / Cài đặt hiển thị" bên phải.
3. Bộ chọn thiên thể: nhóm theo sao / hành tinh / mặt trăng, đánh số hai chữ số, làm nổi bật mục hiện tại (không dùng mảng màu lớn), có thể cuộn.
4. Bảng tên góc dưới trái: số thứ tự (ví dụ: 05/10) + tiêu đề lớn (tên tiếng Trung + tiếng Anh) + nhãn loại + một dòng thơ + dữ liệu đường kính + "Xem chi tiết ↗"; ở chế độ tổng quan, hiển thị "kích thước và khoảng cách đã điều chỉnh để trình bày".
5. Thanh công cụ dưới cùng: tạm dừng / tự quay / quỹ đạo / tốc độ / đường quỹ đạo / đặt lại góc xem (biểu tượng + chữ ngắn) + bộ chuyển bước trước/sau (tên tiếng Anh của thiên thể hiện tại ở giữa).
6. Bảng chi tiết (trượt ra từ phải): giới thiệu, dữ kiện chính (có đơn vị và ký hiệu "xấp xỉ"), nút trọng tâm quan sát (mỗi nút gắn với trạng thái camera/lớp thực tế và hiển thị "hiện tại"), nguồn dữ liệu, liên kết đọc thêm; bảng cài đặt được chia thành nhóm "Góc xem / Chất lượng".
7. Chuyển tiếp sự kiện: lớp UI toàn màn hình dùng pointer-events: none; chỉ nút / danh sách / bảng / thanh công cụ dùng auto; cuộn trong bảng không được lan sang canvas. Thay Hệ Mặt Trời bằng hệ ngoại hành tinh TRAPPIST-1: một sao lùn đỏ và bảy hành tinh đá. Giữ nguyên UI nghệ thuật pixel, camera lấy nét và các điều khiển thời gian, đồng thời dùng các thông số TRAPPIST-1 thực tế cho từng hành tinh. [5. Hiệu ứng mở đầu và chuyển động pixel]
1. Mở đầu: bề mặt Mặt Trăng toàn màn hình được dither có thứ tự Bayer 1-bit (lấy mẫu ảnh → lượng tử hóa thang xám → 4 mức xám → ma trận 4×4); kích thước khối dither mịn dần từ 14px đến 1.5px theo tiến trình tải (tiến trình chính là chỉ báo tải), tiêu đề phông pixel ở giữa, mặt nạ xuyên tâm tối và nút "Bắt đầu khám phá →"; chỉ vào sau khi người dùng nhấp (không tự động vào).
2. Thoát: sau khi nhấp, tiêu đề mờ dần trong 220ms, sau đó ma trận số tan đi theo sóng — mặt sóng chéo quét ngang (có nhiễu từng ô), các khối pixel thu nhỏ và mờ theo gradient sóng, rồi sau khoảng 800ms hiện tổng quan Hệ Mặt Trời.
3. Hiệu ứng chuyển động khác: khi đổi thiên thể, tiêu đề lớn và dòng thơ xuất hiện bằng hiệu ứng giải mã xáo trộn (khoảng 320/420ms); ký tự nút điều hướng cuộn hai lớp (350ms, lệch 30ms mỗi ký tự, kích hoạt khi hover lẫn focus); các bảng chuyển cảnh bằng opacity + lệch 12px (khoảng 220ms); tiêu đề bảng chi tiết lộ ra qua mặt nạ khối thưa (≤ 700ms).
4. Với prefers-reduced-motion, mọi thứ chuyển thành đổi trực tiếp.

[6. Bổ sung thông tin]
1. Tâm ngắm quan sát: tâm ngắm mảnh theo chuột, tọa độ LAT/LON của bề mặt hành tinh được trỏ tới hiển thị trực tiếp ở góc trên phải (ẩn trên màn hình cảm ứng).
2. Thẻ xem trước khi hover danh mục (tên / đường kính / khoảng cách từ Mặt Trời / dòng thơ).
3. Điều khiển hoàn toàn bằng bàn phím: ←/→ đổi thiên thể, ↑/↓ dolly, Space tạm dừng, 1–0 nhảy trực tiếp, O tổng quan, D chi tiết, S cài đặt, H thẻ phím tắt, Esc đóng bảng.
4. Nhật ký quan sát: góc dưới phải hiển thị bản ghi monospace cuộn của 3 thao tác gần nhất.

[7. Di động và khả năng tiếp cận]
1. Danh mục cuộn ngang với mục đã chọn tự cuộn vào vùng xem; chi tiết / cài đặt là các bảng dưới có thể đóng; vùng chạm ≥ 44px; thích ứng safe-area; thanh công cụ và bảng không được chồng lên nhau.
2. Nút ngữ nghĩa, aria-pressed / aria-selected chính xác, focus hiển thị rõ, Escape đóng bảng và trả focus về nút đã kích hoạt, trạng thái tải được thông báo qua live region nhẹ.

[8. Tiêu chí nghiệm thu (kiểm tra từng mục)]
1. Phần mở đầu pixel hiển thị khi khởi chạy; nhấp để nó tan theo sóng vào tổng quan (Mặt Trời ở giữa, đường quỹ đạo, nhãn hành tinh).
2. Chuyển lần lượt qua cả mười thiên thể: tên / lựa chọn trong danh mục / dữ liệu luôn đồng bộ, camera theo dõi mượt mà không mất mục tiêu, không có hình cầu đen, không lỗi biên dịch shader, không 404.
3. Ba nút bật/tắt lớp của Trái Đất phải cho hiệu ứng rõ ràng, vành Sao Thổ đồng phẳng với xích đạo, đường phân giới sáng tối của Mặt Trăng tự nhiên mà không bị trắng lóa, và Mặt Trời là một đĩa có viền đen (không phải bề mặt Mặt Trời toàn màn hình).
4. Kiểm tra bằng ảnh chụp màn hình ở desktop 1440×900 và điện thoại 390×844: không che khuất, không tràn; không lỗi console; dùng đầy đủ được khi bật reduced-motion.

Trước tiên hãy liệt kê thứ tự triển khai (cảnh → tương tác → UI → chuyển động → nghiệm thu), sau đó bàn giao trực tiếp các tệp có thể chạy. Không bàn giao chỗ giữ chỗ dở dang và không bịa đặt tài nguyên hoặc dữ liệu.

Triển khai hoàn chỉnh một "trang web Hệ Mặt Trời tương tác theo phong cách nghệ thuật pixel đen trắng" (thuần tĩnh, chạy cục bộ, có thể triển khai lên dịch vụ lưu trữ tĩnh). Mọi yêu cầu đều được liệt kê dưới đây; hãy triển khai và kiểm tra từng mục.

[1. Nền tảng kỹ thuật]
1. Trang web thuần tĩnh: importmap + ESM gốc; three.js và toàn bộ phần phụ thuộc được đóng gói cục bộ; không CDN, không bước build, không backend; điểm vào là index.html.
2. Chiến lược tài nguyên hai hướng: hình học dùng hình cầu / lưới tham số tích hợp của three.js; kết cấu dùng ảnh thiên văn thực tế (NASA Visible Earth, bản đồ Mặt Trăng LRO, SolarSystemScope), được tổ chức theo ba cấp chất lượng — tiêu chuẩn / HD 4K / siêu 8K — kèm trình quản lý tải kết cấu (bộ nhớ đệm Promise, phân biệt không gian màu SRGB và tuyến tính, anisotropy ≤ 8, thử lại khi lỗi và quay về cấp tiêu chuẩn).
3. Trình dựng hình: antialias, đầu ra SRGB, ACESFilmicToneMapping (exposure ≈ 1.05), DPR ≤ 2 (≤ 1.5 trên thiết bị di động), near plane 0.002, nền cảnh màu đen.

[2. Nội dung cảnh (toàn bộ là 3D thời gian thực; không dùng ảnh hoặc video giả làm 3D)]
1. Thành phần: Mặt Trời + tám hành tinh + Mặt Trăng (khóa thủy triều, quay quanh Trái Đất). Hành tinh phía trong quay quanh nhanh hơn và phía ngoài chậm hơn, tự quay theo tỷ lệ thực tế và dùng độ nghiêng trục thực (Sao Thổ 27°, Sao Thiên Vương 82°).
2. Mặt Trời: hình cầu phát sáng + quầng sáng mờ; một đèn điểm chiếu sáng + một đèn môi trường mờ.
3. Trái Đất: hai kết cấu ngày/đêm chuyển đổi thời gian thực theo "tích vô hướng giữa pháp tuyến · hướng Mặt Trời" (chuyển tiếp đường phân giới sáng tối), đèn thành phố ở phía đêm tự phát sáng (bật/tắt độc lập); một lớp vỏ mây riêng (1.006R, alphaMap) và lớp vỏ viền sáng Fresnel khí quyển (1.025R, nhân với hệ số ánh sáng Mặt Trời) — cả ba lớp đều có thể bật/tắt riêng.
4. Sao Thổ: hình cầu và vành đai cùng chung nhóm nghiêng 27°; vành là lưới tham số trên mặt phẳng XZ, UV ánh xạ kết cấu sọc dài theo bán kính, hai mặt, alphaTest ≈ 0.04, depthWrite = false.
5. Mặt Trăng: kết cấu bề mặt Mặt Trăng 8K (cung cấp cấp 4K / 8K trên web); ánh sáng cận cảnh phải tối hơn để có vẻ chân thực màu xám trung tính.
6. Nền: các điểm sao cố định thưa thớt (không dùng kết cấu tinh vân lớn).

[3. Hệ thống tương tác]
1. Chọn thiên thể: nhấp trong danh mục / nhấp raycast trong cảnh (các thiên thể nhỏ có hình cầu chọn vô hình phóng to) / chuyển lần lượt trước-sau.
2. Camera lấy nét: camera liên tục khóa vào thiên thể mục tiêu đang di chuyển (đồng bộ vị trí mỗi khung hình) và không bao giờ bị chuyển động quỹ đạo kéo đi; khoảng cách xem = bán kính bao / hệ số lấp đầy khung hình (mặc định 0.7, Mặt Trăng 0.78, Mặt Trời 0.45 với viền đen); chuyển cảnh mượt ease-out 850ms theo dõi mục tiêu thời gian thực ngay cả khi đang chuyển; thao tác kéo của người dùng lập tức được ưu tiên (hủy di chuyển camera được lập trình).
3. Góc xem có sẵn: sáu vị trí camera — mặt được chiếu sáng / đường phân giới sáng tối / vùng cực / rìa / mặt đêm / chi tiết (tạo từ các độ lệch "hướng về Mặt Trời × ngang × lên"; khi mục tiêu ở gốc tọa độ, dùng hướng cố định để tránh suy biến vector 0).
4. Thời gian và hiển thị: tạm dừng tất cả, bật/tắt tự quay độc lập, bật/tắt quỹ đạo độc lập, tốc độ 0–4×, bật/tắt đường quỹ đạo, bật/tắt nhãn, đặt lại góc xem; trạng thái tự quay/quỹ đạo phải luôn đồng bộ chặt chẽ với UI.

[4. UI pixel đen trắng (theo tinh thần careers.kimi.com, chỉ đen/trắng/xám, không xanh dương)]
1. Dùng phông chữ monospace làm nền tảng; phông pixel cho số / tiêu đề ngắn / điều hướng (giấy phép OFL, tự lưu trữ); phông thân bài rõ ràng cho văn bản tiếng Trung.
2. Thanh trên cùng: logo SOLAR SYSTEM (chữ tiếng Anh cùng tên tiếng Trung) bên trái, "Tổng quan / Thiên thể / Cài đặt hiển thị" bên phải.
3. Bộ chọn thiên thể: nhóm theo sao / hành tinh / mặt trăng, đánh số hai chữ số, làm nổi bật mục hiện tại (không dùng mảng màu lớn), có thể cuộn.
4. Bảng tên góc dưới trái: số thứ tự (ví dụ: 05/10) + tiêu đề lớn (tên tiếng Trung + tiếng Anh) + nhãn loại + một dòng thơ + dữ liệu đường kính + "Xem chi tiết ↗"; ở chế độ tổng quan, hiển thị "kích thước và khoảng cách đã điều chỉnh để trình bày".
5. Thanh công cụ dưới cùng: tạm dừng / tự quay / quỹ đạo / tốc độ / đường quỹ đạo / đặt lại góc xem (biểu tượng + chữ ngắn) + bộ chuyển bước trước/sau (tên tiếng Anh của thiên thể hiện tại ở giữa).
6. Bảng chi tiết (trượt ra từ phải): giới thiệu, dữ kiện chính (có đơn vị và ký hiệu "xấp xỉ"), nút trọng tâm quan sát (mỗi nút gắn với trạng thái camera/lớp thực tế và hiển thị "hiện tại"), nguồn dữ liệu, liên kết đọc thêm; bảng cài đặt được chia thành nhóm "Góc xem / Chất lượng".
7. Chuyển tiếp sự kiện: lớp UI toàn màn hình dùng pointer-events: none; chỉ nút / danh sách / bảng / thanh công cụ dùng auto; cuộn trong bảng không được lan sang canvas. Thêm chế độ lớp học gồm bốn chương — sao, hành tinh đá, hành tinh khí khổng lồ, mặt trăng. Camera dừng ở từng chặng, hiển thị ba ý chính theo phong cách bảng đen và giáo viên chuyển từng ý bằng phím cách. [5. Hiệu ứng mở đầu và chuyển động pixel]
1. Mở đầu: bề mặt Mặt Trăng toàn màn hình được dither có thứ tự Bayer 1-bit (lấy mẫu ảnh → lượng tử hóa thang xám → 4 mức xám → ma trận 4×4); kích thước khối dither mịn dần từ 14px đến 1.5px theo tiến trình tải (tiến trình chính là chỉ báo tải), tiêu đề phông pixel ở giữa, mặt nạ xuyên tâm tối và nút "Bắt đầu khám phá →"; chỉ vào sau khi người dùng nhấp (không tự động vào).
2. Thoát: sau khi nhấp, tiêu đề mờ dần trong 220ms, sau đó ma trận số tan đi theo sóng — mặt sóng chéo quét ngang (có nhiễu từng ô), các khối pixel thu nhỏ và mờ theo gradient sóng, rồi sau khoảng 800ms hiện tổng quan Hệ Mặt Trời.
3. Hiệu ứng chuyển động khác: khi đổi thiên thể, tiêu đề lớn và dòng thơ xuất hiện bằng hiệu ứng giải mã xáo trộn (khoảng 320/420ms); ký tự nút điều hướng cuộn hai lớp (350ms, lệch 30ms mỗi ký tự, kích hoạt khi hover lẫn focus); các bảng chuyển cảnh bằng opacity + lệch 12px (khoảng 220ms); tiêu đề bảng chi tiết lộ ra qua mặt nạ khối thưa (≤ 700ms).
4. Với prefers-reduced-motion, mọi thứ chuyển thành đổi trực tiếp.

[6. Bổ sung thông tin]
1. Tâm ngắm quan sát: tâm ngắm mảnh theo chuột, tọa độ LAT/LON của bề mặt hành tinh được trỏ tới hiển thị trực tiếp ở góc trên phải (ẩn trên màn hình cảm ứng).
2. Thẻ xem trước khi hover danh mục (tên / đường kính / khoảng cách từ Mặt Trời / dòng thơ).
3. Điều khiển hoàn toàn bằng bàn phím: ←/→ đổi thiên thể, ↑/↓ dolly, Space tạm dừng, 1–0 nhảy trực tiếp, O tổng quan, D chi tiết, S cài đặt, H thẻ phím tắt, Esc đóng bảng.
4. Nhật ký quan sát: góc dưới phải hiển thị bản ghi monospace cuộn của 3 thao tác gần nhất.

[7. Di động và khả năng tiếp cận]
1. Danh mục cuộn ngang với mục đã chọn tự cuộn vào vùng xem; chi tiết / cài đặt là các bảng dưới có thể đóng; vùng chạm ≥ 44px; thích ứng safe-area; thanh công cụ và bảng không được chồng lên nhau.
2. Nút ngữ nghĩa, aria-pressed / aria-selected chính xác, focus hiển thị rõ, Escape đóng bảng và trả focus về nút đã kích hoạt, trạng thái tải được thông báo qua live region nhẹ.

[8. Tiêu chí nghiệm thu (kiểm tra từng mục)]
1. Phần mở đầu pixel hiển thị khi khởi chạy; nhấp để nó tan theo sóng vào tổng quan (Mặt Trời ở giữa, đường quỹ đạo, nhãn hành tinh).
2. Chuyển lần lượt qua cả mười thiên thể: tên / lựa chọn trong danh mục / dữ liệu luôn đồng bộ, camera theo dõi mượt mà không mất mục tiêu, không có hình cầu đen, không lỗi biên dịch shader, không 404.
3. Ba nút bật/tắt lớp của Trái Đất phải cho hiệu ứng rõ ràng, vành Sao Thổ đồng phẳng với xích đạo, đường phân giới sáng tối của Mặt Trăng tự nhiên mà không bị trắng lóa, và Mặt Trời là một đĩa có viền đen (không phải bề mặt Mặt Trời toàn màn hình).
4. Kiểm tra bằng ảnh chụp màn hình ở desktop 1440×900 và điện thoại 390×844: không che khuất, không tràn; không lỗi console; dùng đầy đủ được khi bật reduced-motion.

Trước tiên hãy liệt kê thứ tự triển khai (cảnh → tương tác → UI → chuyển động → nghiệm thu), sau đó bàn giao trực tiếp các tệp có thể chạy. Không bàn giao chỗ giữ chỗ dở dang và không bịa đặt tài nguyên hoặc dữ liệu.