# 02 Filmes kamera és térbeli történet | Astro Dizájn Elemek > Kameramozgások és térhatás: 2.5D rétegparallaxis, előre renderelt Canvas képsor, élő Three.js építészeti bejárás és termékszerű körpálya. *Source: https://airanking.pro/autonom-weboldal/astro-dizajn-elemek/02-kamera-es-ter* --- [Autonóm Weboldal](/autonom-weboldal) / [✦ Astro Dizájn Elemek (12)](/autonom-weboldal/astro-dizajn-elemek) [← 01](/autonom-weboldal/astro-dizajn-elemek/01-morphing)[12](/autonom-weboldal/astro-dizajn-elemek)[03 →](/autonom-weboldal/astro-dizajn-elemek/03-anyagok-es-feny) [01Morphing](/autonom-weboldal/astro-dizajn-elemek/01-morphing)[02Kamera & Tér](/autonom-weboldal/astro-dizajn-elemek/02-kamera-es-ter)[03Anyagok & Fény](/autonom-weboldal/astro-dizajn-elemek/03-anyagok-es-feny)[04Tartalomfeltárás](/autonom-weboldal/astro-dizajn-elemek/04-tartalomfeltaras)[05Tipográfia](/autonom-weboldal/astro-dizajn-elemek/05-mozgo-tipografia)[06Termék 3D](/autonom-weboldal/astro-dizajn-elemek/06-terbeli-termek)[07UI & Átmenetek](/autonom-weboldal/astro-dizajn-elemek/07-felulet-es-oldalatmenet)[08Karakter & Állapot](/autonom-weboldal/astro-dizajn-elemek/08-reagalo-karakter)[09Röntgen-látás](/autonom-weboldal/astro-dizajn-elemek/09-rontgen-latas)[10Élő Kalkulátor](/autonom-weboldal/astro-dizajn-elemek/10-elo-adat-es-kalkulator)[11Bento & Tér](/autonom-weboldal/astro-dizajn-elemek/11-bento-es-gorgetesi-ter)[12Mikro-UI & Hang](/autonom-weboldal/astro-dizajn-elemek/12-magneses-mikrointerakciok) 02 / 12 · Élő Bemutató 3. lépcső · Three.js 3D Ingatlanfejlesztés · Hotelek · Építészet # Filmes kameramozgás és térbeli történet Ugyanazon építészeti pavilon összehasonlítása 5 rétegű 2.5D parallaxissal, előállított képsorral és élő Three.js kamerabejárással. Kamera pozíció: 50% (Közép) · Nézet: **Természetes 2.5D** ### A. 2.5D Rétegparallaxis Öt független sík réteg mozog eltérő sebességgel a virtuális mélységérzet megteremtéséhez. Minimális számítási igénnyel, 0 KB 3D-könyvtárral hoz létre filmes hatást. **Ügyfélkör:** Építészek, prémium ingatlanok, turisztikai szálláshelyek. **Technika:** GPU-gyorsított CSS 3D transzformációk (translateZ/scale). ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Fókuszréteg kép feltöltése Kép Kameraút pásztázás: 50% Képkocka: **Frame 24 / 48** · Szög: 180° ### B. Előre renderelt képsor (Scrubber) 48 diszkrét szögben rögzített képkocka görgetés- vagy csúszkavezérelt lejátszása 2D Canvas felületen. Fix, determinisztikus nézőpont, 60 FPS garantált sebességgel bármilyen régebbi telefonon is. **Ügyfélkör:** Autómárkák, precíziós ipari termékek, Apple-stílusú hardverek. **Technika:** 2D HTML5 Canvas szekvenciális kirajzolás, 0 3D GPU számítás. Kézi forgatás (360°): 50% Kamera státusz: **Statikus nézőpont** ### C. Valós idejű 3D kamerabejárás Three.js perspektivikus kamerával vezetett filmes pálya modern építészeti környezetben. A kamera valódi 3D térben mozog, nem sík rétegek között. Valós 3D renderelés, procedurális geometriai elemekből felépítve a gyors betöltődés érdekében. Kamera: **Finom automatikus körpálya** ### D. Termékszerű körbejárás Finom, lassú körpályán mozgó kamera a központi építészeti pavilon körül, rögzített fókuszponttal és egykattintásos perspektívaváltással. Nézőpont kiválasztása: TÁRGYALÁSI DEMÓ Összehasonlítás: Statikus Hero háttér vs. Filmes Rétegparallaxis AIRanking.pro ## Térérzet & Kameramozgás a prémium ügyfélszerzésben A sík képek helyett a látogató azonnal a térben találja magát. A parallax rétegek a kurzor vagy ujj elmozdulására finoman elcsúsznak egymáson, filmszerű mélységet kölcsönözve a weboldalnak. [Fő demók megtekintése (01, 03, 06) →](/autonom-weboldal/astro-dizajn-elemek/01-morphing) ✦ SAJÁT TARTALOM Próbáld ki a saját képeiddel: 📤 📤 Saját logó feltöltése Logó 🖼️ 🖼️ Parallaxis kártya kép Kép Hagyományos statikus háttér Merev kép, nincs rétegmélység, nincs kameramozgás. AIRanking.pro 👆 Mozgasd az egeret a kártya felett a parallaxis teszteléséhez ⚙️ **Hogyan működik? & Technikai adatok** 2. Szint · 2D Canvas & WebGL Grafikai motor **GPU-gyorsított CSS 3D transzformációk (perspective + translate3d) és Three.js WebGL** Eszköz DPR korlát **Math.min(DPR, 2)** Életciklus védelem **Rejtett lapon automatikusan leáll** Hozzáférhetőség **prefers-reduced-motion támogatott** Két különböző megközelítés: A és B változatban tisztán CSS 3D rétegek és 2D Canvas scrubber (0 KB WebGL terhelés); C és D változatban Three.js Camera & OrbitControls valós idejű perspektívával. Mindkét megközelítés támogatja az inaktív lapon való automatikus leállást. Becsült ráta: **--** FPS (Helyi mérés, eszközfüggő) ✦ Ügyfél-Márka Stúdió ## Személyre Szabás Tárgyaláshoz Márkapreset kiválasztása: Cégnév / Márkanév: Rövid ajánlat / Főcím: CTA Gomb felirat: Márkaszínek: Főszín (Elsődleges): Akcentszín (Másodlagos): Ügyfél Logó feltöltése (PNG, SVG, WebP · max 8 MB): 📁 Húzd ide a logófájlt, vagy **kattints a tallózáshoz** Transzparens PNG vagy tiszta SVG ajánlott Logó-kontraszt párna (fehér/sötét logókhoz): Termék- vagy Referenciakép (max 8 MB): 🖼️ Húzd ide a referenciaképet vagy termékfotót Használható a 01, 03, 04, 06, 07 és 11 modulokban Másodlagos / „Előtte” Képfeltöltés (pl. összehasonlításhoz · max 8 MB): 🖼️ Húzd ide az „Előtte” képet vagy másodlagos referenciát Használható a 03 és 04 modulokban az összehasonlító és folyékony átmenetekhez **Színek javaslata a feltöltött képből:** Kiolvastuk a domináns márkaszíneket a grafikából. **Megjegyzés ezen az eszközön** Alapértelmezésben a beállítások csak a jelenlegi böngészőlap bezárásáig élnek. 🔒 **100% Helyi adatvédelem:** A kiválasztott fájlok és márkanevek feldolgozása helyben, ebben a böngészőben történik; a bemutatóterem nem tölti fel őket szerverre és nem küldi analitikának. TÁRGYALÁSI KONCEPCIÓ ## Kiválasztott Elemek 0 db ☆ ### Még nincs kiválasztott dizájnelem Bármelyik modulban kattints a **„☆ Hozzáadás a koncepcióhoz”** gombra a kedvenc megoldások és beállított csúszkaértékek elmentéséhez! 🔒 Helyi exportálás: a fájlok nem mennek szerverre vagy CRM-be. ⛶ MOZIMÓD Élő Színpad