Näin rakensin 3D-sivuston Claude Codella

Mitä tällä sivustolla on?

Sivusto anglelabs.fi alkaa 3D-esityksellä. Ensin tulevat hiireen reagoivat 3D-kirjaimet, sitten kaaos muuttuu järjestykseksi, sitten levykaruselli töistä ja lopuksi lupaukset putoavat raskaina metallipalikoina. Esityksen lopussa on aloitussivu, josta isot linkit vievät sivuston muille sivuille. Nykyisen koodin kirjoitti Claude Code. Ensimmäiset kokeilut tein toisella tekoälytyökalulla.

Ruudun alareunassa on Jatka tästä -nappi ja pieni takaisin-nappi, joten esityksen voi kulkea pelkillä napeilla. Levysivulla levyjä selataan nuolinapeilla, ja viimeisessä vaiheessa nappi muuttuu muotoon Siirry sivulle. Rulla, pyyhkäisy ja nuolinäppäimet toimivat edelleen.

Ensimmäisen vaiheen jälkeen vasemmassa yläkulmassa on AL-logo ja teksti Anglé Labs, samassa kohdassa kuin kaikilla muilla sivuilla. Logon klikkaus vie aloitussivulle, ja siellä se rullaa sivun alkuun. Aloitussivulla on yläpalkki, otsikko, lyhyt johdanto, palvelut, isot linkkikortit (Työt, Mikä on Anglé Labs ja Anglé Labs Community) ja alatunniste.

Mistä idea tuli?

Idea tuli Unicorn Studion julkisista demoista. Yhdessä kirjaimet lensivät hiiren mukana, toisessa projekteja selattiin CD-levyinä ja kolmannessa lasinen B-kirjain kellui valon päällä. Otin niistä referenssit, ja sääntö oli yksi: kopioi ensin sellaisenaan, omat ideat vasta sen jälkeen. Kopiosta näkee, osaako työkalu asian.

Lasinen B osoittautui kuvaksi, jonka shaderi piirsi linssinä taustan päälle, ja hiireen reagoi vain tausta. Siksi AL-logoon tehtiin oikeat pursotetut A- ja L-kirjaimet lasimateriaalilla, ja ne kallistuvat osoittimen suuntaan.

Millä työkaluilla tein tämän sivuston?

Tämä sivusto käyttää Three.js:ää 3D-grafiikkaan, React Three Fiberiä, joka tuo Three.js:n Reactiin, ja drei-apukirjastoa. Kehitys ja build tehdään Vitellä. Kirjasto opentype.js lukee fonttitiedostot, jotta kirjaimista saa 3D-muotoja. Kaikki esineet rakennetaan koodissa, joten 3D-mallinnusohjelmaa tai valmiita malleja ei tarvittu. Kaikki kirjastot ovat ilmaisia ja avointa lähdekoodia.

Versiot ovat React 19, React Three Fiber 9, Three.js 0.180 ja Vite 7. Jokainen sivu on oma React-komponentti, joka toimii omassa HTML-tiedostossaan ja upotettuna esitykseen.

Miten 3D-kirjaimet tehdään fontista?

Kirjasto opentype.js lukee fontista jokaisen kirjaimen ääriviivat. Ne muutetaan SVG-poluiksi, Three.js:n SVGLoader tekee niistä muotoja ja ExtrudeGeometry pursottaa muodot paksuiksi kappaleiksi, joiden reunat viistetään. Jokainen kirjain on oma kappaleensa, joten hiiri voi tönäistä yhtä kerrallaan. Etusivun sanat "Anglé Labs" on tehty näin kirjain kirjaimelta.

Kirjaimissa on painoton fysiikka. Jousi vetää kirjaimen takaisin paikalleen, hiiren liike tönäisee ja pyöräyttää sitä, ja kirjaimet törmäilevät toisiinsa. Kun tämä toimi, sanoin: "toi on hieno nyt".

Miten liikkuva valotausta toimii?

Tausta on yksi fragmenttishaderi koko ruudun kokoisella tasolla. Se laskee jokaiselle pikselille fbm-kohinaa, jota vääristetään toisella kohinalla, jolloin valo virtaa kuin savu. Osoitin työntää virtaa sivuun ja napautus lähettää aallon. Sama shaderi on AL-logon takana, ja siitä tuli koko sivuston ilme.

Valovirta on sivun raskain osa. Kun mittausagentti korvasi sen kokeeksi tasaisella värillä, etusivun ruutuaika putosi Retina-tarkkuudella 10,8 millisekunnista 4,6:een. Puhelimessa kohinakerroksia on siksi vähemmän.

Miten levykaruselli on rakennettu?

Jokainen levy on Three.js:n rengas, jossa on metallireuna ja keskireikä. Kansi piirretään kanvaasiin projektin kuvasta tai logosta, ja siitä tehdään tekstuuri. Levyn takapuolelle koodi piirtää sateenkaaren värisen CD-pinnan uria myöten. Levyt ovat kaarella, ja naapurilevyt kääntyvät niin, että sateenkaaripuoli näkyy.

