Prikaz na spletni strani z uporabo knjižnice jsc3d

Z uporabo knjižnice ​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:

    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 osi X
  viewer.setParameter('InitRotationY', 30);     // rotacija zacetnega pogleda okoli osi Y
  viewer.setParameter('InitRotationZ', 30);     // rotacija zacetnega pogleda okoli osi Z

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

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 modelu komolca.