3D modell beágyazása bármelyik weboldalra

Hogyan tegyél 3D modellt a weboldaladra

Kipróbálnád rögtön? Itt a Beltorion 3D modell beágyazó, és pár perc alatt interaktív 3D tartalom kerül az oldaladra.

Szeretnél 3D modellt tenni a weboldaladra, de fogalmad sincs, hol kezdj hozzá? Nem vagy egyedül. A legtöbb oldaltulajdonos itt akad el, mert a 3D tartalom technikailag nehéznek tűnik. WordPress, Webflow vagy egyedi fejlesztésű oldal, a folyamat általában olyan kódolási tudást feltételez, ami a legtöbbeknek nincs meg.

A web már rég nem lapos. A webshopok termékbemutatóitól az oktatóanyagokon át a márkatörténetekig mindenhol megjelenik a 3D grafika, és olyan mélységet ad, amit egy állókép vagy egy videó egyszerűen nem tud.

Csakhogy a 3D világa elsőre ijesztő. A WebGL és a three.js megtanulása hosszú út, a bonyolult 3D logika beépítése egy hagyományos weboldalba pedig önmagában is komoly feladat.

Mi lenne, ha ezt a szakadékot át lehetne hidalni? Ha úgy adhatnál a látogatóidnak interaktív 3D élményt, hogy közben nem kell 3D programozóvá válnod?

Pontosan ezért készítettük el a Beltorion 3D modell beágyazót . Feltöltesz egy modellt, élő előnézetben beállítod, hogyan nézzen ki, a végén pedig kapsz egy tiszta, gyors, keretrendszer nélküli kódot, ami bármelyik weboldalon működik.

Mi az a Beltorion 3D modell beágyazó?

Röviden, egy no-code eszköz, ami helyetted írja meg a kódot. Három lépésre egyszerűsíti a beágyazható 3D jelenet elkészítését.

• Feltöltés: indulj egy szokásos 3D modellfájlból ( .glb vagy .gltf).

• Beállítás: a felületen valós időben állítod a jelenet minden elemét, a világítást, a kameraszöget, a modell méretét, a forgás viselkedését.

• Generálás: egy kattintás, és kész a teljes csomag, önálló HTML, CSS és sima JavaScript.

A kapott kód nem függ semmitől. Nem kell hozzá React, Vue vagy bármilyen más könyvtár, csak tiszta, objektumorientált JavaScript, ami magától működik.

Mi van a motorháztető alatt

Az eszköz kívülről egyszerű, belül viszont modern architektúrára épül. Fejlesztőként számíthatsz rá, hogy a kimenete nemcsak működik, hanem olvasható és karbantartható is.

A motor: three.js

Az élő előnézetet és a generált kódot is a three.js hajtja, a webes 3D grafika iparági alapkönyvtára. Ezzel jön a jó teljesítmény, a széles böngészőtámogatás és egy hatalmas funkciókészlet.

A vezérlőpult: React felület

A beállítópanel, amivel dolgozol, egy modern React alkalmazás. Ettől gyors, és ezért frissül azonnal a 3D előnézet. A React viszont csak magában a generátorban van jelen. Amit exportálsz, az 100%-ban sima JavaScript, tehát könnyű és mindenhol elfut.

A lényeg, keretrendszer nélküli kódgenerálás

Ez a generátor szíve. Amikor elhúzol egy csúszkát vagy kiválasztasz egy színt, egy JavaScript állapotobjektumot írsz át. A Kód generálása gombra kattintva az eszköz három dolgot csinál.

• Elmenti a beállításokat: a teljes konfigurációt, a kamera pozícióját, a fények színét, a forgási sebességeket egy tiszta config.js fájlba írja.

• Legenerál egy osztályt: készít egy jól tagolt JavaScript osztályt (ModelViewer.js), ami beolvassa a konfigurációt és felépíti a three.js jelenetet. A logika külön kezelőkbe van szedve (SceneManager, RotationManager, MouseManager), így a jelenet felépítése, az animációs ciklus és az egérkezelés nem folyik egybe.

