Δημιουργία διαδραστικών τρισδιάστατων οπτικών με 3,Js

Αυτό το σεμινάριο WebGL καταδεικνύει τον τρόπο δημιουργίας μιας περιβαλλοντικής προσομοίωσης 3D που δείχνει τι συμβαίνει στον κόσμο ως επίπεδα CO2 αλλάζουν. (Μπορείτε να δείτε περισσότερα Πειράματα webgl εδώ.)

Ο χρήστης ελέγχει τα επίπεδα χρησιμοποιώντας ένα ρυθμιστικό εύρους εισόδου HTML. Καθώς ο χρήστης προσθέτει περισσότερο CO2, το περισσότερος χώρος θα εμφανιστεί στη σκηνή, τα επίπεδα νερού θα αυξηθούν καθώς η αύξηση της θερμοκρασίας λιώνει περισσότερα πικάντικα καπάκια πάγου, τότε τα δέντρα θα εξαφανιστούν καθώς βυθίζονται στο νερό.

Τα στοιχεία είναι κινούμενα μέσα και έξω χρησιμοποιώντας μια βιβλιοθήκη Tween και σύροντας το ρυθμιστικό προς την αντίθετη κατεύθυνση θα αντιστρέψει τα αποτελέσματα. Αν μόνο ήταν τόσο εύκολη στην πραγματική ζωή!

01. Στοιχεία εμφάνισης

Για να ξεκινήσετε το έργο, ανοίξτε το φάκελο "Έναρξη" στον κωδικό σας IDE. Ανοίγω index.html Και θα δείτε ότι υπάρχει μια βασική σκαλωσιά σελίδας εκεί με κάποιο κώδικα ήδη. Στο τμήμα σώματος, προσθέστε τα στοιχεία της οθόνης εδώ που θα χρησιμοποιηθούν ως διεπαφή με το περιεχόμενο 3D.

 & lt; div id = "header" & gt;
  & lt; img src = "img / co2.png" id = "badge" & gt;
  & lt; / div & gt;
  & lt; div id = "inner" & gt;
  & lt; κλάση εισόδου = "slide" type = "εύρος" min = "0" max = "7" βήμα = "1" τιμή = "0" oninput = "showval (this.value)" & gt;
  & lt; p & gt; σύρετε το ρυθμιστικό για να αλλάξετε το επίπεδο του CO2 & LT; / P & GT;
  & lt; / div & gt; 

02. Σύνδεση των βιβλιοθηκών

Το περιεχόμενο 3D εμφανίζεται μέσω τριών.Js, το οποίο περιλαμβάνεται εδώ. Ένα μοντέλο Collada θα προστεθεί στη σκηνή αργότερα. Περιλαμβάνεται η πρόσθετη βιβλιοθήκη που θα φορτωθεί αυτό, μαζί με μια βασική βιβλιοθήκη Tween. Οι επόμενες γραμμές συνδέονται με τα αποτελέσματα μετά τη μεταποίηση που θα προσθέσουν το φινίρισμα.

 & lt; script src = "js / threemin.js" & gt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; / script & gt;
& lt; script src = "js / tween.min.js" & gt; / script & gt;
& lt; script src = 'js / postocessing / effectcomposer.js' & gt; / script & gt;
& lt; script src = 'js / postocessing / renderpass.js' & gt; / script & gt;
& lt; script src = 'js / posterprocessing / shaderpass.js' & gt; / script & gt;
& lt; script src = 'js / postocessing / maskpass.js' & gt; / script & gt; 

03. Post επεξεργασίας Shaders

Αφού η σκηνή έχει καταστήσει κάθε πλαίσιο, θα προστεθούν ορισμένες επιδράσεις μετά τη διαδικασία. Αυτές είναι οι βιβλιοθήκες που ενδυναμεύουν το αποτέλεσμα των κόκκων της ταινίας, μια θολούρα μετατόπισης κλίσης στο επάνω και το κάτω μέρος της οθόνης, τότε τελικά ένα βινιέτα για να ξεθωριάζει στα άκρα της οθόνης.

04. Προσθήκη των μεταβλητών

