Prikaz na spletni strani z uporabo knjižnice jsc3d

Z uporabo knjižnice ​JSC3D je omogoča 3D predstavitev modelov na spletni strani. Knjižnica JSC3D je narejena v JavaScript? jeziku in potrebuje HTML okolje 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:<br> Za izvoz objekta v STL format imamo na voljo knjižnico DataExchange?.STL:

    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:

    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 HTML5 formata in JavaScripta?:

<script src="jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
<script src="jsc3d.touch.js?"></script>         <!-- Knjižnica jsc3d za prikaz na tablicah -->
<script type="text/javascript">
function onLoad(){
  var canvas = document.getElementById('cv');   <!-- Ime elementa -->
  var viewer = new JSC3D.Viewer(canvas);        <!-- Ime prikaznega okna -->
  viewer.setParameter('SceneUrl', 'elbow.stl'); <!-- Model za prikaz -->
  viewer.init();
  viewer.update();
}      
window.onload = window.onresize = function() {onLoad();}        
</script>  

<div align="center">                            <!-- Parametri prikaznega okna -->
<canvas id="cv" width="1200" height="800"
  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
</div>

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:

  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:

  viewer.setParameter('ModelColor','#FFFFFF');  <!-- Sprememba barve kosa -->

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:

  viewer.setParameter('RenderMode','smooth');   <!-- Zgladitev prikaza modela -->

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:

  viewer.setParameter('CreaseAngle', 15);       <!-- Prilagoditev senčenja preko ostrih prehodov -->

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:

  viewer.setParameter('InitRotationX', 30);     <!-- rotacija zacetnega pogleda okoli X osi -->
  viewer.setParameter('InitRotationY', 30);     <!-- rotacija zacetnega pogleda okoli Y osi -->
  viewer.setParameter('InitRotationZ', 30);     <!-- rotacija zacetnega pogleda okoli Z osi -->

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.

  viewer.setParameter('BackgroundImageUrl', 'Ozadje.jpg'); <!-- nastavitev slike za ozadje -->

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:

  setInterval(function(){viewer.rotate(0, 3, 0); viewer.update();}, 60); <!-- animacija- rotacija -->

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:

  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:

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();
}