Changes between Version 3 and Version 4 of jsc3d


Ignore:
Timestamp:
Dec 18, 2013, 11:03:39 AM (10 years ago)
Author:
ptomsic
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • jsc3d

    v3 v4  
    22= Prikaz na spletni strani z uporabo knjižnice jsc3d =
    33
     4
     5Z 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.
     6
     7
    48[[PageOutline]]
    5 
     9[[BR]][[BR]][[BR]][[BR]][[BR]][[BR]][[BR]][[BR]][[BR]]
    610
    711== Preprosti prikaz modela s knjižnico jsc3d ==
    … …  
    4650{{{
    4751#!html
    48 <script src="/jpelan/raw-attachment/wiki/WikiStart/jsc3d.min.js"></script>
    49 <script type="text/javascript">
    50 function onLoad(){
     52<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>
     53<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>
     54<script type="text/javascript">
     55function onLoad1(){
     56  var canvas = document.getElementById('cv1');
     57  var viewer = new JSC3D.Viewer(canvas);
     58  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL');
     59  viewer.init();
     60  viewer.update();
     61}     
     62window.onload = window.onresize = function() {onLoad1();}       
     63</script> 
     64<div align="center">
     65<canvas id="cv1" width="800" height="600"
     66  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
     67</div>
     68}}}
     69
     70Manipulacija modela v prikaznem oknu:
     71-       Na PC-ju:
     72   •    Rotacija: klikni levi gumb in povleci miško
     73   •    Povečava: kolešček na miški ali tipka shift, klikni levi gumb in povleci miško
     74   •    Translacija: tipka ctrl, klikni levi gumb in povleci miško
     75-       Na tablici (telefonu):
     76   •    Rotacija: povleci po ekranu
     77   •    Povečava: povleci po ekranu z dvema prstoma
     78   •    Translacija: drži prst na ekranu (min. 500 ms), nato povleci po ekranu
     79
     80
     81
     82== Prikaz kosa- sprememba barve modela in ozadja prikazanega okna ==
     83
     84Z 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:
     85{{{
     86  viewer.setParameter('BackgroundColor1', '#CCCCCC');   <!-- Barva ozadja- zgoraj -->
     87  viewer.setParameter('BackgroundColor2', '#003366');   <!-- Barva ozadja- spodaj -->
     88}}}
     89
     90Barvo prikazanega kosa spremenimo z določitvijo barve glede na RGB barvno lestvico:
     91{{{
     92  viewer.setParameter('ModelColor','#FFFFFF');  <!-- Sprememba barve kosa -->
     93}}}
     94
     95
     96{{{
     97#!html
     98<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
     99<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
     100<script type="text/javascript">
     101function onLoad2(){
     102  var canvas = document.getElementById('cv2');   <!-- Ime elementa -->
     103  var viewer = new JSC3D.Viewer(canvas);        <!-- Ime prikaznega okna -->
     104  viewer.setParameter('BackgroundColor1', '#CCCCCC');   <!-- Barva ozadja- zgoraj -->
     105  viewer.setParameter('BackgroundColor2', '#003366');   <!-- Barva ozadja- spodaj -->
     106  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
     107  viewer.setParameter('ModelColor','#FFFFFF');  <!-- Sprememba barve kosa -->
     108  viewer.init();
     109  viewer.update();
     110}     
     111window.onload = window.onresize = function() {onLoad1(); onLoad2();}       
     112</script> 
     113
     114<div align="center">                            <!-- Parametri prikaznega okna -->
     115<canvas id="cv2" width="800" height="600"
     116  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
     117</div>
     118}}}
     119
     120== Prikaz kosa- spreminjanje prikaza modela ==
     121
     122Osnovni 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:
     123-       ''flat''- vsak poligon na modelu bo senčen glede na smer normale na površino
     124-       ''smooth''- senčenje poligonov upošteva normale sosednjih ploskev, upošteva povprečne vrenosti normalnih vektorjev
     125-       ''wireframe''- prikaz žičnega modela kosa, ki je definiran s stl modelom
     126-       ''point''- mreža bo senčena kot točke
     127-       ''texture''- mreža bo senčena kot teksture primitiva brez vpliva luči. Če nimamo definiranih tekstur, je prikaz identičen ''flat'' opciji
     128-       ''textureflat''- mreža bo senčena kot teksture primitiva z vplivom luči. Če nimamo definiranih tekstur, je prikaz identičen ''flat'' opciji
     129-       ''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
     130
     131Za različno senčenje modela v knjižnici jsc3d dodamo:
     132{{{
     133  viewer.setParameter('RenderMode','smooth');   <!-- Zgladitev prikaza modela -->
     134}}}
     135
     136Kljub 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:
     137{{{
     138  viewer.setParameter('CreaseAngle', 15);       <!-- Prilagoditev senčenja preko ostrih prehodov -->
     139}}}
     140
     141{{{
     142#!html
     143<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
     144<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
     145<script type="text/javascript">
     146function onLoad3(){
     147  var canvas = document.getElementById('cv3');   <!-- Ime elementa -->
     148  var viewer = new JSC3D.Viewer(canvas);        <!-- Ime prikaznega okna -->
     149  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
     150  viewer.setParameter('CreaseAngle', 15);       <!-- Prilagoditev senčenja preko ostrih prehodov -->
     151  viewer.setParameter('RenderMode','smooth');   <!-- Zgladitev prikaza modela -->
     152  viewer.init();
     153  viewer.update();
     154}     
     155window.onload = window.onresize = function() {onLoad1(); onLoad2(); onLoad3();}       
     156</script> 
     157
     158<div align="center">                            <!-- Parametri prikaznega okna -->
     159<canvas id="cv3" width="800" height="600"
     160  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
     161</div>
     162}}}
     163
     164
     165== Prikaz kosa- spreminjanje začetnega pogleda modela ==
     166
     167Zač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:
     168{{{
     169  viewer.setParameter('InitRotationX', 30);     <!-- rotacija zacetnega pogleda okoli X osi -->
     170  viewer.setParameter('InitRotationY', 30);     <!-- rotacija zacetnega pogleda okoli Y osi -->
     171  viewer.setParameter('InitRotationZ', 30);     <!-- rotacija zacetnega pogleda okoli Z osi -->
     172}}}
     173
     174{{{
     175#!html
     176<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
     177<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
     178<script type="text/javascript">
     179function onLoad4(){
     180  var canvas = document.getElementById('cv4');   <!-- Ime elementa -->
     181  var viewer = new JSC3D.Viewer(canvas);        <!-- Ime prikaznega okna -->
     182  viewer.setParameter('InitRotationX', 30);     <!-- rotacija zacetnega pogleda okoli X osi -->
     183  viewer.setParameter('InitRotationY', 30);     <!-- rotacija zacetnega pogleda okoli Y osi -->
     184  viewer.setParameter('InitRotationZ', 30);     <!-- rotacija zacetnega pogleda okoli Z osi -->
     185  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
     186  viewer.init();
     187  viewer.update();
     188}     
     189window.onload = window.onresize = function() {onLoad1(); onLoad2(); onLoad3(); onLoad4();}       
     190</script> 
     191
     192<div align="center">                            <!-- Parametri prikaznega okna -->
     193<canvas id="cv4" width="800" height="600"
     194  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
     195</div>
     196}}}
     197
     198
     199== Prikaz kosa- določitev slike za ozadje ==
     200
     201Nastavimo 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.
     202{{{
     203  viewer.setParameter('BackgroundImageUrl', 'Ozadje.jpg'); <!-- nastavitev slike za ozadje -->
     204}}}
     205
     206{{{
     207#!html
     208<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
     209<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
     210<script type="text/javascript">
     211function onLoad5(){
     212  var canvas = document.getElementById('cv5');   <!-- Ime elementa -->
     213  var viewer = new JSC3D.Viewer(canvas);        <!-- Ime prikaznega okna -->
     214  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
     215  viewer.setParameter('BackgroundImageUrl', '/vaje/raw-attachment/wiki/jsc3d/Ozadje.jpg'); <!-- nastavitev slike za ozadje -->
     216  viewer.init();
     217  viewer.update();
     218}     
     219window.onload = window.onresize = function() {onLoad1(); onLoad2(); onLoad3(); onLoad4(); onLoad5();}       
     220</script> 
     221
     222<div align="center">                            <!-- Parametri prikaznega okna -->
     223<canvas id="cv5" width="800" height="600"
     224  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
     225</div>
     226}}}
     227
     228== Prikaz kosa- animacija- avtomatska rotacija ==
     229
     230Č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:
     231{{{
     232  setInterval(function(){viewer.rotate(0, 3, 0); viewer.update();}, 60); <!-- animacija- rotacija -->
     233}}}
     234
     235{{{
     236#!html
     237<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
     238<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
     239<script type="text/javascript">
     240function onLoad6(){
     241  var canvas = document.getElementById('cv6');   <!-- Ime elementa -->
     242  var viewer = new JSC3D.Viewer(canvas);        <!-- Ime prikaznega okna -->
     243  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
     244  setInterval(function(){viewer.rotate(0, 3, 0); viewer.update();}, 60); <!-- animacija- rotacija -->
     245  viewer.init();
     246  viewer.update();
     247}     
     248window.onload = window.onresize = function() {onLoad1(); onLoad2(); onLoad3(); onLoad4(); onLoad5(); onLoad6();}       
     249</script> 
     250
     251<div align="center">                            <!-- Parametri prikaznega okna -->
     252<canvas id="cv6" width="800" height="600"
     253  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
     254</div>
     255}}}
     256
     257
     258== Prikaz kosa- nastavitev velikosti prikaznega okna ==
     259
     260Velikokrat 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.
     261Ugodno je, da se prikaz modela prilagaja trenutni velikosti okna brskalnika. Tako nastavimo začetno širino in višino:
     262{{{
     263  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev zacetne sirine prikaznega okna -->
     264  canvas.height = canvas.width/1.6;             <!-- nastavitev zacetne visine prikaznega okna -->
     265}}}
     266
     267Kljub 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:
     268{{{
     269window.onresize = function() {
    51270  var canvas = document.getElementById('cv');
    52   var viewer = new JSC3D.Viewer(canvas);
    53   viewer.setParameter('SceneUrl', '/jpelan/raw-attachment/wiki/WikiStart/elbow.stl');
    54   viewer.init();
    55   viewer.update();
    56 }     
    57 window.onload = window.onresize = function() {onLoad();}       
    58 </script> 
    59 <canvas id="cv" width="600" height="400"
    60   style="background:lightgrey; border: 1px solid; float:right;" ></canvas>
    61 }}}
    62 
    63 
    64 
     271  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev sirine prikaznega okna ob osvezitvi -->
     272  canvas.height = canvas.width/1.6;             <!-- nastavitev visine prikaznega okna ob osvezitvi -->
     273  viewer.ctx = canvas.getContext('2d');
     274  viewer.canvasData = viewer.ctx.getImageData(0, 0, canvas.width, canvas.height);
     275  viewer.frameWidth = canvas.width;             <!-- nastavitev sirine modelnega okna ob osvezitvi -->
     276  viewer.frameHeight = canvas.height;           <!-- nastavitev sirine modelnega okna ob osvezitvi -->
     277  viewer.generateBackground();                  <!-- ponovni izris ozadja -->
     278  viewer.update();
     279}
     280}}}
     281
     282{{{
     283#!html
     284<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
     285<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
     286<script type="text/javascript">
     287var viewer = null;
     288function onLoad7(){
     289  var canvas = document.getElementById('cv7');   <!-- Ime elementa -->
     290  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev zacetne sirine prikaznega okna -->
     291  canvas.height = canvas.width/1.6;             <!-- nastavitev zacetne visine prikaznega okna -->
     292  viewer = new JSC3D.Viewer(canvas);            <!-- Ime prikaznega okna -->
     293  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
     294  viewer.init();
     295  viewer.update();
     296}     
     297
     298window.onload = function() {onLoad1(); onLoad2(); onLoad3(); onLoad4(); onLoad5(); onLoad6(); onLoad7();} 
     299 
     300window.onresize = function() {
     301  var canvas = document.getElementById('cv7');
     302  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev sirine prikaznega okna ob osvezitvi -->
     303  canvas.height = canvas.width/1.6;             <!-- nastavitev visine prikaznega okna ob osvezitvi -->
     304  viewer.ctx = canvas.getContext('2d');
     305  viewer.canvasData = viewer.ctx.getImageData(0, 0, canvas.width, canvas.height);
     306  viewer.frameWidth = canvas.width;             <!-- nastavitev sirine modelnega okna ob osvezitvi -->
     307  viewer.frameHeight = canvas.height;           <!-- nastavitev sirine modelnega okna ob osvezitvi -->
     308  viewer.generateBackground();                  <!-- ponovni izris ozadja -->
     309  viewer.update();
     310}           
     311     
     312</script> 
     313
     314<div align="center">                            <!-- Parametri prikaznega okna -->
     315<canvas id="cv7" width="1200" height="800"
     316  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
     317</div>
     318}}}
     319
     320
     321
     322
     323
     324
     325