Retour

Postcard World

Indiquez le destinataire et une chose qui s’est passée entre vous, et recevez un monde miniature de 6,5 mètres de large tenant dans un seul lien. Votre phrase n’apparaît que lorsque la personne rejoint le centre, et elle peut choisir un objet pour vous répondre.

Auteur: PawerCode source
Essayer en direct
Postcard WorldEssayer en direct

Description

Postcard World n’est pas un monde ; c’est une machine à offrir des mondes. Indiquez le destinataire et une chose qui s’est passée entre vous, et la machine construit un monde miniature qui n’appartient qu’à cette personne : 6,5 mètres de large, juste assez pour contenir une chose et une personne. Vous obtenez un lien et l’envoyez. La personne l’ouvre et y entre, et ce n’est qu’en atteignant le centre qu’elle voit apparaître la phrase que vous avez écrite.

Le destinataire peut aussi choisir une chose — un bateau en papier, une bougie ou la lettre — et répondre ; cette réponse n’est qu’un lien de plus. Il s’agit donc d’un échange dans les deux sens, et non d’une page vitrine statique. Les objets sont placés à leur taille réelle (une lettre de 0,12 m, une chaise de 0,9 m, un réverbère de 3,5 m, un arbre de 4,5 m) par rapport à une hauteur des yeux de 1,62 m, ce qui donne à ce petit monde un sens de l’espace crédible. Ils sont aussi plus qu’un simple décor : ils portent des mécaniques, s’illuminant d’un cran à votre approche et dérivant vers le centre quand une réponse est écrite.

Il n’y a aucun backend. Le monde entier est encodé dans le lien — 282 caractères pour le monde d’exemple —, sans serveur ni base de données, et le lien n’expire jamais. L’œuvre ne charge aucun fichier image, police ou audio : l’herbe, le sol, le ciel, les montagnes lointaines, les nuages, les étoiles, la pluie, la neige et les flaques sont tous générés par le code, le paysage sonore est synthétisé en direct avec Web Audio, et l’interface utilise les polices système. Il n’y a pas non plus d’outil de build ; tout tourne sur les modules ES natifs du navigateur et les import maps. Hormis les assets 3D, aucune image, aucun son ni aucun texte n’a été généré par IA, et le code a été écrit par l’auteur.

Comment Tripo a été utilisé

Les 14 assets 3D de la scène ont tous été générés avec l’API text_to_model (text-to-3D) de Tripo, sans aucun élément provisoire. Sans Tripo, explique l’auteur, l’œuvre se serait réduite à des agencements de formes géométriques de base.

  • Caractéristiques : chaque asset est un GLB avec une texture de couleur de base en 512×512 et une normal map, pour environ 11 500 triangles. Un script de génération appelle l’API Tripo, et le résultat passe par un import et une compression scriptés avant que three.js le charge directement à l’exécution.
  • Trois rôles narratifs : les choses qui vous répondent (la lampe, la bougie), celles qui donnent l’échelle (le vélo, l’arbre, l’horloge) et celles vers lesquelles on se penche pour les lire (la lettre, le bateau en papier). La forme et la matière des assets déterminent si l’ensemble donne vraiment l’impression d’être un lieu.
  • Des objets comme mécaniques : ce sont des pièces mobiles de la machine, pas de simples modèles à regarder ; ils s’illuminent d’un cran à votre approche et dérivent vers le centre quand une réponse est écrite.

Bande-annonce