• Ad egy vázat: mellé kapsz egy egyszerű index.html és style.css fájlt, hogy legyen mihez igazodni a beépítésnél.

Az eredmény olyan kód, amit egy fejlesztő elolvas, megért, és ha kell, tovább is fejleszt.

Az első 3D beágyazásod, lépésről lépésre

Nézzük végig a folyamatot. Öt percnél kevesebb.

1. lépés, készítsd elő a modellt

.gltf vagy .glb formátumú modellre lesz szükséged. A .glb általában kényelmesebb, mert egyetlen fájlba csomagolja a háló és a textúrák minden adatát. Honnan szerezz ilyet?

• Ingyenes vagy fizetős modellek olyan oldalakon, mint a Sketchfab.

• Rendelj egyet egy 3D grafikustól.

• Exportáld a sajátodat 3D szoftverből, például Blenderből.

2. lépés, töltsd fel és állítsd be élőben

Nyisd meg a 3D generátort, töltsd fel a .glb fájlt, és máris ott van az előnézeti panelen. Innentől jön a java. A beállítópanelen ezeket állíthatod:

• Kamera: a látószög (FOV) állításával nagylátószögű vagy teleobjektíves hatást kapsz, és megadhatod a kamera kiindulási pozícióját is.

• Világítás: a környezeti és az irányított fény színe és erőssége külön szabályozható.

• Forgás: beállítod, mit csináljon a modell rámutatáskor, húzáskor és tétlenül. A sebesség és a forgatás határai is a kezedben vannak.

• Méret: a modell pontosan akkora lesz, amekkora jól mutat a saját dobozában.

3. lépés, generáld le és értsd meg a kódot

Ha jónak látod az előnézetet, kattints a Kód generálása gombra. Ezeket a fájlokat kapod:

• index.html: az alap HTML szerkezet, benne a <div> konténerrel a nézegetőnek.

• style.css: minimális CSS, amitől a nézegető reszponzív lesz.

• config.js: a felületen összeállított beállítások.

• ModelViewer.js: a fő JavaScript osztály, ami életre kelti a jelenetet.

• your-model.glb: a 3D modelled.

Beágyazás platformonként

Mivel a kimenet szabványos webes technológia, gyakorlatilag bárhová beteheted.

Az általános módszer

Egyedi fejlesztésű oldalon így megy:

• Töltsd fel a fájlokat: a ModelViewer.js, config.js és a .glb modell kerüljön a webszerveredre vagy a fájltárhelyedre.

• Tedd be a HTML-t: másold a <div id=“model-viewer-container”></div> elemet a generált index.html fájlból oda, ahol a nézegetőt látni szeretnéd.

• Hivatkozd a CSS-t: a style.css hivatkozása a dokumentum <head> részébe kerüljön.

• Hivatkozd a JavaScriptet: az alábbi <script> blokk közvetlenül a záró </body> tag elé való. Az útvonalakra figyelj.

<script type="module">
  import { ModelViewer } from './ModelViewer.js'
  import { config } from './config.js'

  document.addEventListener('DOMContentLoaded', () => {
    new ModelViewer(config)
  })
</script>

3D modell WordPressbe

• Fájlok feltöltése: a .js és .glb fájlok mehetnek FTP-n vagy SFTP-n a szerverre, például a gyerektéma egyik mappájába, vagy fel a Médiatárba.

• Kód beillesztése: azon az oldalon vagy bejegyzésen, ahol a nézegetőt akarod, vegyél fel egy Egyéni HTML blokkot.

• Beillesztés és javítás: másold be a HTML-t, a CSS-t és a JS-t az általános módszerből, majd írd át az útvonalakat a src és href attribútumokban oda, ahová a fájlokat feltöltötted.

3D modell Webflowba

• Fájlok feltöltése: a .js és .glb fájlokat tedd olyan helyre, ami közvetlen fájl-URL-t ad, például Amazon S3-ra. Kis JS fájlok néha felmennek a Webflow asset paneljére is, de a külső tárhely megbízhatóbb.

