Página web interativa de paisagem 3D de um vale japonês de cerejeiras

Crie diretamente uma página web de paisagem 3D bem acabada e interativa em tempo real no navegador. Tema: vale japonês de cerejeiras. Use HTML, CSS e JavaScript. Não gere imagens nem entregue apenas uma proposta de design, e não tente simular 3D com uma única imagem de fundo e efeito de paralaxe. Quero um produto final realmente funcional e navegável. 【1. Direcionamento da obra】 Crie uma paisagem de vale completa e contínua, com profundidade e camadas de distância, não um pequeno objeto isolado, uma ilha flutuante, uma maquete sobre uma base ou uma simples demonstração técnica. O estilo deve ser voxel art moderno e detalhado: mantenha a linguagem visual da geometria cúbica, mas com imagem em alta resolução, antialiasing e iluminação e sombras refinadas. Não use pixelização retrô de baixa resolução, não empilhe blocos grandes e grosseiros nem aplique um filtro de pixels à imagem. A qualidade visual é prioridade. É melhor ter alguns recursos a menos do que sacrificar composição, materiais e iluminação. 【2. Como usar imagens de referência】 Se houver imagens de referência, primeiro compreenda sua composição, suas camadas de profundidade, escala, iluminação e relações de cor. Use apenas a atmosfera e a linguagem visual como referência e redesenhe a cena, sem copiar as posições de construções, árvores, montanhas e estradas nem recriá-las em escala 1:1. A imagem de referência não é um recurso de fundo da página. A cena precisa ser formada por geometria 3D real. 【3. Composição da cena】 Ao abrir a página, ela já deve exibir uma composição completa e atraente, sem exigir que o usuário gire a câmera para encontrar um ângulo bonito. Use uma câmera em perspectiva, não uma câmera isométrica inclinada, típica de maquetes. A imagem deve ter primeiro plano, plano intermediário e plano de fundo bem definidos: Primeiro plano: uma cerejeira antiga e marcante, acompanhada de rochas, vegetação, lanternas de pedra e algumas flores caídas, formando uma moldura natural nas bordas da imagem, mas sem bloquear o rio, a ponte e as construções principais. Plano intermediário: um rio sinuoso conduz o olhar para dentro da cena, com uma ponte de madeira vermelha atravessando a água; a vila, as casas de chá, o santuário e as trilhas devem acompanhar o relevo, com conexões reais de circulação entre as construções. O terreno deve ter ondulações, margens e transições naturais, em vez de modelos distribuídos uniformemente sobre uma superfície plana. Plano de fundo: um pagode de vários níveis na encosta, florestas em diferentes distâncias, cordilheiras e montanhas nevadas ao longe. Represente a distância com variações de escala, oclusão, mudanças de temperatura de cor e perspectiva atmosférica, em vez de apenas reduzir o tamanho dos objetos distantes. Não preencha tudo de maneira uniforme. É preciso criar hierarquia, variação de densidade, áreas de respiro e um foco visual claro. 【4. Forma e qualidade visual】 Cerejeira: o tronco deve ter curvas, ramificações e raízes; a copa deve ser formada por grupos irregulares de flores, com espaços vazios, variações de espessura e galhos visíveis. Não a transforme em algumas esferas ou blocos regulares. Construções: os telhados devem ter camadas de telhas, beirais, vigas, pilares e treliças nas janelas; as construções devem variar em função, volume e altura. Não cubra o vale com cópias da mesma casa. Terreno: nas margens, inclua pedras úmidas, moitas e transições de vegetação. Evite degraus regulares demais, listras repetitivas, padrões quadriculados e uma grade procedural evidente. Água: a superfície precisa refletir os elementos ao redor e ter ondulações moderadas, variações de profundidade e uma transição natural junto às margens. Sempre que possível, use reflexos da própria cena; ao reduzir a qualidade por motivos de desempenho, preserve a credibilidade visual. Não substitua a água por ruído piscante, distorções intensas ou um grande plano azul uniforme. Detalhes: você pode incluir alguns peixes koi, flores caídas, vaga-lumes, uma cachoeira e pássaros voando ao longe, mas tudo deve contribuir para a atmosfera, sem deixar a imagem poluída. Não amontoe detalhes apenas para alegar uma grande quantidade de modelos. 【5. Cores e atmosfera】 A configuração padrão deve ser a hora azul: um vale e montanhas distantes em tons frios, flores de cerejeira em rosa suave e a luz quente, sem estouro, de lanternas e janelas. Concentre a luz quente nos locais com presença humana, sem tingir todo o ambiente de laranja. Use sombras suaves, variação de luz e sombra nas áreas de contato entre objetos, exposição equilibrada, bloom sutil, antialiasing e névoa atmosférica com camadas de distância. Evite imagem esbranquiçada ou acinzentada, saturação excessiva, névoa cobrindo toda a tela, luz estourada e serrilhado evidente. A geometria cúbica pode ser nítida, mas o render não pode parecer grosseiro. Ofereça também as atmosferas “amanhecer” e “chuva”; ao alternar entre elas, altere em conjunto o céu, a luz ambiente, a névoa e os efeitos locais, em vez de apenas mudar a cor do fundo. 【6. Interação e interface】 Ofereça quatro câmeras planejadas: panorama do vale, ângulo baixo à beira do rio, trilha do templo e vista superior da encosta. A transição deve ser suave, e cada câmera precisa ter valor compositivo próprio. Interação básica: arrastar com o mouse para observar e usar a roda do mouse para dar zoom ou avançar; no touch, permitir arrastar e aplicar zoom com pinça. Ofereça recursos para redefinir a câmera, ocultar a interface e salvar a imagem atual. Aprimoramentos opcionais: exploração livre, passeio lento da câmera e som ambiente. O som ambiente deve vir desativado por padrão e só tocar depois que o usuário clicar para ativá-lo. Os recursos extras não podem prejudicar o acabamento da cena padrão. A interface deve ser discreta e bem projetada, mantendo a paisagem como protagonista. Posicione o título e a barra de controles nas bordas, sem cobrir o foco visual. No desktop e no celular, não pode haver botões saindo da tela, textos sobrepostos ou controles impossíveis de usar. 【7. Engenharia e desempenho】 É permitido usar Three.js / WebGL e dependências CDN com versões fixas e compatíveis entre si. Priorize recursos de renderização maduros; não reescreva uma engine inteira em nome de “zero dependências”. Mantenha o HTML, CSS e JavaScript escritos por você, sempre que possível, organizados em um único arquivo HTML. Gere a paisagem com geometria e materiais procedurais, sem depender de imagens externas ou recursos de modelos 3D. Para objetos repetidos, use métodos adequados de renderização em lote ou instanciada; controle de forma equilibrada a subdivisão, as sombras, os reflexos e a resolução de renderização. Ofereça os modos alta qualidade e leve; no celular, use por padrão configurações mais leves. Não aumente indefinidamente a quantidade de voxels apenas para obter mais detalhes. Inclua uma indicação de carregamento, uma mensagem caso o WebGL não seja compatível e o tratamento de erros necessário. Não reproduza áudio automaticamente quando o som não estiver ativado; respeite a preferência do sistema por reduzir efeitos de movimento. 【8. Verificação antes da entrega】 Não entregue o projeto imediatamente após terminar o código. Se o ambiente atual permitir executar a página no navegador e fazer capturas de tela, abra-a de fato primeiro, verifique a câmera padrão, as quatro vistas, a troca de atmosferas e o layout em desktop e celular, e depois corrija, com base nas capturas, problemas evidentes de composição, exposição, oclusão e renderização. Verifique principalmente: se há tela vazia, falha no carregamento ou erros no console; se há interseções de geometria, cintilação, artefatos nas sombras, estouro de exposição ou anomalias na água; se a imagem padrão realmente parece uma paisagem completa, e não uma pequena maquete; se os botões funcionam de verdade e se saem da tela no celular. Você pode usar capturas de tela do navegador para a verificação, mas não chame ferramentas de geração de imagens. Descreva honestamente os testes que não foram concluídos; não afirme que algo foi verificado quando não foi. Entrega final: 1. Um arquivo HTML que exista de fato e possa ser aberto, ou uma prévia interativa compatível com o ambiente atual. 2. Se for possível fazer capturas de tela, anexe uma captura real da renderização no navegador. 3. Inclua uma breve explicação dos controles e das condições necessárias para executar o projeto. Conclua a produção diretamente; tome decisões de design coerentes por conta própria nos detalhes não essenciais, sem devolver repetidamente para mim decisões de implementação que você mesmo pode resolver.