Έχουμε δυνατότητες στα προγράμματα περιήγησης που δεν θα είχαμε ονειρευτεί πριν από 5 ή 10 χρόνια. Ολόκληροι κόσμοι τρισδιάστατων παιχνιδιών μπορούν να τρέξουν στο πρόγραμμα περιήγησης και οι διαδραστικές ιστοσελίδες μπορούν να είναι πιο συναρπαστικές εμπειρίες.

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

Φυσικά, παρόλο που είναι δυνατόν, απαιτεί τεράστιο ποσό κώδικα και εκεί έρχεται το Three.js, επιτρέποντάς μας να κατασκευάζουμε 3D περιβάλλοντα απλά και με λιγότερους κώδικες.

Συμβατότητα με το πρόγραμμα περιήγησης

Δυστυχώς, επειδή είναι καινούργιο, το 3D δεν υποστηρίζεται από όλα τα προγράμματα περιήγησης. Προς το παρόν περιορίζουμε το Chrome, το Safari και τον Firefox.

Με το πέρασμα του χρόνου, η υποστήριξη για το IE θα βελτιωθεί, αλλά προς το παρόν θα χρειαστείτε ένα fallback για τους πιστούχους της Microsoft.

Ξεκινώντας

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να κατευθυνθείτε προς το three.js ιστοσελίδα και κάντε λήψη της τελευταίας έκδοσης της βιβλιοθήκης.

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

Δημιουργώντας την πρώτη μας σκηνή

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε μια σκηνή, μια κάμερα και έναν επεξεργαστή. Ξεκινώντας από μια σκηνή:

var scene = new THREE.Scene();

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

var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);

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

Στη συνέχεια, πρέπει να ρυθμίσουμε το WebGL Renderer:

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );

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

Προσθήκη ορισμένων αντικειμένων

Μέχρι στιγμής, το μόνο που έχουμε κάνει είναι η δημιουργία της σκηνής, τώρα πρόκειται να δημιουργήσουμε το πρώτο μας 3D αντικείμενο.

Για αυτό το σεμινάριο πρόκειται να είναι ένας απλός κύλινδρος:

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );

Αυτή η μέθοδος λαμβάνει επίσης 4 παραμέτρους: η πρώτη είναι η ακτίνα της κορυφής του κυλίνδρου, η δεύτερη η ακτίνα του πυθμένα του κυλίνδρου, το τρίτο είναι το ύψος, ο τελευταίος ο αριθμός των τμημάτων ύψους.

Έχουμε δημιουργήσει τα μαθηματικά του αντικειμένου, τώρα πρέπει να το τυλίγουμε σε ένα υλικό έτσι ώστε να μοιάζει πραγματικά με κάτι στην οθόνη:

var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );

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

Τέλος, πρέπει να προσθέσουμε τον κύλινδρο μας στη δική μας σκηνή, όπως έτσι:

var cylinder = new THREE.Mesh( geometry, material ); scene.add( cylinder );

Το τελευταίο πράγμα που πρέπει να κάνουμε πριν κάνουμε τη σκηνή είναι να θέσουμε τη θέση της κάμερας:

camera.position.z = 20;

Όπως μπορείτε να δείτε, η JavaScript που εμπλέκεται είναι εξαιρετικά απλή, γιατί το Three.js ασχολείται με όλα τα περίπλοκα πράγματα, οπότε δεν χρειάζεται να το κάνουμε.

Παροχή σκηνής

Εάν δοκιμάσετε το αρχείο σε ένα πρόγραμμα περιήγησης τώρα θα δείτε ότι τίποτα δεν συμβαίνει. Αυτό συμβαίνει επειδή δεν είχαμε πει τη σκηνή να αποδώσει. Για να δώσουμε τη σκηνή, χρειαζόμαστε τον ακόλουθο κώδικα:

function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();

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

Για να βελτιώσετε πραγματικά την αξία του 3D, πρέπει να ξεκινήσετε την κίνηση, κάτι που μπορούμε να κάνουμε με μερικές μικρές αλλαγές στη λειτουργία rendering:

function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();

Εάν δοκιμάσετε στο πρόγραμμα περιήγησης που διαθέτετε τώρα, θα δείτε έναν σωστό κινούμενο 3D κύλινδρο.

συμπέρασμα

Αν θέλετε να δείτε ένα demo και να παίξετε με τον κωδικό που μπορείτε κάντε το εδώ.

Όπως βλέπετε, η δημιουργία αυτής της (σίγουρα πολύ απλής) σκηνής πήρε λιγότερο από δύο δωδεκάδες γραμμές κώδικα και υπάρχουν λίγα μαθηματικά.

Αν ελέγξετε το παραδείγματα στον ιστότοπο three.js θα δείτε μερικές απίστευτες εργασίες που έχουν γίνει.

Αυτή η εκπληκτική βιβλιοθήκη για το JavaScript έχει μειώσει πραγματικά το επίπεδο εισόδου για την κωδικοποίηση 3D στο σημείο που μπορεί να εμπλακεί οποιοσδήποτε μπορεί να γράψει βασικό JavaScript.

Προτεινόμενη εικόνα / μικρογραφία, 3D εικόνα μέσω Shutterstock.