• Div elem felvétele: húzz egy Div elemet az oldalra oda, ahol a nézegetőt akarod. Az elem beállításainál add meg id-nek azt, ami az eszköz alapbeállításai között a Container Selector mezőben szerepel. Alapértelmezésben ez a model-container. Osztályt is tehetsz rá, és stílusozhatod, ahogy jólesik.

• Egyéni kód: a Page Settings alatt keresd meg a Custom Code részt.

  • Az Inside <head> tag mezőbe kerül a <style> tag a CSS-sel.

  • A Before </body> tag mezőbe kerül a <script type=“module”>…</script> blokk.

  • Az útvonalakat itt is írd át a külső tárhelyre.

Shopify és a többi platform

Máshol is ugyanez az elv.

• Shopify: a fájlok a Settings > Files alá mennek. A sablon kódjában (a .liquid fájlokban) veszed fel a HTML konténert, és hivatkozod a scriptet meg a stílust, a helyes útvonalakhoz a Liquid asset_url szűrőjével.

Mire jó ez a gyakorlatban

Nem tudod, mire használnád a 3D modellt a saját oldaladon? Néhány példa:

• Webshop, termékbemutató: a vásárló megforgatja és minden szögből megnézi a terméket, mielőtt megveszi.

• Portfólió: építészek, tervezők és grafikusok interaktívan mutathatják meg a munkájukat.

• Oktatóanyag: iskolák és képzési platformok 3D modellel tehetik érthetőbbé a tananyagot.

• Ingatlan: alaprajz és bútorozás 3D-ben, helyszíni séta nélkül.

• Játék és szórakoztatás: karakterek és játékelemek bemutatása.

• Gyártás és mérnöki munka: bonyolult gépek és alkatrészek a műszaki dokumentációban.

Mihez képest éri meg a Beltorion beágyazója

Többféleképpen tehetsz 3D modellt egy weboldalra. Így néz ki a három út egymás mellett.

Kézzel írt three.js kód

• Előny: teljes kontroll, semmi korlát

• Hátrány: hónapokig tart megtanulni, a hibakeresés nehéz, a fejlesztés lassú

• Kinek való: tapasztalt fejlesztőnek, akinek van 3D programozási rutinja

Platformra írt bővítmények

• Előny: könnyen telepíthető, az adott platformra optimalizált

• Hátrány: egyetlen platformhoz kötött, havidíjas, a testreszabás korlátozott

• Kinek való: annak, aki csak egyetlen platformon dolgozik

Beltorion 3D modell beágyazó

• Előny: nem kell kódolni, bármelyik platformon működik, egyszer generálsz, és mindent beállíthatsz

• Hátrány: tudni kell fájlokat feltölteni egy tárhelyre

• Kinek való: oldaltulajdonosnak, aki profi 3D tartalmat akar, a technikai nyűg nélkül

A SEO-előny, amiért a Google szereti az interaktív tartalmat

A látványon túl a 3D tartalomnak kézzelfogható SEO haszna is van. A keresőmotorok a felhasználói élményt nézik, az interaktív tartalom pedig javítja a fontos mutatókat.

• Hosszabb ott töltött idő: a látogató elidőzik a modellel, ami a Google felé azt jelzi, hogy értékes az oldalad.

• Alacsonyabb visszafordulási arány: ha van mit csinálni az oldalon, kisebb eséllyel lép vissza azonnal.

• Több interakció: a kattintás és a húzás mind pozitív jelzés.

• Jobb konverzió: webshopban a 3D-ben körbejárható termék érezhetően növeli a vásárlói bizalmat.

Vágj bele

A Beltorion 3D modell beágyazó nem egyszerűen egy eszköz, hanem egy másfajta munkamenet. Azzal a tudással teszel 3D tartalmat a projektjeidbe, ami már megvan neked. Te a látványon dolgozol, a bonyolult 3D alapokat mi megírtuk helyetted.

Kipróbálnád? Itt a Beltorion 3D modell beágyazó, és pár perc alatt interaktív 3D tartalom kerül az oldaladra.