Changes between Version 4 and Version 5 of jsc3d


Ignore:
Timestamp:
Dec 24, 2013, 10:25:01 AM (11 years ago)
Author:
Leon Kos
Comment:

Highlight

Legend:

Unmodified
Added
Removed
Modified

  • jsc3d

    v4 v5  
    1 
    21= Prikaz na spletni strani z uporabo knjižnice jsc3d =
    32
    … …  
    1413Za izvoz objekta v STL format imamo na voljo knjižnico DataExchange.STL:
    1514{{{
     15#!python
    1616    from OCC.Utils.DataExchange.STL import STLExporter
    1717}}}
    … …  
    2020Model izvozimo v format STL tako, da najprej določimo ime novonastale datoteke, nato pa ime objekta, ki ga izvozimo:
    2121{{{
     22#!javascript
    2223    def Izvoz_v_STL(event=None):
    2324    my_stl_exporter = STLExporter("Model_STL.stl")
    … …  
    2930
    3031{{{
     32#!javascript
    3133<script src="jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
    3234<script src="jsc3d.touch.js?"></script>         <!-- Knjižnica jsc3d za prikaz na tablicah -->
    … …  
    131133Za različno senčenje modela v knjižnici jsc3d dodamo:
    132134{{{
     135#!javascript
    133136  viewer.setParameter('RenderMode','smooth');   <!-- Zgladitev prikaza modela -->
    134137}}}
    … …  
    136139Kljub 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:
    137140{{{
    138   viewer.setParameter('CreaseAngle', 15);       <!-- Prilagoditev senčenja preko ostrih prehodov -->
     141#!javascript
     142  viewer.setParameter('CreaseAngle', 15);  // Prilagoditev senčenja preko ostrih prehodov
    139143}}}
    140144
    … …  
    167171Zač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:
    168172{{{
     173#!javascript
    169174  viewer.setParameter('InitRotationX', 30);     <!-- rotacija zacetnega pogleda okoli X osi -->
    170175  viewer.setParameter('InitRotationY', 30);     <!-- rotacija zacetnega pogleda okoli Y osi -->
    … …  
    201206Nastavimo 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.
    202207{{{
     208#!javascript
    203209  viewer.setParameter('BackgroundImageUrl', 'Ozadje.jpg'); <!-- nastavitev slike za ozadje -->
    204210}}}
    … …  
    230236Č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:
    231237{{{
     238#!javascript
    232239  setInterval(function(){viewer.rotate(0, 3, 0); viewer.update();}, 60); <!-- animacija- rotacija -->
    233240}}}
    … …  
    261268Ugodno je, da se prikaz modela prilagaja trenutni velikosti okna brskalnika. Tako nastavimo začetno širino in višino:
    262269{{{
     270#!javascript
    263271  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev zacetne sirine prikaznega okna -->
    264272  canvas.height = canvas.width/1.6;             <!-- nastavitev zacetne visine prikaznega okna -->
    … …  
    267275Kljub 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:
    268276{{{
     277#!javascript
    269278window.onresize = function() {
    270279  var canvas = document.getElementById('cv');