Liigu sisu juurde

Kerge vaade: lehed avanevad kiiresti ja ilma 3D-graafikata. Näitame kerget vaadet, sest 3D-graafika oleks selles seadmes aeglane. Sisu on sama.

Lülita 3D sisse

@layer components { .loader, #gl, #p-cover, .cursor, [data-js~="global-mute-btn"], [data-js~="menu-toggle"], .about-model__loader { display: none !important; } [data-router-view], [dom2webgl] { visibility: visible !important; opacity: 1 !important; } [data-reveal] { opacity: 1 !important; translate: none !important; } .swap-title.is-fonts-wait { opacity: 1; } .swap-title.is-pending .swap-title__answer::before { transform: translateY(-120%); } .swap-title.is-pending .swap-title__answer em { transform: none; } body:not(.is-touch) { overflow-y: visible !important; } body { user-select: text !important; -webkit-user-select: text !important; } .project-case { background: var(--project-bg); color: var(--project-fg); } .header { position: relative !important; top: auto !important; flex-wrap: wrap; gap: 1rem; } .header__logo { position: static !important; height: auto !important; } .header [data-js~="nav-inner"] { display: flex !important; flex-wrap: wrap; justify-content: center; gap: .5rem; } .header .language-switcher { display: flex !important; } .header [data-js~="nav-inner"] > nav { display: flex !important; flex-wrap: wrap; justify-content: center; } .header .nav-item { display: inline-flex !important; } .logo.is-awaiting :is(.logo__pixel, .logo__word path) { opacity: 1 !important; } .logo.is-awaiting .logo__square { stroke-dashoffset: 0 !important; } body:is(.route-about, .route-services, .route-projects) .header__logo svg { color: #fff; } [data-router-view="homeContact"] { display: flex; min-height: 80svh; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 4rem 1rem; } .home-scene__fallback { display: block !important; visibility: visible !important; } .home-scene__heading.sr { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } .home-scene__heading h1 { max-width: 14ch; margin: 0; color: #1c211f; font-family: var(--font-display); font-size: clamp(2.75rem, 6vw, 5.5rem); font-weight: 400; line-height: 1; text-align: center; } body.route-projects { background: #06080e; } .project-grid { position: static; padding-top: 3rem; opacity: 1; visibility: visible; pointer-events: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .project-grid .project-grid__card { opacity: 1; translate: none; } .project-grid .project-grid__scroll { overflow: visible; overscroll-behavior: auto; } body.route-services { background: #070b13; } .services-space.services-space { grid-template-columns: 1fr; padding-top: 3rem; row-gap: 2.5rem; } .services-space__selection { display: none; } .services-space .services-space__panels { display: grid; grid-column: 1; grid-row: auto; grid-template-columns: 1fr; gap: 1.2rem; max-width: none; border: 0; background: none; box-shadow: none; backdrop-filter: none; } .services-space .service-panel, .services-space .service-panel.is-active { grid-area: auto; position: relative; min-height: 0; margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); opacity: 1; visibility: visible; transform: none; border: 1px solid color-mix(in srgb, var(--service-color) 25%, transparent); border-radius: var(--radius-md); background: rgba(7, 11, 19, .94); } } @layer contexts { body:is(.route-about, .route-services, .route-projects) :is(.nav-item.ui-button, .header .language-switcher.ui-control-group) { color: var(--color-paper); } .project-grid .project-grid__close, [data-js~="project-cta-link"], .project-grid-toggle, .project-nav, .works-index { display: none; } }

Valmistan graafikat ette. Esimesel külastusel võib see veidi aega võtta.

Henry Lõiv

Veebidisain ja arendus

3D ja WebGL

Artiklid interaktiivsetest 3D-veebilahendustest, tootevaaturitest ja WebGL-arendusest.

Kiirvastused

Kiirvastus

Miks Three.js annab pärast lehtede vahetamist „context lost” vea?

Kontrolli Three.js ressursse ja renderdaja elutsüklit, kui viga tekib pärast SPA navigeerimist. Stseenist eemaldamine ei vabasta kõike automaatselt.

3D ja WebGL16. oktoober 2026 1 min lugemist
Kiirvastus

Miks väike GLB-fail kasutab veebis palju mälu?

GLB allalaadimismaht ei võrdu GPU mälukuluga. Vaata tekstuuride mõõtmeid, lahtipakitud mahtu ja sobiva GPU-pakkimise võimalusi.

3D ja WebGL16. oktoober 2026 1 min lugemist

Loon veebilehti ja veebirakendusi ettevõtetele, agentuuridele ja tootetiimidele. Vajaduse korral aitan ka disaini, animatsiooni ja interaktiivse 3D-ga.

Räägime projektist Vaata projekte

Räägime
sinu projektist.

Kirjuta paar rida. Laine toob need mulle.

hello@dsgnbyhl.com

Esimene konsultatsioon on tasuta.

Majutuspartner

3D ja WebGL

Kiirvastused

Miks Three.js annab pärast lehtede vahetamist „context lost” vea?

Miks väike GLB-fail kasutab veebis palju mälu?

Räägime
sinu projektist.

Kirjelda oma projekti

Aitäh!

Kiirvastused

Miks Three.js annab pärast lehtede vahetamist „context lost” vea?

Miks väike GLB-fail kasutab veebis palju mälu?

Räägimesinu projektist.

Räägime
sinu projektist.