[[PageOutline]] = Prikaz na spletni strani z uporabo knjižnice jsc3d = Z uporabo knjižnice [http://code.google.com/p/jsc3d/ JSC3D] je mogoča 3D predstavitev modelov na spletni strani. Knjižnica JSC3D je narejena v jeziku JavaScript in potrebuje okolje HTML5 ali WebGL za delovanje. Knjižnica omogoča pregled modelov v brskalnikih Opera, Chrome, Firefox, Safari, IE9. == Preprosti prikaz modela s knjižnico jsc3d == Preden model prikažemo na spletni strani je potrebno izvoziti kos v format, ustrezen za prikaz. Gre za STL format datoteke. V python OCC-ju izvozimo model v STL format na način: Za izvoz objekta v STL format imamo na voljo knjižnico DataExchange.STL: {{{ #!python from OCC.Utils.DataExchange.STL import STLExporter }}} Model izvozimo v format STL tako, da najprej določimo ime novonastale datoteke, nato pa ime objekta, ki ga izvozimo: {{{ #!python def Izvoz_v_STL(event=None): my_stl_exporter = STLExporter("Model_STL.stl") my_stl_exporter.set_shape(kocka) my_stl_exporter.write_file() }}} Poleg modela, ki ga želimo prikazati, potrebujemo tudi knjižnico za prikaz modela (knjižnica JSC3D). Za prikaz modela na spletni strani je potrebno natipkati kodo, ki je mešanica formata HTML5 in JavaScripta na strani Wiki v obliki {{{ #!javascript {{{ #!html
}}} }}} {{{ #!html
}}} Manipulacija modela v prikaznem oknu: - Na PC-ju: • Rotacija: klikni levi gumb in povleci miško • Povečava: kolešček na miški ali tipka shift, klikni levi gumb in povleci miško • Translacija: tipka ctrl, klikni levi gumb in povleci miško - Na tablici (telefonu): • Rotacija: povleci po ekranu • Povečava: povleci po ekranu z dvema prstoma • Translacija: drži prst na ekranu (min. 500 ms), nato povleci po ekranu == Prikaz kosa- sprememba barve modela in ozadja prikazanega okna == Z uporabo knjižnice jsc3d je zamenjava barve ozadja ter spreminjanje barve prikazanega kosa enostavna operacija. Barvo ozadja določimo glede RGB barvno lestvico. Za ozadje lahko določimo dve različni barvi, ki se prelivata skozi višino okna: {{{ #!javascript viewer.setParameter('BackgroundColor1', '#CCCCCC'); // Barva ozadja- zgoraj viewer.setParameter('BackgroundColor2', '#003366'); // Barva ozadja- spodaj }}} Barvo prikazanega kosa spremenimo z določitvijo barve glede na RGB barvno lestvico: {{{ #!javascript viewer.setParameter('ModelColor','#FFFFFF'); // Sprememba barve kosa }}} {{{ #!html
}}} == Prikaz kosa- spreminjanje prikaza modela == Osnovni prikaz kosa v modelnem oknu sledi modelu, ki ga prikazujemo. Ker mi prikazujemo kos, narejen v .stl formatu, imamo pred sabo grobi model, narejen iz mreže trikotnih (piramidnih oblik). Če hočemo spremeniti prikaz kosa pred sabo, je potrebno določiti način senčenja kosa: - ''flat''- vsak poligon na modelu bo senčen glede na smer normale na površino - ''smooth''- senčenje poligonov upošteva normale sosednjih ploskev, upošteva povprečne vrenosti normalnih vektorjev - ''wireframe''- prikaz žičnega modela kosa, ki je definiran s stl modelom - ''point''- mreža bo senčena kot točke - ''texture''- mreža bo senčena kot teksture primitiva brez vpliva luči. Če nimamo definiranih tekstur, je prikaz identičen ''flat'' opciji - ''textureflat''- mreža bo senčena kot teksture primitiva z vplivom luči. Če nimamo definiranih tekstur, je prikaz identičen ''flat'' opciji - ''texturesmooth''- mreža bo senčena kot teksture primitiva z vplivom luči glede na točke ter nato preračunano interpolacijo. Če nimamo definiranih tekstur, je prikaz identičen ''flat'' opciji Za različno senčenje modela v knjižnici jsc3d dodamo: {{{ #!javascript viewer.setParameter('RenderMode','smooth'); }}} Kljub gladkemu prikazu kosa se nam pojavijo vizualne napake na ostrih prehodih (robovih). Napaka izvira iz načina senčenja ''smooth'', ki povpreči normalne vektorje ter s tem zgladi prikaz. Določimo prikaz za senčenje preko ostrih robov: {{{ #!javascript viewer.setParameter('CreaseAngle', 15); // Prilagoditev senčenja preko ostrih prehodov }}} {{{ #!html
}}} == Prikaz kosa- spreminjanje začetnega pogleda modela == Začetni pogled moda je usmerjen v prikaz na ravnino X-Y, gledamo pa v smeri Z osi. Če hočemo spremeniti začetni prikaz kosa v drugi pogled (npr. izometrični pogled), je potrebno napraviti rotacijo začetnega pogleda. To napravimo z: {{{ #!javascript viewer.setParameter('InitRotationX', 30); // rotacija zacetnega pogleda okoli osi X viewer.setParameter('InitRotationY', 30); // rotacija zacetnega pogleda okoli osi Y viewer.setParameter('InitRotationZ', 30); // rotacija zacetnega pogleda okoli osi Z }}} {{{ #!html
}}} == Prikaz kosa- določitev slike za ozadje == Nastavimo lahko tudi poljubno sliko za ozadje z uporabo ukaza BackgroundImageUrl. Slika se bo naložila po začetku init(). Velikost slike se bo avtomatično prilagodila dimenzijam prikaznega okna. Zato je smotrno definirati velikost prikaznega okna v razmerju širine/višine slike da se izognemo popačenju. {{{ #!javascript viewer.setParameter('BackgroundImageUrl', 'Ozadje.jpg'); // nastavitev slike za ozadje }}} {{{ #!html
}}} == Prikaz kosa- animacija- avtomatska rotacija == Če hočemo, lahko po želji prikažemo tudi animirani kos. Najbolj preprosta animacija je preprosta rotacija modela. Pri tem določimo interval rotacije ter smer in kot v stopinjah rotacije. Prikazan je primer, ko rotiramo kos za 3° okoli Y osi. Prikaz se osveži 60 na minuto: {{{ #!javascript setInterval(function(){viewer.rotate(0, 3, 0); viewer.update();}, 60); // animacija- rotacija }}} {{{ #!html
}}} == Prikaz kosa- nastavitev velikosti prikaznega okna == Velikokrat nastanejo problemi z velikostjo prikaznega okna, ker si lahko spletno stran ogledujemo na večih različnih napravah, ki nimajo enake resolucije (PC, prenosnik, tablica, telefon). Problem se še bolj zaplete ko začnemo spreminjati velikost odprtega okna brskalnika. Ugodno je, da se prikaz modela prilagaja trenutni velikosti okna brskalnika. Tako nastavimo začetno širino in višino: {{{ #!javascript canvas.width = 0.9*window.innerWidth; // nastavitev zacetne sirine prikaznega okna canvas.height = canvas.width/1.6; // nastavitev zacetne visine prikaznega okna }}} Kljub nastavitvi velikosti prikaznega okna pa se le ta ne prilagaja spremembi velikosti brskalnika, ali pa rotaciji zaslona na tabličnih računalnikih/ mobitelih. Potrebno je napraviti še funkcijo za osveževanje prikaza: {{{ #!javascript window.onresize = function() { var canvas = document.getElementById('cv'); canvas.width = 0.9*window.innerWidth; // nastavitev sirine prikaznega okna ob osvezitvi canvas.height = canvas.width/1.6; // nastavitev visine prikaznega okna ob osvezitvi viewer.ctx = canvas.getContext('2d'); viewer.canvasData = viewer.ctx.getImageData(0, 0, canvas.width, canvas.height); viewer.frameWidth = canvas.width; // nastavitev sirine modelnega okna ob osvezitvi viewer.frameHeight = canvas.height; // nastavitev sirine modelnega okna ob osvezitvi viewer.generateBackground(); // ponovni izris ozadja viewer.update(); } }}} {{{ #!html
}}} == Sestavi mrež == Knjižnica JSC3D omogoča asihrono nalaganje večih kosov hkrati kot tudi teksture. Primer takega sestava skupaj s teksturami je prikazan na [wiki:PythonOcc/elbow#Prikazmodelanaspletnistranisknjižnicojsc3d modelu komolca].