Fedélnyitás és 3D forgatás: működő minta

1.Fedélnyitás valódi termékfotóból

Desktopon vidd rá a kurzort, mobilon egyszerűen görgess ide. Ugyanaz a két trigger, amit Beatrix is megírt, csak nem egy lapos képet döntünk meg, hanem két HIVATALOS stúdiófotó között úsztatunk át: csukott fedél és nyitott fedél. Minden pixel valódi termék.

2.A teljes kód, amit át kell venni

Ennyi az egész. Nincs benne könyvtár, nincs benne build, és nem tölt be semmit külső helyről.

<!-- HTML: two stacked images inside one figure -->
<div class="kc">
  <figure>
    <img class="closed" src="19red_main.jpg" alt="...">
    <img class="open"   src="19red_open.jpg" alt="..." loading="lazy">
  </figure>
</div>

/* CSS: stack them, fade the top one out */
.kc figure{position:relative;aspect-ratio:1200/848}
.kc figure img{position:absolute;inset:0;width:100%;height:100%;
               object-fit:contain;transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
.kc figure img.open{opacity:0}

/* desktop: hover. Guarded so touch devices never get a stuck hover state. */
@media (hover:hover){
  .kc:hover figure img.closed{opacity:0}
  .kc:hover figure img.open  {opacity:1}
}
/* mobile: the observer below adds .seen when the card scrolls into view */
.kc.seen figure img.closed{opacity:0}
.kc.seen figure img.open  {opacity:1}

// JS: mobile only, opens the lid when the card is ~55% visible.
// It keeps .seen (does not toggle back), so the lid stays open once reached.
if (!window.matchMedia('(hover:hover)').matches) {
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('seen'); io.unobserve(e.target); } });
  }, { threshold: 0.55 });
  document.querySelectorAll('[data-kc]').forEach(el => io.observe(el));
}

3.3D forgatás: ez már él

Kilenc modell van kész, forgatható és zoomolható, desktopon és mobilon egyaránt. Nem kell hozzá új fejlesztés, csak be kell emelni. Az AR kódban be van kötve mind a kilencre (ios-src + ar-modes="webxr scene-viewer quick-look"), és az USDZ-fájlok is ott vannak.

A teljes, több modellt és színváltozatot kezelő oldal: kamadochef-3d.pages.dev

<script type="module" src="https://unpkg.com/@google/model-viewer@3.5.0/dist/model-viewer.min.js"></script>

<model-viewer src="model.glb" ios-src="model.usdz" ar ar-modes="webxr scene-viewer quick-look"
              camera-controls touch-action="pan-y"
              shadow-intensity="1" exposure="1.05"></model-viewer>

4.Miért nem jött ki tökéletesre a mostani fedélnyitás

Megnéztem a kc_lidopen.html-t. A technika ez volt: egy beágyazott PNG-re transform: translateY(-8%) rotateX(26deg), hover és IntersectionObserver triggerrel. A triggerek jók, a probléma egy szinttel lejjebb van.

• Egy lapos fotón nincsenek meg a szükséges pixelek. Ha a fedelet CSS-ben megdöntjük, csak a meglévő képpontok billennek meg. A grill BELSEJE, a rács, a fedél alsó éle nincs a képen, tehát nyitáskor sem tud előbukkanni. Ezért látszik inkább nyírásnak, mint nyitásnak.
• Ez nem hangolási kérdés. Nincs az a szög- vagy perspektíva-érték, ami hiányzó képi információt pótolna.
• AI-val megnyittatni a fedelet nálunk visszafelé sült el. Amikor termék-fotót adtunk AI-nak átrajzolásra, a logó zagyva lett, a polc duplázódott, egy közeli képre pedig egy versenytárs logóját tette rá. Ezért nálunk szabály: a grillt AI nem rajzolhatja át, a termék-pixelek valódiak maradnak.

5.Ha valódi, zsanéros 3D-s nyitás kell

Ez is járható út, csak nem a mostani fájlokból. Megmértem a kilenc GLB-t: mindegyikben 0 animáció van, és összesen 2 node, vagyis a fedél nincs külön geometriaként leválasztva. Ahhoz, hogy nyíljon, három dolog kell.

• A fedél külön objektum legyen, a forgáspont (zsanér) a hátsó élre állítva.
• Egy glTF-animáció exportálva a modellbe, például lid_open néven.
• A weboldalon: <model-viewer animation-name="lid_open">, és hoverre/görgetésre modelViewer.play({repetitions:1}).