NALOGA 5 | Skupina6

Domača naloga 5

X3DOM - prikaz 3D objektov na spletu

Naloga je namenjena seznanjanju s X3DOM orodjem in načini, kako ustvarjamo in realiziramo 3D objekte na spletni strani brez dodatnega programiranja.

POSTOPEK:

poiščite 3D model na Sketchfab ali drugje

(za višjo oceno: skupina sama izdela svoj 3D model)
uporabite poljubno orodje za preoblikovanje vašega 3D objekta (pogoj - imeti mora X3D export)
vaš X3D model prikažite na spletni strani s pomočjo X3DOM.

Za vajo in boljše razumevanje tehnologij uporabite primere VRML in X3D, ki so navedeni na spletni strani predmeta, in si jih predvajajte s pomočjo:

- prikazovalnikov
- vtičnikov za spletni brskalnik

Prikaz X3D modela s pomočjo X3DOM

V programu Blender smo izdelali 3 3D objekta in sicer stožec, glavo opice in valj ter jih pobarvali v rumeno, rjavo in roza barvo. Elemente lahko pogledate ne sliki spodaj.

3D model smo eksportali v .x3d formatu ter s pomočjo X3DOM-a prikazali na naši spletni strani. X3DOM je programska knjižnica, napisana v jeziku Javascript, ki omogoča uporabo tehnologije X3D v spletnih straneh, ki uporabljajo HTML 5. Pomagali smo se s X3D encoding converter-jem, kjer smo pridobili HTML kodo (poglej sliko spodaj). V HTML kodo so vstavljeni CSS in JavaScript datoteki.

CSS datoteka

JS datoteka

Valj

Stožec

Glava opice

Težave:

Ko smo HTML kodo naložile na našo spletno stran, so 3D objekti izgubili barve. Ugotovile smo da že pri izvozu 3D modela v .x3d format se barve izgubijo, zato smo ročno spremenile barve valja in opice znotraj kode v .x3d formatu. Spremembe barve valja, lahko pogledamo spodaj. Stožec smo pustili nespremenjen.

Prvotna koda barve valja: Spremenjena koda barve valja:

Težavo pri nalaganju 3D modela smo imele še pri CSS in JS datotekam, ker se model nalaga prek HTTPS protokola, v HTML kodi pa so CSS in JS datoteke bile preko HTTP-ja, zato smo ta del kode zamenjali za:

http://www.x3dom.org/x3dom/release/x3dom.css ---> https://www.x3dom.org/download/1.8.1/x3dom.css

http://www.x3dom.org/x3dom/release/x3dom.js ---> https://www.x3dom.org/download/1.8.1/x3dom.js

3D model prikazuje stožec, glavo opice in valj.

S pomočjo miške lahko povečate in zmanjšate objekte, ter jih rotirate in ogledate s vseh strani.

Avtor: Branislava Đurić

Datum: 17.4.2021

Program: Blender

Za vajo - prikaz našega 3D modela

Za vajo smo naš 3D model v .x3d formatu odprli in prikazali v pregledovalniku View3dscene ter v .obj formatu v Microsoftovom 3D pregledovalniku.

Pregledovalnik View3dscene

Pregledovalnik 3D

Opazili smo da ko smo 3D model eksportali v .x3d formatu, ni shranilo barv.

Za vajo - prikaz VRML

Za boljše razumevanje tehnologij smo v dveh pregledovalnikih View3dscene in Cortina3D odprli in prikazali primere VRML datotek, ki smo jih pridobili na spletni strani predmeta Multimedijske vsebine za svetovni splet. VRML (Virtual reality modelling language) je datotečni format za predstavitev 3D vektorskih podatkov, ki je bil zasnovan z namero uporabe na svetovnem spletu.

Spodaj si lahko ogledamo primera preprostega 3D modela - kvadra in malo bolj kompleksnega 3D modela, ki je sestavljen iz kocke in 6 krogli.

Pregledovalnik View3dscene

Pregledovalnik Cortona3D

Za vajo - prikaz X3D

V pregledovalniku View3dscene in s pomočjo vtičnika za spletni brskalnik X ITE smo odprli in prikazali primere X3D, ki smo jih pridobili na spletni strani predmeta Multimedijske vsebine za svetovni splet. X3D (Extensible 3D) je standard, ki nadomešča VRML. Prednost X3D je v tem, da vpeljuje elemente, ki omogočajo uporabo zmogljivosti moderne strojne opreme. Zasnovan je modularno, tako da omogoča enostavnejše dodajanje novih elementov.

Spodaj si lahko ogledamo prikaze primera kvadra in 8 različnih geometrijskih teles.

Pregledovalnik View3dscene

Vtičnik za spletni brskalnik X ITE