Levyillä ovat Anglés Marketing ja Hoidettu.

Ensimmäisessä versiossa pystyrulla jäi jumiin levyille. Rullasit, levyt pyörivät, mutta sivu ei vaihtunut ennen viimeistä levyä. Nyt pystysuunta vaihtaa aina sivua, levyjä vaihdetaan omilla ←- ja →-napeilla ja Jatka tästä vie seuraavaan vaiheeseen.

Miten putoavat metallipalikat toimivat?

Painovoima-sivulla Anglé Labsin neljä lupausta ovat raskaita metallipalikoita. Ne putoavat yksi kerrallaan, pomppaavat kerran pienesti ja vaappuvat paikalleen pinoon. Fysiikka on kirjoitettu itse. Pino on yksi sarake, joten se ei kaadu, ja jokainen isku tärisyttää alla olevia palikoita. Hiiri voi tönäistä palikkaa, mutta se palaa paikalleen.

Viimeinen Ota yhteyttä -palikka putoaa korkeammalta ja puolitoistakertaisella painovoimalla. Juuri ennen osumaa se hidastuu hetkeksi, ja sitten koko ruutu tärähtää 0,6 sekunnin ajan ja koko pino hyppää. Halusin sen putoavan kunnolla kovaa, ja se on sivuston ainoa kohta, jossa efekti saa olla raju.

Jokaista palikkaa voi painaa, ja painallus avaa lupauksen oman sivun. Palikan päällä on näkymätön mutta oikea linkki, joten myös hakukone löytää sivut.

Miten sivulta toiselle siirrytään rullalla?

Kaikki sivut ovat päällekkäin koko ruudun kerroksina. Rulla muuttaa yhtä lukua, ja siitä lasketaan joka ruudulla jokaisen kerroksen tila. Lähtevä sivu lentää kameraa kohti, sumenee ja palaa valoksi, ja tuleva nousee alhaalta ja kallistuu paikalleen. Siirtymä tehdään CSS-muunnoksilla kerroksen päälle, joten sivujen omat 3D-näkymät pysyvät ennallaan.

Vain näkyvä sivu piirtää, ja muiden kanvaasit nukkuvat, koska kaksi koko ruudun valotaustaa yhtä aikaa on raskas näytönohjaimelle. Siirtymän keskellä välähtää. Ensimmäinen versio oli minusta "aivan liian voimakas mutta hieno", joten välähdys laskettiin 92 prosentista 20 prosenttiin.

Miksi 3D-sivu nykii siirtymässä?

Nukkuva kanvaasi kääntää shaderinsa vasta herätessään. Kun sivu heräsi kesken siirtymän, Three.js linkitti ohjelmat ja latasi tekstuurit juuri silloin, ja ruutu jäätyi 167–450 millisekunniksi, pahiten taaksepäin rullatessa. Korjasimme sen esilämmityksellä. Jokainen kanvaasi kääntää shaderinsa ja piirtää yhden näkymättömän ruudun heti latauksen jälkeen joutoajalla.

Esilämmitys tehdään yksi kanvaasi kerrallaan aloitussivua lähimmästä alkaen. Korjauksen jälkeen pisin ruutu oli kaikissa siirtymissä noin 17 millisekuntia (Chrome, kolmen ajon mediaani).

Miten 3D-sivu saadaan toimimaan iPhonessa?

Puhelin tunnistetaan kosketusnäytöstä, ja silloin sivu renderöi kevyemmin. Pikselisuhde alkaa 1,5:stä ja putoaa portaittain 1,25:een ja 1:een, jos ruutuajan mediaani on sekunnin ajan yli 20 millisekuntia. Takaisin sitä ei nosteta, jotta laatu ei heilu. Reunanpehmennys pidettiin päällä, koska ilman sitä palikoiden reunat porrastuivat.

Safarin osoitepalkki muuttaa näkymän korkeutta rullatessa. Jos jokainen muutos varaa kanvaasit uudelleen, sivu nykii. Koon päivitys odottaa nyt 200 millisekuntia, ja yhdessä mittauksessa uudelleenvaraukset putosivat 152:sta kahdeksaan.

Miksi esitys etenee itse?

Halusin, että esitys näkyy loppuun asti, vaikka kävijä ei koskisi mihinkään. Jos kävijä ei tee mitään muutamaan sekuntiin, esitys etenee yhden askeleen. Mikä tahansa rulla, kosketus tai näppäin aloittaa odotuksen alusta. Jatka tästä -nappi vie eteenpäin heti, joten automaattia ei tarvitse odottaa.

Ennen askelta ruudun yläreunaan piirtyy ohut hopeinen viiva, jonka kärki on meripihkaa. Viivan vieressä on taukonappi, koska saavutettavuusvaatimus WCAG 2.2.2 edellyttää, että automaattisen liikkeen voi pysäyttää. Jos laitteessa on valittu vähennetty liike, automaattista etenemistä ei ole lainkaan.

