Ako zobraziť interaktívne modely 3D objektov na webovej stránke: 4 kroky

Predpokladajme, že ste navrhli 3D model v programe AutoCAD alebo v inom programe na tvorbu 3D modelov a chcete ho zobraziť na webovej stránke bez toho, aby ste stratili alebo ohrozili jeho 3D interaktivitu. Tento článok vám poskytne niekoľko možností, ako to urobiť.

Metóda 1 z 2: Použitie Javascriptového rámca jsc3d

Upozorňujeme, že jsc3d je javascriptový rámec, ktorý poskytuje prehliadač 3D objektov pre webové stránky. Je kódované výhradne v jazyku javascript a na vykresľovanie a interakciu vyžaduje plátno HTML. Poskytuje ortografické zobrazenie .

Stiahnite si súbor jsc3d zip z Google. Odkaz je: http://code.Google.com/p/jsc3d/.

Použite kód zobrazený na obrázku. Na miesto tmavočerveného zvýrazneného textu napíšte podľa potreby názov cesty k súboru. Uistite sa, že formát vášho súboru je .obj alebo ho inak prekonvertovať na .obj.

Uistite sa, že spĺňate požiadavky:

  • Prehliadač s povoleným Javascriptom
  • Podpora HTML 5
  • Podpora plátna.

Metóda 2 z 2:Použitie tretích strán

Vyberte si službu. Existujú rôzne webové stránky, ktoré poskytujú zobrazenie 3D objektov.

Použite odkaz, ktorý vám poskytnú. Pri väčšine týchto služieb môžete odoslať svoj 3d súbor a získať odkaz, ktorý môžete vložiť na svoju webovú stránku.

  • Napríklad pomocou aplikácie sketchfab.com sa vám zobrazí takýto odkaz:
    <iframe width="640" height="480" frameborder="0" allowFullScreen webkitallowfullscreen mozallowfullscreen src="https://sketchfab.com/models/2f145c2ba8164bc6b7083f80617eb7fc/embed"></iframe>
    <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
    <a href="https://sketchfab.com/models/2f145c2ba8164bc6b7083f80617eb7fc" style="font-weight: bold; color: #1CAAD9;">Wikihow3d</a>
    podľa <a href="https://sketchfab.com/lal.abhishek" style="font-weight: bold; color: #1CAAD9;">lal.abhishek</a>
    na stránke <a href="https://sketchfab.com" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
    </p>
    
  • Navštívte tento odkaz a pozrite si ukážku, ako by to malo vyzerať.