Website cánh đồng lúa 3D sống động

Xây dựng một website cánh đồng lúa 3D sống động chạy trên trình duyệt, theo chủ đề: “Biển xanh bát ngát / Gió lay đồng lúa.” Hoàn thiện mã nguồn, cài đặt các dependency cần thiết và khởi chạy bản xem trước. Không dừng lại ở đề xuất hoặc kế hoạch triển khai. 1. Định hướng hình ảnh Tổng thể cần mang lại cảm giác tự nhiên, yên bình và tinh tế, như một website phong cảnh tương tác có định hướng nghệ thuật nhất quán. Cảnh cần bao gồm: Tiền cảnh: các lá mảnh dễ phân biệt, thân cong và một vài bông lúa trĩu xuống. Trung cảnh: cánh đồng lúa liên tục kéo dài về phía xa, có mật độ đủ dày cùng khoảng cách phân bố tự nhiên. Nền cảnh: hàng cây không đều, các lớp đồi thấp và hiệu ứng phối cảnh khí quyển tinh tế. Bầu trời: tông xám xanh dịu, mây biến đổi nhẹ và chuyển tiếp tự nhiên ở đường chân trời. Đặt camera mặc định hơi cao hơn các bông lúa, hướng nhìn ngang qua cánh đồng về phía những ngọn đồi xa. Bầu trời nên chiếm khoảng một phần ba khung hình, còn cánh đồng lúa là chủ thể chính của bố cục. Chủ yếu sử dụng các màu xanh đậm, xanh ô liu và xanh vàng cho thảm thực vật. Tránh xanh huỳnh quang. Tạo sự biến thiên tự nhiên về chiều cao, hướng, độ cong và màu sắc của cây lúa. 2. Yêu cầu về animation Gió phải tạo thành các đợt sóng liên tục lan ngang qua cánh đồng: Giữ phần rễ gần như cố định, với chuyển động tăng dần về phía đầu lá và bông lúa. Các cây trong cùng một khu vực nên chuyển động đồng bộ về tổng thể nhưng vẫn giữ khác biệt riêng. Kết hợp những đợt gió chậm, quy mô lớn với các dao động cục bộ tinh tế. Tránh để tất cả cây đung đưa đồng bộ tuyệt đối. Không dịch chuyển cả cây hoặc khiến lá nhấp nháy. Dùng làn gió mặc định nhẹ nhàng, dễ chịu khi quan sát trong thời gian dài. 3. Yêu cầu tương tác Cung cấp các điều khiển đơn giản nhưng thực sự tác động đến cảnh: Thanh trượt tốc độ gió: điều chỉnh mượt cường độ và tốc độ của animation gió. Chế độ ánh sáng: Buổi sáng, Buổi chiều và Giờ vàng. Đồng bộ thay đổi của bầu trời, hướng sáng, nhiệt độ màu và màu sương mù. Chế độ xem: Cánh đồng rộng và Giữa ruộng lúa, với chuyển cảnh camera mượt mà. Tạm dừng/Tiếp tục: tạm dừng và tiếp tục animation môi trường. Chuyển động chuột có thể tạo ra phản hồi camera rất nhẹ, nhưng không được gây chóng mặt. Mặc định không cho camera liên tục xoay qua các góc lớn. 4. Thiết kế giao diện Dùng cảnh toàn màn hình với giao diện phủ bên trên: Góc trên bên trái: wordmark VERDANT nhỏ. Góc dưới bên trái: tiêu đề serif “Biển xanh bát ngát.” Bên dưới là phụ đề nhỏ hơn “Chẳng cần làm gì. Cứ để gió dẫn lối.” Góc dưới bên phải: bảng điều khiển nhỏ gọn, màu xanh đậm bán trong suốt. Đảm bảo văn bản dễ đọc, bố trí khoảng cách thoáng và không để các điều khiển che khuất phong cảnh chính. Các điều khiển phải sử dụng được trên màn hình hẹp mà không chồng lấn. 5. Công nghệ và hiệu năng Sử dụng Three.js. Nếu đã có project, hãy giữ nguyên môi trường build hiện tại. Sử dụng instancing và animation vertex trên GPU để xử lý số lượng lớn thảm thực vật. Tránh tạo một đối tượng draw riêng cho từng cây hoặc cập nhật từng cây trên CPU ở mỗi frame. Giảm độ chi tiết của thảm thực vật ở khoảng cách xa hơn và áp dụng giới hạn pixel ratio hợp lý. Ưu tiên hình học và vật liệu tạo theo quy trình để đảm bảo việc tải asset ổn định. Cảnh phải được kết xuất theo thời gian thực. Không dùng ảnh hoặc video phong cảnh toàn cảnh làm cảnh chính. Tên model và nhãn so sánh sẽ được thêm ở hậu kỳ; không đưa chúng vào cảnh. 6. Tiêu chí hoàn thiện Sau khi triển khai, sử dụng các công cụ trình duyệt hiện có để kiểm tra: Khung nhìn ban đầu hiển thị chính xác, không có lỗi console rõ ràng. Mọi điều khiển đều thực sự tác động đến cảnh. Tiền cảnh, trung cảnh và nền cảnh có chiều sâu và phân lớp rõ ràng. Cây lúa không chỉ là những đường màu xanh dựng đứng đơn giản. Chuyển động của gió liên tục và tự nhiên, không lặp lại đồng loạt một cách rõ ràng. Chuyển cảnh camera mượt mà và giao diện vẫn sử dụng được trên màn hình hẹp. Nếu không thể thực hiện một bước kiểm tra cụ thể, hãy nêu rõ điều đó. Cuối cùng, cung cấp hướng dẫn khởi chạy và tóm tắt các tính năng thực sự đã triển khai.