Museo di storia dell'arte 3D

Un museo d'arte in 3D da visitare nel browser, costruito con Wikipedia

Cosa fa

Un museo virtuale in cui si cammina come in un videogioco, con le opere e le spiegazioni prese da Wikipedia.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: visite guidate a pagamento per le scuole, sponsorizzazioni di musei veri.

Rendilo tuo

Per le scuole italiane: un museo per ogni periodo del programma di storia dell'arte.
Usa solo opere di pubblico dominio e immagini con licenza libera.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Museo Aperto": un museo virtuale in cui si cammina come in un videogioco, con opere d'arte di pubblico dominio e le spiegazioni prese da Wikipedia, diviso in sale per epoca. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con le sale e "Entra nel museo"
2. Il museo 3D: si cammina con tastiera e mouse o con il dito
3. Scheda dell'opera: immagine grande, autore, anno, spiegazione da Wikipedia
4. Percorsi guidati (es. "Il Rinascimento in 10 opere")
5. Area scuole

Stile: da museo: pareti bianche, pavimento in legno, luci calde; interfaccia minima con sfondo nero trasparente e testo bianco, carattere "Cormorant Garamond" per i titoli delle opere e "Inter" per il resto. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- "opere": titolo, autore, anno, immagine (Wikimedia Commons, pubblico dominio), pagina Wikipedia, sala, posizione sulla parete
- "sale": nome, epoca, ordine
- "percorsi": elenco di opere con un testo introduttivo

Regole di sicurezza obbligatorie:
- tutto il contenuto è pubblico
- solo gli amministratori aggiungono opere e sale
- si usano solo immagini di pubblico dominio, sempre con la fonte

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Camminare nel museo

Il museo è costruito con Three.js: sale rettangolari con pareti, pavimento e luci; ogni opera è un piano con l'immagine come texture, appeso alla parete nella sua posizione (codice nei Dettagli tecnici). Si cammina con WASD e il mouse (Pointer Lock) su computer, con un joystick virtuale su telefono.

Avvicinandosi a un'opera compare il titolo; cliccandola si apre la scheda con il riassunto della pagina Wikipedia in italiano, letto dall'API ufficiale, e il link per approfondire.

Le immagini vengono da Wikimedia Commons, solo opere di pubblico dominio, con la fonte indicata in ogni scheda; i testi di Wikipedia sono sotto licenza CC BY-SA e vanno attribuiti.

4. Percorsi e scuole

Percorsi guidati: una freccia sul pavimento porta da un'opera all'altra, con una breve introduzione per ogni tappa.

Area scuole: l'insegnante crea una classe, sceglie un percorso, e gli studenti rispondono a 3 domande per ogni opera; l'insegnante vede i risultati. Ottimizzazione per computer della scuola poco potenti (immagini più leggere).

5. Pagamenti con Stripe

Aggiungi un abbonamento a 9 € al mese per insegnante. Gratis l'utente ha: museo e percorsi liberi per tutti. Con il piano Pro sblocca: area scuole: classi, domande sulle opere e risultati degli studenti.

A pagamento riuscito il webhook porta l'utente al piano Pro; se l'abbonamento viene disdetto o non rinnovato lo riporta al piano gratuito.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Licenze: controlla che ogni opera abbia la fonte Wikimedia e la licenza di pubblico dominio, e che i testi di Wikipedia siano attribuiti.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Appendere un quadro e leggere Wikipedia

Crea un quadro 3D con cornice e immagine nella posizione giusta della parete, e legge il riassunto dell'opera dall'API ufficiale di Wikipedia in italiano.

import * as THREE from "three";

export async function appendiQuadro(scena: THREE.Scene, urlImmagine: string, x: number, y: number, z: number, rotazioneY: number) {
  const texture = await new THREE.TextureLoader().loadAsync(urlImmagine);
  texture.colorSpace = THREE.SRGBColorSpace;
  const proporzione = texture.image.width / texture.image.height;
  const altezza = 1.4;                               // metri
  const larghezza = altezza * proporzione;

  const cornice = new THREE.Mesh(
    new THREE.BoxGeometry(larghezza + 0.12, altezza + 0.12, 0.05),
    new THREE.MeshStandardMaterial({ color: 0x6b4f2a }),
  );
  const tela = new THREE.Mesh(
    new THREE.PlaneGeometry(larghezza, altezza),
    new THREE.MeshStandardMaterial({ map: texture }),
  );
  tela.position.z = 0.03;
  cornice.add(tela);
  cornice.position.set(x, y, z);
  cornice.rotation.y = rotazioneY;
  scena.add(cornice);
  return cornice;
}

// Riassunto dell'opera da Wikipedia in italiano (testo con licenza CC BY-SA: va attribuito)
export async function riassuntoWikipedia(titoloPagina: string) {
  const r = await fetch("https://it.wikipedia.org/api/rest_v1/page/summary/" + encodeURIComponent(titoloPagina));
  if (!r.ok) return null;
  const p = await r.json();
  return { testo: p.extract as string, link: p.content_urls?.desktop?.page as string };
}

Pezzi comuni a tutti i progetti

Glossario

Three.js: Una libreria gratuita per creare grafica 3D nel browser.
Pubblico dominio: Opere i cui diritti d'autore sono scaduti: si possono usare liberamente.
CC BY-SA: La licenza dei testi di Wikipedia: si possono riusare citando la fonte e con la stessa licenza.