= Prikaz na spletni strani z uporabo knjižnice jsc3d =


Z uporabo knjižnice [http://code.google.com/p/jsc3d/ 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.


[[PageOutline]] 
[[BR]][[BR]][[BR]][[BR]][[BR]][[BR]][[BR]][[BR]][[BR]]

== 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:
{{{
#!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:
{{{
#!javascript
    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:

{{{
#!javascript
<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>
}}}

{{{
#!html
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>
<script type="text/javascript">
function onLoad1(){
  var canvas = document.getElementById('cv1');
  var viewer = new JSC3D.Viewer(canvas);
  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL');
  viewer.init();
  viewer.update();
}      
window.onload = window.onresize = function() {onLoad1();}        
</script>  
<div align="center">
<canvas id="cv1" width="800" height="600"
  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 -->
}}}


{{{
#!html
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
<script type="text/javascript">
function onLoad2(){
  var canvas = document.getElementById('cv2');   // Ime elementa
  var viewer = new JSC3D.Viewer(canvas);        // Ime prikaznega okna
  viewer.setParameter('BackgroundColor1', '#CCCCCC');   // Barva ozadja- zgoraj
  viewer.setParameter('BackgroundColor2', '#003366');   // Barva ozadja- spodaj
  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); // Model za prikaz
  viewer.setParameter('ModelColor','#FFFFFF');  // Sprememba barve kosa
  viewer.init();
  viewer.update();
}      
window.onload = window.onresize = function() {onLoad1(); onLoad2();}        
</script>  

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

== 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');   <!-- 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:
{{{
#!javascript
  viewer.setParameter('CreaseAngle', 15);  // Prilagoditev senčenja preko ostrih prehodov
}}}

{{{
#!html
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
<script type="text/javascript">
function onLoad3(){
  var canvas = document.getElementById('cv3');   // Ime elementa
  var viewer = new JSC3D.Viewer(canvas);         // Ime prikaznega okna
  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); // Model za prikaz
  viewer.setParameter('CreaseAngle', 15);       // Prilagoditev senčenja preko ostrih prehodov
  viewer.setParameter('RenderMode','smooth');   // Zgladitev prikaza modela
  viewer.init();
  viewer.update();
}      
window.onload = window.onresize = function() {onLoad1(); onLoad2(); onLoad3();}        
</script>  

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


== 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
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
<script type="text/javascript">
function onLoad4(){
  var canvas = document.getElementById('cv4');  // Ime elementa
  var viewer = new JSC3D.Viewer(canvas);        // Ime prikaznega okna
  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
  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); // Model za prikaz
  viewer.init();
  viewer.update();
}      
window.onload = window.onresize = function() {onLoad1(); onLoad2(); onLoad3(); onLoad4();}        
</script>  

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


== 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
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
<script type="text/javascript">
function onLoad5(){
  var canvas = document.getElementById('cv5');   <!-- Ime elementa -->
  var viewer = new JSC3D.Viewer(canvas);        <!-- Ime prikaznega okna -->
  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
  viewer.setParameter('BackgroundImageUrl', '/vaje/raw-attachment/wiki/jsc3d/Ozadje.jpg'); <!-- nastavitev slike za ozadje -->
  viewer.init();
  viewer.update();
}      
window.onload = window.onresize = function() {onLoad1(); onLoad2(); onLoad3(); onLoad4(); onLoad5();}        
</script>  

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

== 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
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
<script type="text/javascript">
function onLoad6(){
  var canvas = document.getElementById('cv6');   // Ime elementa
  var viewer = new JSC3D.Viewer(canvas);         // Ime prikaznega okna
  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); // Model za prikaz
  setInterval(function(){viewer.rotate(0, 3, 0); viewer.update();}, 60); // animacija- rotacija
  viewer.init();
  viewer.update();
}      
window.onload = window.onresize = function() {onLoad1(); onLoad2(); onLoad3(); onLoad4(); onLoad5(); onLoad6();}        
</script>  

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


== 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
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
<script type="text/javascript">
var viewer = null;
function onLoad7(){
  var canvas = document.getElementById('cv7');   <!-- Ime elementa -->
  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev zacetne sirine prikaznega okna -->
  canvas.height = canvas.width/1.6;             <!-- nastavitev zacetne visine prikaznega okna -->
  viewer = new JSC3D.Viewer(canvas);            <!-- Ime prikaznega okna -->
  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
  viewer.init();
  viewer.update();
}      

window.onload = function() {onLoad1(); onLoad2(); onLoad3(); onLoad4(); onLoad5(); onLoad6(); onLoad7();}  
  
window.onresize = function() {
  var canvas = document.getElementById('cv7');
  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();
}           
      
</script>  

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