Căsuța mea 3D: scenă rotativă în JavaScript
O căsuță cu acoperiș, ferestre și copac, pe care o rotești cu degetul, cu zi și noapte. 3D în JavaScript simplu, un prim pas spre Blender.

✓ Prompt verificat în Gemini (fără cont): a funcționat de 3 ori din 3
- Nivelul
- Avansat
- Rezultat
- Scenă 3D într-un singur fișier HTML
- Vârsta
- 12+
- Timp
- ≈ 40 min
- Instrumente
- Gemini
- Cont
- Nu e nevoie
Ce iese
O căsuță pe pajiște cu un copac: o rotești cu degetul — se întoarce în 3D, cu două degete o mărești, iar un buton aduce noaptea cu stele și ferestre luminate. Apasă „Joacă exemplul” de mai sus — a făcut-o Gemini după promptul de mai jos.
Pași
-
Deschide gemini.google.com. Sub 13 ani — împreună cu un părinte, pe dispozitivul lui.
-
Copiază tot promptul și trimite-l:
Fă o căsuță 3D într-un singur fișier HTML. Nu conecta nimic de pe internet: fără Tailwind, CDN, fonturi, imagini sau biblioteci — doar CSS și JavaScript propriu în fișier; în fișier nu trebuie să existe niciun link „https://”. Nu salva nimic în memoria browserului. Desenează singur 3D pe canvas printr-o proiecție în perspectivă simplă în JavaScript (fără three.js). Pe o pajiște verde stă o căsuță: pereți, acoperiș triunghiular, ușă, două ferestre și un horn; alături un copac. Descrie căsuța ca o listă de vârfuri și fețe; la fiecare cadru sortează fețele după distanța față de cameră (întâi cele îndepărtate) și desenează doar fețele care au toate vârfurile. Fețele sunt colorate în nuanțe diferite, fețele din spate nu se văd prin cele din față. Rotesc căsuța cu degetul (pe calculator — cu mouse-ul) și ea se întoarce în 3D; cu două degete sau cu rotița măresc. Jos două butoane: „Zi/Noapte” (noaptea cer întunecat, stele și ferestre luminate) și „Rotește” (căsuța se rotește singură încet). Înainte de răspuns verifică dacă toate variabilele, clasele și funcțiile sunt declarate și scrise fără greșeli. Totul trebuie să arate bine pe telefon. Deschide rezultatul în Canvas (panoul de previzualizare din Gemini). Păstrează punctele ca tablouri simple [x, y, z], fără clase sau constructori ajutători; scrie singur toate funcțiile de rotire și proiecție și declară-le înainte de folosire. -
Așteaptă cam un minut, apasă Previzualizează (Preview) și încearcă toate butoanele și glisoarele.
-
Verifică AI-ul (întrebarea de mai jos).
-
Apasă Descarcă (Download; uneori e meniul Exportă) — fișierul se deschide în orice browser. Arată-l la oră!
Schimbă promptul
Înainte să-l trimiți, înlocuiește câteva cuvinte — iese versiunea ta. Schimbă doar cuvintele, iar regulile despre internet și Canvas lasă-le.
- „două ferestre și un horn” → „patru ferestre, un balcon și un horn”
- „alături un copac” → „alături doi copaci și un gard”
Dacă nu merge
- AI-ul scrie că a schimbat tot, dar rezultatul e la fel? Scrie:
Nu s-a schimbat nimic. Arată versiunea actualizată în Canvas. - AI-ul scrie codul în chat, fără Preview? Scrie:
Deschide rezultatul în Canvas.
Trimiterea lucrărilor în galerie se deschide în curând.