Page web paysagère 3D interactive — vallée japonaise de cerisiers

Crée directement une page web paysagère 3D aboutie, interactive en temps réel dans le navigateur. Thème : vallée japonaise de cerisiers. Utilise HTML, CSS et JavaScript. Ne génère pas d’image et ne fournis pas seulement une proposition de design ; n’utilise pas une simple image d’arrière-plan avec un effet de parallaxe pour faire passer cela pour de la 3D. Je veux un résultat réellement fonctionnel et explorable. 【I. Positionnement de l’œuvre】 Il s’agit d’un paysage de vallée complet et continu, avec une véritable profondeur entre le premier plan et l’arrière-plan, pas d’un petit objet isolé, d’une île flottante, d’une maquette sur socle ni d’une simple démonstration technique. Le style est un voxel art moderne et détaillé : conserve le langage formel de la géométrie cubique, mais l’image doit être en haute résolution, avec antialiasing et un éclairage fin. Pas de pixel art rétro basse résolution, pas d’empilement de gros blocs et pas de filtre pixelisé appliqué à l’image. La qualité visuelle est prioritaire. Mieux vaut quelques fonctionnalités en moins que de sacrifier la composition, les matériaux ou l’éclairage. 【II. Utilisation des images de référence】 Si des images de référence sont fournies, commence par en comprendre la composition, les différents plans, l’échelle, la lumière et les relations colorimétriques. Inspire-toi uniquement de leur ambiance et de leur langage visuel, puis reconçois la scène ; ne reprends pas à l’identique l’emplacement des bâtiments, des arbres, des reliefs et des chemins, et ne fais pas une reproduction à l’échelle 1:1. Les images de référence ne sont pas des ressources d’arrière-plan pour la page web. La scène doit être constituée de véritable géométrie 3D. 【III. Composition de la scène】 Dès son ouverture, la page doit présenter une image complète et attrayante ; l’utilisateur ne doit pas avoir à faire pivoter la caméra pour trouver un bel angle de vue. Utilise une caméra en perspective, et non une caméra isométrique en plongée de type maquette. L’image doit présenter clairement un premier plan, un plan intermédiaire et un arrière-plan : Premier plan : un vieux cerisier particulièrement marquant, accompagné de rochers, d’herbes, de végétation, de lanternes de pierre et de quelques pétales tombés, forme un cadrage naturel sur le bord de l’image, sans masquer la rivière, le pont ni les bâtiments principaux. Plan intermédiaire : une rivière sinueuse guide le regard vers l’intérieur de l’image, avec un pont japonais rouge enjambant son cours ; le village, les maisons de thé, le sanctuaire et les sentiers se répartissent en suivant le relief, avec de véritables relations de circulation entre les bâtiments. Le sol doit présenter des ondulations, des berges et des transitions naturelles, et non des modèles répartis uniformément sur une surface plane. Arrière-plan : une pagode à plusieurs niveaux sur le versant, des forêts à différentes distances, des crêtes montagneuses et des montagnes enneigées au loin. Exprime la distance par les variations d’échelle, les occultations, les écarts de température de couleur et la perspective atmosphérique, plutôt que de simplement réduire la taille des objets éloignés. Ne répartis pas tous les éléments de manière uniforme. Il faut une hiérarchie, des variations de densité, des espaces dégagés et un point focal visuel clairement défini. 【IV. Formes et qualité d’image】 Cerisier : le tronc doit présenter des inflexions, des ramifications et des racines ; la cime doit être composée de bouquets de fleurs irréguliers, avec des espaces entre eux, des variations d’épaisseur et des branches visibles. Ne le transforme pas en quelques sphères régulières ou en amas cubiques. Bâtiments : les toits doivent comporter des rangées de tuiles superposées, des avant-toits, des poutres, des poteaux et des claustras ; les bâtiments doivent varier par leur fonction, leur volume et leur hauteur ; ne répète pas la même maison dans toute la vallée. Terrain : les berges doivent présenter des pierres humides, des touffes d’herbe et des transitions végétales. Évite les escaliers trop réguliers, les bandes répétitives, les damiers et les grilles procédurales trop visibles. Surface de l’eau : elle doit refléter les éléments environnants et présenter des ondulations modérées, des variations de profondeur et une transition avec les berges. Utilise autant que possible les réflexions de la scène réelle ; même en cas de dégradation des performances, le résultat doit rester visuellement crédible. Ne remplace pas l’eau par un bruit scintillant, une forte distorsion ou un grand plan bleu uniforme. Détails : tu peux ajouter quelques carpes koï, pétales tombés, lucioles, cascades et oiseaux volant au loin, mais tous ces éléments doivent servir l’ambiance sans rendre l’image chargée. N’empile pas des détails uniquement pour pouvoir revendiquer un nombre élevé de modèles. 【V. Couleurs et ambiance】 L’ambiance par défaut est celle de l’heure bleue : une vallée et des montagnes lointaines aux teintes froides, des fleurs de cerisier rose tendre, et la lumière chaleureuse mais non surexposée des lanternes et des fenêtres. La lumière chaude doit se concentrer dans les zones occupées, sans teinter tout l’environnement d’orange. Prévois des ombres douces, un assombrissement aux points de contact entre les objets, une exposition cohérente, un bloom maîtrisé, de l’antialiasing et une brume légère dont la densité varie avec la distance. Évite les tons blanchis, l’aspect grisâtre, la sursaturation, la brume couvrant tout l’écran, les lumières surexposées et l’aliasing marqué. La géométrie cubique peut rester nette, mais le rendu ne doit pas paraître grossier. Propose également deux ambiances : « matin » et « sous la pluie » ; lors du changement, modifie simultanément le ciel, la lumière ambiante, la brume et les effets locaux, et pas uniquement la couleur de l’arrière-plan. 【VI. Interactions et interface】 Propose quatre caméras conçues avec soin : vue panoramique de la vallée, vue basse au bord de la rivière, sentier du temple et vue plongeante depuis le versant. Le passage d’une caméra à l’autre doit être fluide et chacune doit apporter une composition qui lui est propre. Interactions de base : faire glisser la souris pour observer, utiliser la molette pour zoomer ou avancer ; sur écran tactile, prendre en charge le glissement et le pincement à deux doigts. Prévois des fonctions pour réinitialiser la vue, masquer l’interface et enregistrer l’image actuelle. Améliorations facultatives : exploration libre, promenade lente de la caméra et ambiance sonore. Le son d’ambiance doit être désactivé par défaut et ne se lancer qu’après un clic volontaire de l’utilisateur. Les fonctionnalités supplémentaires ne doivent pas nuire à la qualité de la vue par défaut. L’interface doit rester discrète et soignée, en laissant le paysage au premier plan. Place le titre et la barre de commandes sur les bords, sans masquer le point focal visuel. Sur ordinateur comme sur mobile, aucun bouton ne doit sortir de l’écran, aucun texte ne doit se chevaucher et aucune commande ne doit être inutilisable. 【VII. Technique et performances】 Tu peux utiliser Three.js / WebGL ainsi que des dépendances CDN dont les versions sont figées et compatibles entre elles. Privilégie des capacités de rendu éprouvées ; ne réécris pas tout un moteur pour obtenir une solution « sans dépendances ». Regroupe autant que possible le HTML, le CSS et le JavaScript écrits sur mesure dans un seul fichier HTML. Génère les éléments de la scène à partir de géométrie et de matériaux procéduraux, sans dépendre d’images ou de ressources de modèles 3D externes. Pour les objets répétés, utilise une méthode adaptée de rendu par lots ou d’instanciation ; contrôle raisonnablement la tessellation, les ombres, les réflexions et la résolution de rendu. Propose un mode haute qualité et un mode léger ; sur mobile, utilise par défaut les réglages légers. N’augmente pas indéfiniment le nombre de voxels pour obtenir davantage de détails. Ajoute un indicateur de chargement, un message si WebGL n’est pas pris en charge et la gestion des erreurs nécessaires. Ne lance pas automatiquement le son lorsqu’il n’a pas été activé ; respecte les préférences système de réduction des animations. 【VIII. Validation avant livraison】 Ne livre pas le résultat immédiatement après avoir écrit le code. Si l’environnement permet d’exécuter le projet dans un navigateur et de prendre des captures, ouvre d’abord réellement la page, vérifie la caméra par défaut, les quatre vues, le changement d’ambiance ainsi que la mise en page sur ordinateur et sur mobile, puis corrige à partir des captures les problèmes évidents de composition, d’exposition, d’occultation et de rendu. Vérifie en particulier : l’absence d’écran vide, d’échec du chargement et d’erreurs dans la console ; l’absence de pénétration de géométrie, de scintillement, de bandes dans les ombres, de surexposition et d’anomalies sur l’eau ; que la vue par défaut ressemble réellement à un paysage complet et non à une petite maquette ; que les boutons fonctionnent vraiment et ne débordent pas sur mobile. Tu peux utiliser des captures du navigateur pour la validation, mais n’appelle aucun outil de génération d’images. Indique honnêtement les tests qui n’ont pas pu être effectués ; ne prétends pas qu’ils ont été vérifiés. Livraison finale : 1. Un fichier HTML réellement présent et ouvrable, ou un aperçu interactif pris en charge par l’environnement actuel. 2. Si des captures sont possibles, joins une véritable capture du rendu dans le navigateur. 3. Explique brièvement le mode d’utilisation et les conditions d’exécution nécessaires. Réalise directement le projet ; pour les détails non essentiels, prends des décisions de conception cohérentes de ton propre chef, et ne me renvoie pas à plusieurs reprises les problèmes d’implémentation que tu peux résoudre toi-même.