Aloitussivun ja jokaisen alasivun yläpalkissa on Katso 3D-esitys -nappi. Aloitussivulla esitys palaa sillä jousella alkuun, ja alasivulta nappi avaa esityksen alusta. Esityksen aikana yläpalkin napit näkyvät himmeinä, ja Ohita 3D-esitys -nappi vie suoraan aloitussivulle.

Näkeekö Google 3D-sivun tekstin?

Kanvaasiin piirrettyä tekstiä hakukone ei voi lukea. Siksi buildissa jokaisen sivun teksti kirjoitetaan valmiiksi HTML:ään. Tekoälyhakujen botit lukevat pelkän HTML:n eivätkä aja JavaScriptiä, joten ilman tätä ne näkisivät tyhjän sivun. React korvaa staattisen sisällön ensimmäisellä renderöinnillä, joten kävijä ei näe välähdystä.

Sama vaihe lisää jokaiselle sivulle jakotagit ja rakenteisen datan (JSON-LD). Arvosteluja tai hintoja siinä ei ole.

Pitkä teksti ei kuulu esitykseen. Asiakkaan polulla on vähän tekstiä, ja selittävät sivut, kuten tämä opas, ovat alatunnisteen linkkien takana. Esityksen ulkopuolista tekstiä ei lisätä pelkästään Googlea varten.

Miten tein työn Claude Codella?

1. Referenssi ja yksi lause

   Annan Claude Codelle referenssin, esimerkiksi Unicorn-demon upotuskoodin, ja kerron yhdellä lauseella, mitä haluan. Usein saneluna, suomea ja englantia sekaisin.

2. Suunnitelma ennen isoa työtä

   Ennen isompaa toteutusta Claude kirjoittaa suunnitelman muistiinpanoihini: mitä tehdään, missä järjestyksessä ja mitkä tiedostot muuttuvat. Minä hyväksyn tai muutan sen.

3. Orkestroija ja subagentit

   Pääsessio on työnjohtaja. Työn tekevät subagentit rinnakkain: yksi tekee fysiikkamoduulin, toinen 3D-esineet, kolmas kokoaa sivun ja neljäs liittää sen esitykseen.

4. Jokainen agentti omassa worktreessä

   Agentit työskentelevät omissa git worktreeissään. Oma kehityspalvelimeni pyörii pääkansiossa, eikä agenttien puolivalmis koodi näy siinä ennen kuin se on tarkistettu ja yhdistetty.

5. Testi buildilla

   Jokainen muutos testataan tuotantobuildilla. Kuvat otetaan headless-Chromella, ja hiiren liike ja rullaus ajetaan oikeina tapahtumina. Lopullisen tuntuman katson itse koneella ja puhelimella.

6. Kaksi tarkastajaa ja korjaaja

   Koodikatselmoija lukee muutokset ja visuaalinen tarkastaja katsoo kuvat, eikä kumpikaan muokkaa mitään. Korjaaja korjaa vakavat ja keskitason löydökset. Idea-sivulla löydöksiä tuli 19, ja niistä 8 korjattiin.

7. Commit joka vaiheessa

   Jos painan stop, agentit pysähtyvät ja commitoimaton työ katoaa. Siksi agentit commitoivat jokaisen vaiheen.

Mikä on angle-3d-skilli?

Sivua rakentaessa koko oppi pakattiin Claude Code -skilliksi nimeltä angle-3d. Sen repo on nimeltään 3d-kone. Skilli on kansio, jossa on ohje Claudelle, viiteohjeet jokaisesta tekniikasta, apuskriptit ja sivustopohja. Yhdellä config-tiedostolla ja yhdellä komennolla siitä syntyy sama 3D-sivusto uudella nimellä, teksteillä, logolla ja projekteilla.

Claude Code lataa skillin itse, kun pyyntö koskee 3D-sivua. Skilli on vielä yksityinen.

Mitkä virheet veivät eniten aikaa?

• Näkymätön sivu nappasi klikkaukset React Three Fiberin kanvaasi asettaa itselleen pointer-events: auto, joten piilotetun kerroksen pointer-events: none ei riittänyt. Korjaus on visibility: hidden.
• Kirjaimet katosivat Kutsu vector.project(camera) ennen ensimmäistä renderöintiä antoi NaN-arvoja, koska kameran matriisi oli vielä yksikkömatriisi. Korjaus on camera.updateMatrixWorld() heti kameran asettamisen jälkeen.
• Herätysruutu tönäisi kirjaimia Kun kanvaasi herää unesta, ensimmäinen aikaväli on valtava ja hiiren nopeus absurdi. Jos ruutujen väli on yli 250 millisekuntia, syöte synkronoidaan ennen fysiikkaa.

Usein kysyttyä

Haluatko oman 3D-sivun?

Jos haluat yrityksellesi samanlaisen sivun, soita mulle tai varaa ilmainen kartoitus. Nopeudesta, puhelimista ja Google-näkyvyydestä kerron lisää Nettisivut-sivulla.

Varaa ilmainen kartoitus · Soita 040 961 2120