Ορισμένοι από τον κώδικα έχουν ολοκληρωθεί για εσάς. Θα δείτε ένα σχόλιο όπου θα προσθέσετε τον υπόλοιπο κώδικα του εκπαιδευτικού. Μία σειρά μεταβλητών χρησιμοποιούνται σε αυτή την 3D σκηνή, η οποία φροντίζει την ανάλυση οθόνης, διάφορα μοντέλα 3D και επεξεργασία μετά την επεξεργασία. Δύο σημαντικές μεταβλητές είναι οι υδατοφράκτης για το ύψος του νερού και το δεκές , που θυμάται την τελευταία θέση του ρυθμιστή.

 var screen_width = window.innerwidth, screen_height = window.innerheight,
 mousex = 0, mousey = 0, windowhalfx = window.innerwidth / 2, windowhalfy = window.innerheight / 2, κάμερα, σκηνή, renderer, νερό, waterht = 1;
var textureLoader = νέα τρία.TextureLoader ();
var συνθέτης, shadertime = 0, filmasp, renderpass, copypass, effectVignette, ομάδα, LastVal = 0; 

05. Αρχικοποίηση της σκηνής

Η λειτουργία Init είναι ένα μεγάλο μέρος του κώδικα, η διασφάλιση της σκηνής έχει ρυθμιστεί με τη σωστή ματιά στην αρχή. Ένα δοχείο προστίθεται στη σελίδα και αυτό είναι όπου θα εμφανιστεί η τρισδιάστατη σκηνή. Προστίθεται μια κάμερα και κάποια ομίχλη φόντου να ξεθωριάζει την απόσταση.

 Λειτουργία Init () {
  VAR Container = Document.Createelement ('Div');
  document.Body.AppendChild (δοχείο);
  Camera = New Three.PerspectiveCamera (75, screen_width / screen_height, 1, 10000);
  Camera.position.Set (2000, 100, 0).
  σκηνή = νέα τρία.Scene ();
  scene.Fog = Νέο τρία.FogEXP2 (0xB6D9E6, 0.0025).
  renderer = new three.webglrenderer ({
  antialias: αλήθεια
  }) · 

06. Ρύθμιση του renerder

Ο refererer λαμβάνει ένα χρώμα φόντου και η ανάλυση έχει ρυθμιστεί στο ίδιο μέγεθος με την αναλογία εικονοστοιχείων της οθόνης. Οι σκιές είναι ενεργοποιημένες στη σκηνή και τοποθετείται στη σελίδα στο στοιχείο του δοχείου. Προστίθεται ένα φως ημισφαιρίου, το οποίο έχει ένα ουρανό και το έδαφος.

renderer.setclearcolorcolor (0xadc9d4);
renderer.etpixelratio (window.devicePixelratio);
renderer.setsize (screen_width, screen_height);
renderer.shadowmap.enabled = true;
renderer.shadowmap.type = three.pcfsoftshadowmap;
container.appendchild (renderer.domement);
VAR LIGHT = Νέο τρία.hemispherelight (0xA1E2F5, 0x6F4D25, 0,5).
scene.add (φως); 

07. Μεταβλητές Shader

Οι μεταβλητές που θα ελέγξουν τις επιδράσεις της μετατόπισης της Shader Post θα δοθούν εδώ. Αυτές οι μεταβλητές θα χρησιμοποιηθούν αργότερα για να προσθέσουν τιμές που θα ελέγξουν την εμφάνιση. Εάν κοιτάξετε τη λειτουργία Params, θα δείτε αυτό που έχει ήδη ολοκληρωθεί για εσάς.

 renderpass = νέος τριών.RenderPass (σκηνή, κάμερα);
HBLUR = Νέο τρία.Shaderpass (τρεις.Horizontaltiltshiftshader).
vblur = νέα τρία.Shaderpass (Three.ΤισθήματοςTricaltiltshiftshader).
Filmpass = Νέο τρία.Shaderpass (Three.Filmshader);
effectvignette = νέα τρία .Shaderpass (τριών.Vignethesheshesh);
COPYPASS = ΝΕΑ ΤΡΙΑ.SHADERPASS (τριών.Copyshader); 

08. Σύνθεση των αποτελεσμάτων

Τα αποτελέσματα πρέπει να στοιβάζονται σε κάτι που ονομάζεται συνθέτης εφέ. Αυτό διαρκεί κάθε αποτέλεσμα και εφαρμόζει το στυλ σε αυτό. Στη συνέχεια, εμφανίζεται όλοι ως τελική σκηνή στην οθόνη, την οποία θα δείτε πότε προστίθεται η λειτουργία απόδοσης αργότερα.

09. Φόρτωση της εικόνας του νέφους

ο παραμέτρους Η λειτουργία καλείται και αυτό ορίζει τις μεμονωμένες παραμέτρους για τις μεταχειρισμένες επιδράσεις. Δημιουργείται μια νέα ομάδα και αυτό θα κατέχει όλο το περιεχόμενο σκηνής μέσα σε αυτό, για να διευκολύνει την περιστροφή της ομάδας αντικειμένων. Μια διαφανή εικόνα PNG φορτώνεται ως ένα υλικό σύννεφο που θα χρησιμοποιηθεί ως sprite μέσα στη σκηνή.

 Παράμετροι ();
  Ομάδα = Νέες τρεις.Group ();
  scene.add (ομάδα);
  var cloud = textureLoader.load ("img / cloud.png");
  Υλικό = νέα τρία.
  Χάρτης: Σύννεφο, αδιαφάνεια: 0.6, Χρώμα: 0x888888, Ομίχλη: TRUE
}) · 

