Thị trấn hoa anh đào 3D phong cách anime, tự do khám phá

Hãy dùng Three.js để xây dựng một “thị trấn hoa anh đào 3D phong cách anime, tự do khám phá” trong một tệp HTML duy nhất, sau đó đăng dưới dạng một trang web có thể chia sẻ. [Các ràng buộc kỹ thuật] - Chỉ sử dụng three.js r128 (bản dựng UMD) từ cdnjs. Không tải mô hình hoặc hình ảnh bên ngoài — tạo tất cả mô hình, kết cấu bề mặt và biển hiệu cửa hàng bằng mã và Canvas theo quy trình. - Sử dụng nội dung nguyên bản cho mọi tên cửa hàng, biển hiệu và nhân vật. Không bắt chước bất kỳ thương hiệu có thật hay tác phẩm hiện có nào. - Sử dụng MeshStandardMaterial hoặc MeshPhongMaterial. Tránh metalness cao và các bản đồ phản chiếu môi trường (trên một số máy tính, chúng có thể khiến vật thể được render mà không có màu). - Gộp các vật thể tĩnh theo vật liệu thành một số lượng mesh nhỏ để chạy tốt trên máy tính phổ thông; cung cấp tùy chọn chất lượng Cao / Trung bình / Thấp. [Bối cảnh: “桜ヶ丘 (Sakuragaoka)”, một thị trấn nhỏ của Nhật Bản vào buổi chiều mùa xuân] 1. Phố mua sắm: một con phố chính chạy theo hướng bắc–nam với hơn 20 cửa hàng ở hai bên (quán ramen, quán cà phê, cửa hàng xe đạp, hiệu sách, cửa hàng hoa, cửa hàng bánh ngọt Nhật Bản, hiệu thuốc, cửa hàng tiện lợi, v.v.). Mỗi cửa hàng có: biển hiệu nhiều dòng (tên cửa hàng + tên tiếng Anh + số điện thoại), mái hiên sọc với diềm vải hình vỏ sò, mặt tiền thụt vào với nội thất có chiều sâu rõ ràng và khu trưng bày trên vỉa hè (thùng trái cây, giá tạp chí, tủ trưng bày món ăn mẫu, cột đèn xoay của tiệm cắt tóc). Các tầng trên có cửa sổ, máy điều hòa, ban công phơi quần áo và ăng-ten TV trên mái. 2. Chi tiết đường phố: cột điện với nhiều dây điện trên cao, đèn đường trang trí treo băng-rôn phố mua sắm, dây đèn lồng lễ hội, vỉa hè lát gạch vuông với dải gạch dẫn đường màu vàng, nắp cống, biển báo dừng “止まれ” và trạm xe buýt. 3. Đường ngang và tàu hỏa: một tuyến đường sắt đôi. Khi tàu đến gần, đèn đỏ tại đường ngang nhấp nháy luân phiên, chuông reo và cần chắn hạ xuống. Một đoàn tàu đi lại hai toa dừng tại ga khoảng 14 giây rồi khởi hành. Cửa sổ trong suốt để nhìn thấy ghế ngồi và quai treo bên trong. 4. Nhà ga với sân ga đảo: bảng tên ga, mái che sân ga, ghế băng và máy bán hàng tự động. 5. Quảng trường sakura: một cây anh đào 100 năm tuổi với ghế băng tròn bao quanh. 6. Đền Inari: cổng torii lớn màu đỏ son cùng một dãy torii nhỏ, đèn đá, tượng cáo, điện thờ (mái xanh đồng, chigi, katsuogi, hộp dâng lễ và chuông treo), bồn rửa tay thanh tẩy (temizuya), tượng Jizo, bảng ema, cây thiêng và nền sỏi. 7. Đê ven sông: hai hàng cây anh đào tạo thành đường hầm hoa, đèn lồng, một dòng sông, nhà cửa ở bờ đối diện và núi xa. [Cách xây dựng cây anh đào (phần chính)] - Lấy cảm hứng từ giống Somei-Yoshino: thân cây tách thấp thành 3–4 cành chính, sau đó các cành tiếp tục phân nhánh đệ quy thêm ba cấp. Cành vươn ra ngoài và hơi rủ xuống ở phần ngọn, tạo thành tổng thể hình tán ô. - Tạo tán cây từ hàng chục nghìn “thẻ cụm hoa”: vẽ hoa năm cánh trên Canvas (đầu cánh hoa có khía, tâm đỏ hồng và nhị hoa), với một lớp nền hồng nhạt mềm phía sau hoa. Dùng alphaTest và chế độ render hai mặt cho các thẻ. - Thêm một vài cụm màu hồng lấp đầy bên trong tán để tạo độ dày. Phần ngoài và phía trên sáng hơn; phần bên trong và phía dưới có bóng đổ tông hồng ấm. - Dùng màu hồng phấn, không dùng hồng neon. Tán cây đung đưa nhẹ trong gió, thảm cánh hoa rụng phủ mặt đất dưới mỗi cây và cánh hoa liên tục rơi trong không khí (thực hiện bằng shader). [Nhân vật] - Hơn 20 học sinh và người dân phong cách anime: hoạt ảnh đi bộ với khớp gối và khuỷu tay, gương mặt anime vẽ trên Canvas (mắt to, điểm sáng, má ửng hồng) có chớp mắt, tóc mái tạo từ các lọn riêng biệt, nhiều kiểu tóc (tóc dài, tóc bob, tóc đuôi ngựa đung đưa, tóc hai bên), đồng phục thủy thủ / đồng phục blazer / quần áo thường ngày. Render nhân vật với cel shading hai tông màu và đường viền tối. - Người đi bộ trên phố, trò chuyện trong quảng trường, chờ trên sân ga, cầu nguyện tại đền và đạp xe dọc theo con đê. [Phương tiện] - Xây dựng ô tô bằng cách đùn một silhouette mặt bên (có vòm bánh xe, cửa sổ, đèn, biển số Nhật Bản và bánh xe quay). Ô tô dừng trước đường ngang; trong lúc chuông reo, chúng chờ cho đến khi cần chắn nâng lên. [Ánh sáng và thời gian trong ngày] - Phong cách nền anime mềm mại: bầu trời xanh với mây trắng (shader), sương mờ nhẹ ở phía xa và bóng đổ mang sắc xanh tím. - Có thể chuyển đổi giữa Buổi chiều / Chạng vạng / Đêm sakura. Vào ban đêm, cửa sổ, đèn lồng và đèn đường sẽ bật sáng. [Điều khiển] - Góc nhìn thứ nhất: WASD để đi bộ, Shift để chạy, Space để nhảy, F để bay, chuột để quan sát xung quanh (khóa con trỏ), các phím số để dịch chuyển đến từng địa điểm, H để ẩn giao diện, M để tắt tiếng. - Thiết bị di động: kéo ở nửa bên trái để di chuyển, kéo ở nửa bên phải để quan sát xung quanh. - Bật va chạm; người chơi có thể đi lên sân ga và các bậc thềm. - Dùng Web Audio để tạo âm thanh môi trường: tiếng gió, tiếng chim hót, chuông đường ngang và tiếng tàu chạy.