Πώς να δημιουργήσετε ένα 3D μηχανή για HTML5

Είστε πιθανόν γνωρίζει από τώρα ότι για HTML5 είναι παιχνίδι-αλλαγή. Ειδικότερα, με τον καμβά για HTML5, υπήρξε μια όλης για HTML5 3D JavaScript κινητήρων όπως three.js κυκλοφορήσει για την ενίσχυση της στοιχειώδους API για HTML5 2D. Μετά από όλα, τρισδιάστατων γραφικών είναι πολύ πιο ψυχρή από 2D γραφικά, σωστά;

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

Αλλά τι γίνεται αν θέλαμε να δημιουργήσουμε ένα βελτιστοποιημένο, barebones 3D JavaScript κινητήρα που υποστηρίζει μεταφράσεις και περιστροφές; Πόσο δύσκολο θα ήταν;

Τι γίνεται αν σας πω ότι μπορούμε να δημιουργήσουμε δικά μας απλή 3D κινητήρα JavaScript με μόλις 40 γραμμές κώδικα;

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

Κατανόηση προβολές 3D

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

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