10. Διπλό για βρόχο

Οκτώ ομάδες δημιουργούνται μέσα στο πρώτο Για βρόχος. Αυτές οι οκτώ ομάδες όλοι παίρνουν 35 σύννεφα που τους προστέθηκαν στο δεύτερο για βρόχο. Κάθε σύννεφο τοποθετείται σε τυχαία θέση πάνω από τη σκηνή. Οι ομάδες θα είναι ενεργοποιημένες και απενεργοποιημένες με το ρυθμιστικό από τον χρήστη για να δείξει το Smog να προστεθεί και να αφαιρεθεί στην απεικόνιση.

 για (J = 0, J & LT, 8, J ++) {
  var g = νέος τριών.Group ();
  για (i = 0, i & lt, 35; i ++) {
  var x = 400 * math.random () - 200;
  var y = 60 * math.random () + 60;
  var z = 400 * math.random () - 200;
  sprite = νέα τρία.
  sprite.position.Set (x, y, z); 

11. Κλίμακα του σύννεφου

Το σύννεφο κλιμακώνεται σε μέγεθος που επιτρέπει να είναι ορατό στη σκηνή. Κάθε ομάδα σύννεφων μετά την πρώτη ομάδα κλιμακώνεται έτσι ώστε να είναι ουσιαστικά αόρατα στον αναστροφέα. Αυτός είναι ο τρόπος με τον οποίο θα γίνει ορατό αργότερα με την κλιμάκωση τους πίσω στο πλήρες μέγεθος τους, καθώς αυτό θα δώσει ένα καλό αποτέλεσμα διασκεδάζοντας.

12. Φόρτωση του μοντέλου

Τώρα ο φορτωτής Collada έχει ρυθμιστεί να φορτώσει το scene.dae μοντέλο. Όταν τελειώνει τη φόρτωση, το μοντέλο σαρώθηκε και οποιοδήποτε αντικείμενο που συμβαίνει να είναι ένα πλέγμα γίνεται για να ρίξει σκιές και να λαμβάνει σκιές για να δώσει κάποιο επιπλέον βάθος στη σκηνή.

 VAR φορτωτής = νέο τρία.colladaloader ();
φορτωτές.Προστάσματα.Convertupaxis = TRUE;
Loader.Lload ('scene.dae', λειτουργία (Collada) {
  var dae = collada.scene;
  dae.Traverse (λειτουργία (παιδί) {
  αν (παράδειγμα παιδιών.
  child.Castshadow = TRUE;
  child.receiveshadow = TRUE;
  }
}) · 

13. Εύρεση συγκεκριμένων στη σκηνή

Καθώς το μοντέλο είναι έτοιμο για εμφάνιση, ρυθμίζεται στο σωστό μέγεθος για να ταιριάζει στη σκηνή. Ο κώδικας πρέπει να ελέγχει συγκεκριμένα το ύψος του νερού, έτσι ώστε το μοντέλο νερού να βρίσκεται στη σκηνή και να μεταβιβάζεται στην παγκόσμια μεταβλητή. Ομοίως, το κύριο φως πρέπει να βρεθεί έτσι ώστε να μπορεί να οριστεί σε σκιές έργων.

 dae.scale.x = dae.scale.y = dae.scale.z = 0,5;
dae.updatematrix ();
group.add (DAE);
νερό = scene.getobjectyname ("νερό", αληθινό)?
νερό = νερό. Τα παιδιά 
;
light = scene.getobjectbyname ("σπάση", αληθινό)?
Light = Light.Children 
; 

14. Ρυθμίσεις φωτισμού

Τώρα, όπως το προσκήνιο βρίσκεται τα χαρακτηριστικά που το κάνουν να χυθούν σκιές στη σκηνή. Η εξασθένιση του φωτός στις άκρες του σημείου είναι επίσης ορίζεται εδώ. Τέλος, καθώς το μοντέλο είναι το μεγαλύτερο στοιχείο για να φορτωθεί, η υπόλοιπη σκηνή θα ρυθμιστεί πριν από την εκτέλεση αυτού του κώδικα, επομένως η λειτουργία δημιουργίας μπορεί να ονομαστεί κάθε πλαίσιο.

 light.target.position.set (0, 0, 0);
  light.Castshadow = TRUE;
   light.Shadow = Νέο τριών. ΦανταστικόShadow (Νέο τριών.PerspectiveAmera (90, 1, 90, 5000)).
  light.shadow.bias = 0.0008;
  light.shadow.mapsize.width = 1024;
  light.shadow.mapsize.height = 1024;
  light.penumbra = 1;
  light.decay = 5;
  καθιστώ();
}) · 

15. Τελευταίος κωδικός αρχικοποίησης

Το τελικό μέρος της λειτουργίας Init θέτει διάφορες εισόδους ποντικιού και αφής που θα μετακινήσουν την κάμερα με βάση τη θέση τους. Μια εκδήλωση καταχωρείται επίσης για να ακούσει αν η οθόνη αλλάξει και αυτό θα ενημερώσει την απεικόνιση της οθόνης.

 Document.addeventListener ('mousemove', ondocumentmousemove, false).
  document.addeventListener ('Touchstart', OndocumentTouchstart, False).
  Document.addeventListener ('TouchMove', ondocumenttouchmove, False).
  window.addeventListener ('αλλαγή μεγέθους', onwindowresize, false)?
} 

16. Καθορισμός κάθε πλαισίου

Η λειτουργία απόδοσης έχει οριστεί να καλείται τόσο κοντά σε 60 καρέ ανά δευτερόλεπτο καθώς το πρόγραμμα περιήγησης μπορεί να διαχειριστεί. Η ομάδα, η οποία περιέχει όλα τα μοντέλα, έχει ρυθμιστεί να περιστρέφεται από ένα μικρό ποσό κάθε καρέ. Η θέση της κάμερας ενημερώνεται από το ποντίκι ή την είσοδο αφής και συνεχίζει να κοιτάζει το κέντρο της σκηνής.

17. Ενημέρωση της οθόνης

Ο χρόνος Shader είναι μια μεταβλητή που μόλις ανεβαίνει κατά 0,1 κάθε πλαίσιο και αυτό μεταβιβάζεται στο κινηματογραφική ταινία έτσι ώστε ο θορυβώδης κόκκος ταινίας να μπορεί να ενημερωθεί. Ο συνθέτης εφέ ενημερώνεται και παρέχεται στην οθόνη. Τέλος, ο κινητήρας Tween ενημερώνεται επίσης.

 Shadertime + = 0,1;
  filmpass.Uniforms ['Ώρα']. Αξία = σκιαγραφία;
  composer.render (0,1);
  Tween.update ();
} 

