Verdant
Aukštos klasės gamtos istorija, kuri slenkant ištirpsta į kinematografinę 3D kelionę, o tada perduoda ramų tyrinėjimą pirmuoju asmeniu — viskas naršyklėje.
Three.js · GSAP ScrollTrigger · cannon-es · Veikia naršyklėje
Patirties eiga
Redakcinis įvadas ištirpsta į kinematografinę sceną, o ši perduoda ramų tyrinėjimą pirmuoju asmeniu.
- 01
Įžanga
Redakcinis įvadas gyvame 3D miške — prekės ženklas, antraštė ir tylus kvietimas pradėti.
- 02
Nusileidimas slenkant
GSAP ScrollTrigger veda kamerą taku į pasaulį. Puslapis nustoja elgtis kaip puslapis.
- 03
Veikėjo artėjimas
Procedūrinis keliautojas eina taku link laužo, kol kinematografinis perdavimas baigiasi.
- 04
Uždegimas
Ugnis įsižiebia kelionės pabaigoje — ženklas, kad istorija užleidžia vietą žaidimui.
- 05
Tyrinėjimas
Darbalaukyje — laisvas žaidimas: medžioklė, kūryba, statyba ir naktis, kurią reikia ištverti. Telefone lieka kinematografinė istorija; tyrinėjimui reikia darbalaukio.
Kodėl tai egzistuoja
Pavyzdys, kaip pereiti nuo slinkties prie kino ir žaidimo — ir interaktyvaus web meistriškumo įrodymas.
Nuo slinkties prie kino ir žaidimo
Dauguma rinkodaros svetainių baigiasi slinktimi. Verdant rodo, kaip iš redakcinio puslapio pereiti į erdvę, judesį ir žaidimą be aštraus pjūvio.
Three.js ir GSAP architektūra
Tipizuotos fazės ir įvykių magistralė koordinuoja kinematografiją, veikėjo kelius ir žaidimo sistemas — skaitomas demonstracinis kodas, o ne begalinis variklis.
Pasaulio sistemos
Reljefas, miškas, gyvūnija, oras ir statyba veikia greta cannon-es žaidėjo fizikos ir ramaus išgyvenimo ciklo.
Sukurta cituoti
Atviras techninis pavyzdys agentūroms ir portfolio puslapiams: veikianti versija įspūdžiui, kodas — patikimumui. MIT licencija, ne komercinis produktas.
Įeikite į patirtį
Šiam projektui reikia viso ekrano. Atidarykite naujame skirtuke ir leiskite puslapiui tapti pasauliu.
Norite tokio lygio?
Papasakokite, ką kuriate — kelią sudėliosime kartu.