Trang web cảnh quan 3D tương tác: Thung lũng hoa anh đào Nhật Bản

Hãy trực tiếp tạo một trang web cảnh quan 3D hoàn thiện cao, có thể tương tác theo thời gian thực trong trình duyệt. Chủ đề: thung lũng hoa anh đào Nhật Bản. Sử dụng HTML, CSS và JavaScript để triển khai. Không tạo hình ảnh, không chỉ đưa ra phương án thiết kế, không dùng một ảnh nền kèm hiệu ứng thị sai để giả lập 3D. Tôi cần sản phẩm thực tế có thể chạy và khám phá được. 【I. Định vị tác phẩm】 Đây phải là một cảnh quan thung lũng hoàn chỉnh, liền mạch, có phân lớp chiều sâu theo khoảng cách, không phải một vật trang trí nhỏ đứng riêng, đảo lơ lửng, sa bàn có đế hay bản trình diễn kỹ thuật đơn thuần. Phong cách là voxel art hiện đại, tinh xảo: giữ lại ngôn ngữ tạo hình hình học khối lập phương, nhưng hình ảnh phải có độ phân giải cao, khử răng cưa và ánh sáng, bóng đổ tinh tế. Không dùng kiểu pixel hóa độ phân giải thấp mang hơi hướng hoài cổ, không xếp những khối hộp lớn thô kệch, không phủ bộ lọc pixel lên hình ảnh. Ưu tiên chất lượng hình ảnh. Thà bớt một vài tính năng còn hơn hy sinh bố cục, vật liệu và ánh sáng. 【II. Cách sử dụng hình ảnh tham khảo】 Nếu có hình ảnh tham khảo, trước tiên hãy phân tích phân lớp bố cục, tỷ lệ, ánh sáng và mối quan hệ màu sắc trong đó. Chỉ mượn bầu không khí và ngôn ngữ thị giác để thiết kế lại cảnh, không sao chép vị trí của công trình, cây cối, núi và đường đi, không tái tạo theo tỷ lệ 1:1. Hình ảnh tham khảo không phải tài nguyên ảnh nền của trang web. Bản thân cảnh phải được cấu thành từ hình học 3D thực. 【III. Bố cục cảnh】 Ngay khi mở trang, phải hiển thị một khung cảnh hoàn chỉnh và cuốn hút, không yêu cầu người dùng xoay camera trước mới tìm được góc đẹp. Sử dụng camera phối cảnh, không dùng camera nhìn từ trên xuống kiểu đẳng phối để tạo cảm giác sa bàn. Khung hình phải có tiền cảnh, trung cảnh và hậu cảnh rõ ràng: Tiền cảnh: một cây anh đào cổ thụ có điểm nhấn, kết hợp với đá, cỏ cây, đèn đá và một ít cánh hoa rơi, tạo thành khung cảnh tự nhiên ở rìa khung hình nhưng không che sông, cầu và các công trình chính. Trung cảnh: một dòng sông uốn lượn dẫn hướng nhìn vào cảnh, với cây cầu gỗ đỏ bắc qua sông; làng, quán trà, đền thờ và lối đi phân bố theo địa hình, giữa các công trình phải có mối liên hệ giao thông thực tế. Mặt đất có độ gồ ghề, đường bờ và các vùng chuyển tiếp tự nhiên, không phải các mô hình được đặt đều trên một mặt phẳng. Hậu cảnh: những ngôi chùa nhiều tầng trên sườn núi, rừng ở các khoảng cách khác nhau, các dãy núi và núi tuyết ở xa. Thể hiện khoảng cách bằng thay đổi tỷ lệ, che khuất, biến thiên nóng lạnh và phối cảnh khí quyển, thay vì chỉ thu nhỏ các vật thể ở xa. Không phủ kín mọi thành phần một cách đồng đều. Cần có trọng tâm chính phụ, nhịp độ dày thưa, khoảng trống và điểm nhấn thị giác rõ ràng. 【IV. Tạo hình và chất lượng hình ảnh】 Cây anh đào: thân cây có các đoạn uốn, nhánh phân tách và phần rễ; tán cây gồm những cụm hoa không đều, có khoảng hở, biến thiên về độ dày và các cành cây lộ rõ. Không tạo thành vài khối cầu hoặc cụm khối vuông đều tăm tắp. Công trình: mái có các lớp ngói xếp chồng, mái hiên đua, xà cột và khung cửa; các công trình khác nhau phải có công năng, quy mô và độ cao khác nhau, không sao chép cùng một ngôi nhà rồi rải kín thung lũng. Địa hình: ven bờ có đá ướt, bụi cỏ và vùng chuyển tiếp thực vật. Tránh các bậc thang quá đều, sọc lặp lại, họa tiết bàn cờ và lưới sinh theo quy trình lộ rõ. Mặt nước: phải phản chiếu được cảnh vật xung quanh, có gợn sóng vừa phải, biến thiên độ sâu và vùng chuyển tiếp ở bờ. Ưu tiên sử dụng phản chiếu từ cảnh thực; khi cần hạ cấp hiệu năng, hình ảnh vẫn phải đáng tin về mặt thị giác. Không dùng nhiễu nhấp nháy, biến dạng mạnh hay một mặt phẳng xanh dương đơn sắc để thay thế mặt nước. Chi tiết: có thể thêm một ít cá koi, cánh hoa rơi, đom đóm, thác nước và chim bay ở xa, nhưng tất cả phải phục vụ bầu không khí, không khiến khung cảnh trở nên rối mắt. Không chất đống chi tiết chỉ để khoe số lượng mô hình. 【V. Màu sắc và bầu không khí】 Mặc định là thời khắc xanh: thung lũng và núi xa thiên về tông lạnh, hoa anh đào hồng dịu, đèn lồng và ánh sáng cửa sổ ấm áp nhưng không cháy sáng. Ánh sáng ấm tập trung ở những nơi có người sinh hoạt, không nhuộm cam toàn bộ môi trường. Cần có bóng mềm, độ sáng tối tại các điểm tiếp xúc giữa vật thể, phơi sáng hợp lý, bloom tiết chế, khử răng cưa và sương mỏng có phân lớp theo khoảng cách. Tránh hình ảnh bạc trắng, xám đục, quá bão hòa, sương dày kín khung hình, đèn cháy sáng và răng cưa rõ rệt. Hình học khối hộp có thể sắc nét, nhưng bản thân phần render không được thô ráp. Cung cấp thêm hai bầu không khí “sáng sớm” và “trời mưa”; khi chuyển đổi phải đồng bộ thay đổi bầu trời, ánh sáng môi trường, sương và các hiệu ứng cục bộ, không chỉ đổi màu nền. 【VI. Tương tác và giao diện】 Cung cấp bốn góc máy được thiết kế riêng: toàn cảnh thung lũng, góc máy thấp bên sông, lối đi đến chùa và góc nhìn từ trên sườn núi. Việc chuyển cảnh phải mượt mà, mỗi góc máy đều cần có giá trị bố cục riêng. Tương tác cơ bản: kéo chuột để quan sát, dùng con lăn để thu phóng hoặc tiến về phía trước; màn hình cảm ứng hỗ trợ kéo và thu phóng bằng hai ngón tay. Cung cấp các chức năng đặt lại góc nhìn, ẩn giao diện và lưu khung hình hiện tại. Tùy chọn nâng cao: tự do khám phá, camera tuần tra chậm và âm thanh môi trường. Âm thanh môi trường mặc định tắt, chỉ phát sau khi người dùng chủ động nhấp vào. Các tính năng bổ sung không được ảnh hưởng đến độ hoàn thiện của khung cảnh mặc định. Giao diện phải tiết chế và có tính thiết kế, lấy cảnh quan làm trọng tâm. Đặt tiêu đề và thanh điều khiển ở rìa khung hình, không che điểm nhấn thị giác. Trên cả máy tính và điện thoại, không được xảy ra lỗi nút tràn khỏi khung, chữ chồng lên nhau hoặc không thể thao tác. 【VII. Kỹ thuật và hiệu năng】 Được phép sử dụng Three.js / WebGL cùng các dependency CDN cố định phiên bản và tương thích lẫn nhau. Ưu tiên năng lực render成熟, không viết lại toàn bộ engine chỉ để đạt mục tiêu “không dependency”. Cố gắng sắp xếp HTML, CSS và JavaScript tự viết trong một tệp HTML duy nhất. Cảnh vật được tạo bằng hình học và vật liệu procedural, không phụ thuộc vào ảnh bên ngoài hoặc tài nguyên mô hình 3D. Với các vật thể lặp lại, hãy dùng phương thức vẽ theo lô hoặc instancing phù hợp; kiểm soát hợp lý mức độ chia nhỏ, bóng đổ, phản chiếu và độ phân giải render. Cung cấp chế độ chất lượng cao và chế độ nhẹ; điện thoại mặc định dùng thiết lập nhẹ hơn. Không tăng vô hạn số lượng voxel chỉ để đổi lấy chi tiết. Thêm thông báo đang tải, thông báo khi không hỗ trợ WebGL và cơ chế xử lý lỗi cần thiết. Khi âm thanh chưa được bật thì không tự động phát; tôn trọng tùy chọn hệ thống về giảm chuyển động. 【VIII. Nghiệm thu trước khi bàn giao】 Không viết xong mã rồi bàn giao ngay. Nếu môi trường hiện tại hỗ trợ chạy trình duyệt và chụp màn hình, hãy mở trang thực tế trước, kiểm tra camera mặc định, bốn góc nhìn, chuyển đổi bầu không khí, bố cục trên máy tính và điện thoại, sau đó sửa các vấn đề rõ ràng về bố cục, phơi sáng, che khuất và render dựa trên ảnh chụp. Đặc biệt kiểm tra: có khung hình trống, lỗi tải hoặc lỗi console hay không; có lỗi xuyên hình, nhấp nháy, sọc bóng đổ, cháy sáng hoặc bất thường trên mặt nước hay không; khung cảnh mặc định có thực sự giống một cảnh quan hoàn chỉnh thay vì một sa bàn nhỏ hay không; các nút chức năng có thực sự hoạt động và có bị tràn khung trên thiết bị di động hay không. Có thể dùng ảnh chụp màn hình trình duyệt để nghiệm thu, nhưng không được gọi công cụ tạo ảnh. Nếu chưa hoàn tất việc kiểm thử, phải mô tả trung thực, không tuyên bố đã xác minh. Bàn giao cuối cùng: 1. Một tệp HTML thực sự tồn tại và có thể mở được, hoặc bản xem trước tương tác được môi trường hiện tại hỗ trợ. 2. Nếu có thể chụp màn hình, đính kèm một ảnh chụp render thực tế từ trình duyệt. 3. Mô tả ngắn gọn cách thao tác và các điều kiện chạy cần thiết. Hãy trực tiếp hoàn tất việc tạo sản phẩm; tự đưa ra các lựa chọn thiết kế nhất quán cho những chi tiết không quan trọng, đừng liên tục yêu cầu tôi quyết định những vấn đề triển khai mà bạn có thể tự xử lý.