Three.js-i veebileht on tavaline HTML-i, CSS-i ja näiteks Next.js-i raamistikuga sait, millele lisandub WebGL-i lõuend. See joonistab külastaja seadme graafikaprotsessori abil 3D-d reaalajas. Väike meeskond loob neli kihti: kujundus, 3D-mudelid ja materjalid, visuaalsete efektide kood ning tavaline kasutajaliides. Stuudiote avaldatud ajakavade järgi kulub ühe 3D-episoodiga saidile 8-14 nädalat ja läbivalt 3D-d kasutavale saidile 14-20 nädalat. Eelarve ulatub vabakutselise loodud WebGL-esindussaidi vähemalt 8000 dollarist kuni 50 000-100 000 dollarini, kui stuudio loob 3D iga lehe jaoks.
See juhend on tellijale. Programmeerimist tundma ei pea, kuid väike koodinäide aitab mõista, mille eest sa maksad.
Three.js-i veebilehe tehnoloogiad lihtsas keeles
| Kiht | Tavapärane tööriist | Mida see teeb |
|---|---|---|
| Raamistik | Next.js või Vite + React | Lehed, marsruutimine ja serveris loodud HTML, mida Google saab lugeda |
| 3D-renderdaja | Three.js | Joonistab võrgud, valguse ja materjalid elemendile <canvas> |
| Reacti kiht | React Three Fiber (R3F) + drei | Võimaldab arendajal kirjeldada 3D-stseeni Reacti komponentidena |
| Animatsioon | GSAP + ScrollTrigger | Seob kaamera liikumise ja elementide ilmumise kerimisasendiga |
| Sujuv kerimine | Lenis | Annab kerimisele inertsi ja ühtlase tunnetuse eri seadmetes |
| Füüsika | Rapier või cannon-es | Gravitatsioon, kokkupõrked ja objektid, mida saab ümber lükata |
| Mudelid ja materjalid | Blender, glTF/GLB, Draco, KTX2 | Mudelid eksporditakse glTF-vormingusse ja tihendatakse veebi jaoks |
| Varjutajad | GLSL | Väikesed graafikaprotsessoril töötavad programmid eripindade, moonutuste ja osakeste loomiseks |
Üks märkus eelarve kohta: varem oli osa GSAP-i lisasid tasulised. Pärast Webflow ostutehingut muutusid GSAP ja senised tasulised Clubi lisad tasuta kasutatavaks, ka ärilistel eesmärkidel. Selle litsentsikulu võid eelarvest välja jätta.
Milline näeb välja React Three Fiberi veebilehe kood
Kui oled kuulnud React Three Fiberi veebilehtedest ja tahad teada, mida see tähendab, siis siin on terviklik avavaate stseen, mis laadib tootemudeli:
import { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { useGLTF, Environment } from '@react-three/drei'
function Bottle() {
const { scene } = useGLTF('/models/bottle.glb')
return <primitive object={scene} />
}
export default function Hero() {
return (
<Canvas dpr={[1, 2]} camera={{ position: [0, 0, 4], fov: 35 }}>
<Suspense fallback={null}>
<Bottle />
<Environment preset="studio" />
</Suspense>
</Canvas>
)
}Kahekümnest reast piisab mudeli ekraanile toomiseks. Nädalad kuluvad brändiga sobiva valguse, läbimõeldud liikumise ja keskmise hinnaklassi telefonidel toimimise peale.
Kuidas Three.js-i veebileht valmib: kuus etappi
- Kontseptsioon ja animatsiooni pildikava. Enne koodi kirjutamist joonistatakse kaadritena läbi, mida külastaja igas kerimispunktis näeb ja millega saab suhelda.
- 3D-materjalide ettevalmistus. Mudelid luuakse või korrastatakse Blenderis, lisatakse tekstuurid, eksporditakse GLB-vormingusse ja tihendatakse. Kui olemas on ainult CAD-failid, võtab see etapp rohkem aega.
- Prototüüp päris telefonis. Üht esialgset stseeni katsetatakse keskmise hinnaklassi Androidi telefonis. Siin saab halvast ideest veel väikese kuluga loobuda.
- Arendus. Stseenid, kerimisega seotud liikumised, neid ümbritsev HTML-sait ja CMS-i ühendamine.
- Jõudlus ja varulahendused. Tihendamine, seadmete võimekuse arvestamine, eelvaatepildid ja vähendatud liikumise režiim. Üksikasjad leiad meie 3D-veebilehe jõudluse juhendist.
- Kvaliteedikontroll ja avaldamine. Eri brauserite katsetamine, ligipääsetavuse kontroll, analüütika ja Search Console.
Laadimine: miks 3D jõuab kohale viimasena
Three.js-i veebilehe tähtsaim tehniline otsus on laadimisjärjekord. Utsubo järgi võtab Three.js-i tuum minimeeritud kujul umbes 600 KB ning koos drei, järeltöötluse ja GLB-failiga üle 3 MB. See ei tohiks pealkirja kuvamist edasi lükata.
Seepärast saadab leht esmalt HTML-i ja eelvaatepildi ning laadib 3D-koodi alles seejärel. Ka aeglase ühendusega külastaja saab tervikliku lehe.
Kes veebilehe loob: meeskond
- Disainer / kunstiline juht: välimus, tüpograafia ja liikumisstiil.
- 3D-kunstnik: modelleerimine, UV-kaardistus, tekstuurid, valgus ja eksport.
- Loovarendaja: Three.js/R3F, varjutajad, kerimisega seotud liikumised ja jõudlus. Seda spetsialisti on kõige raskem leida.
- Kasutajaliidese arendaja: HTML-sait, CMS, vormid ja SEO põhiseadistus.
- Testija: seadmed, brauserid ja ligipääsetavus.
Väikestes stuudiotes täidab üks inimene mitut rolli, üksinda töötav vabakutseline aga kõiki. Seetõttu erinevad ajakavad ja hinnad nii palju. Avaldatud hinnavahemikud leiad meie 3D-veebilehe hinna juhendist.
Three.js, Webflow, Framer või Spline
Webflow ja Framer lubavad 3D-d lisada manuste või koodiplokkidena. Ühe dekoratiivse stseeni jaoks sellest piisab. Kui aga 3D kannab kogu esitlust, vajad täielikku kontrolli koodi ja laadimisjärjekorra üle. Eri võimalusi võrdleme artiklis „Webflow, Framer või erilahendus koodiga”.
Enne lähteülesande koostamist vaata inspiratsiooniks meie WebGL-veebilehtede näiteid. Pärisprojektid on rühmitatud selle järgi, milleks neis 3D-d kasutatakse.
Hooldus: mis saab pärast avaldamist
- Fikseeri teekide versioonid. Three.js uueneb sageli ja mõnikord muutub API. Uuenda teadlikult.
- Uuenda mudeleid ja materjale. Uus toode või värvivariant läbib sama mudeli ettevalmistamise protsessi.
- Kontrolli seadmeid. Brauserid ja graafikaprotsessorid muutuvad; testi saiti päris telefonidel igas kvartalis.
- Hoia ka varuversioon töökorras. Eelvaatepildi ja HTML-iga versiooni näevad Google ning väiksema jõudlusega telefonid.