18. Να πάρει την είσοδο χρήστη

Το ρυθμιστικό εύρους εισόδου, που προστέθηκε στο βήμα 1, καλεί το προνομιούχος λειτουργία, η οποία ορίζεται εδώ. Όταν ο χρήστης κάνει κλικ σε αυτό, ελέγχει απλώς ότι το ρυθμιστικό έχει μετακινηθεί. Εάν μετακινηθείτε στη συνέχεια, η επόμενη ομάδα σύννεφων κλιμακώνεται με ένα tween πάνω από 0,8 δευτερόλεπτα. Το ύψος νερού ενημερώνεται και αυτό είναι επίσης διασκεδαστικό μέχρι το νέο ύψος.

 Λειτουργία ShowVal (Val) {
  Αν (Val! = LastVal) {
  αν (val & gt; lastval) {
  Νέο tween.Tween (Group.Children (Val] .cale) .To ({x: 1, y: 1, z: 1}, 800).
  waterht + = 0,07;
  Νέο Tween.Tween (Water.scale). Για ({y: waterht}, 800). atting (tween.equadratic.inout).
  

   19. Πιάνοντας τα δέντρα
  
  

   Η μεταβλητή θερμοκρασίας βρίσκει την τρέχουσα ομάδα δέντρων, θα πρέπει να εξαλείψει από τη σκηνή και εδώ ζυγίζει με ένα tween μόνο στον άξονα Υ. Χρησιμοποιείται μια ελαστική χαλάρωση έτσι ώστε αυτό να βγαίνει από την οπτική γωνία στην οθόνη για ένα ευχάριστο αποτέλεσμα. Όπως περισσότερο νερό και σύννεφα βρίσκονται στη σκηνή, τα δέντρα εξαφανίζονται.
  
  

   20. Αντίθετες εισροές
  
  

   Το πρώτο περιεχόμενο ελέγχεται εάν ο ρυθμιστής ήταν ολισθητήρας προς τα πάνω, ή προς τα δεξιά. Τώρα ο κώδικας ανιχνεύει τον χρήστη που ολισθαίνει προς τα αριστερά. Τα σύννεφα κλιμακώνονται με ένα tween και έτσι είναι η στάθμη του νερού για να δείξει ένα αποτέλεσμα ψύξης στη γη.
  
  
 Νέο Tween.Tween (Group.Children [LastVal] .cale) .To ({x: 0.001, y: 0.001, z: 0.001}, 800). Αυτός (tween.equadratic.inout). )
waterht - = 0,07;
Νέο Tween.Tween (Water.scale). Για ({y: waterht}, 800). atting (tween.equadratic.inout).
  

   21. Τελειώνοντας
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   Το τελικό βήμα είναι να φέρετε τα δέντρα πίσω, έτσι ώστε να κλιμακώνονται πίσω στο αρχικό τους μέγεθος με ένα ελαστικό tween. Αποθηκεύστε τη σκηνή και προβάλετε την ιστοσελίδα από ένα διακομιστή είτε φιλοξενούνται τοπικά στον δικό σας υπολογιστή είτε σε ένα διακομιστή ιστού. Θα είστε σε θέση να αλληλεπιδράσετε με την κίνηση του ποντικιού και το ρυθμιστικό για να αλλάξετε την οθόνη σκηνής.
  
  

   Αυτό το άρθρο εμφανίστηκε αρχικά στο
   
   
    
     Σχεδιαστής ιστοσελίδων
    
   
   
    Τεύχος 265. Αγοράστε το
   
   
    
     εδώ
    
   
   
    .
   
  
  

   Σχετικά Άρθρα:
  
  

   

    
     Πώς να κωδικοποιήσετε έναν δείκτη επαυξημένης πραγματικότητας
    
   
   

    
     20 εκπληκτικά παραδείγματα του WebGL σε δράση
    
   
   

    
     9 λαμπρές χρήσεις του 3D στο σχεδιασμό ιστοσελίδων