Share
Three.js is een open-source JavaScript-bibliotheek / API die wordt gebruikt voor het maken en weergeven van geanimeerde 3D-computerafbeeldingen op een webbrowser, compatibel met het HTML5-canvaselement, WebGL en SVG. In dit artikel Leren leren we de mogelijkheden van deze engine verkennen en bronnen en suggesties delen om u te helpen meteen games te ontwikkelen..
Sinds Three.js voor het eerst werd uitgegeven door Ricardo Cabello aan GitHub in 2010, is de codebasis voortdurend onderhouden en verbeterd door een groeiende en ondersteunende gemeenschap. De set ingebouwde functies is uitgebreid en bevat:
Meer dan 100 voorbeelden ter illustratie van deze functies (en meer) zijn opgenomen in de hoofdrepository en vele andere sites bieden verzamelingen voorbeelden met broncode beschikbaar. Bovendien, aangezien de bibliotheek is geschreven in Javascript, is het gemakkelijk om online te werken en om uw werk in te zetten.
Een futuristisch racespel gecreëerd door Thibaut Despoulain:
Een auto racespel gemaakt door Jasmine Kent:
Gerelateerde ontwikkelingsartikelen zijn te vinden op de Gamasutra-blog van Jasmine.
Een 2.5D-platformer weergegeven in 3D, met een ingebouwde live-leveleditor gemaakt door Mario Gonzalez:
Een knikker / voetbalspel gemaakt door Jerome Etienne:
Een doolhofspel gemaakt door Rye Terrell:
Een 3D-pingpongspel met videochat in het spel, gemaakt door Google:
Meer informatie is te vinden op de pagina Chrome-experimenten van de game en dit artikel achter de schermen.
Een interactieve reis gemaakt door Walt Disney en UNIT9
Meer informatie is beschikbaar op de pagina Chrome-experimenten van de game.
Aangezien Three.js een Javascript-bibliotheek is, is het opzetten van uw ontwikkelomgeving bijzonder eenvoudig: de enige vereisten zijn een teksteditor en een webbrowser. Dat gezegd hebbende, teksteditors met functies zoals syntax highlighting / folding, bracket matching, een document map, enzovoort - zoals Notepad ++ of Sublime Text - zorgen voor een betere codeerervaring.
Wat webbrowsers betreft, hebben zowel Google Chrome als Mozilla Firefox uitstekende WebGL-ondersteuning. Google Chrome heeft een bijzonder nuttige set van ingebouwde ontwikkelaarstools die het workflowproces aanzienlijk kunnen vereenvoudigen, zoals een console die kan worden gebruikt voor het opsporen van foutmeldingen en het controleren van Javascript-waarden en objecten, en Workspace-instellingen waarmee u bronbestanden kunt bewerken en opslaan vanuit de browser. Meer informatie is te vinden op de Chrome DevTools-site.
Tip: Het is ook mogelijk om code volledig online te gebruiken met behulp van Three.js, met behulp van services zoals jsFiddle, zoals aangetoond in dit voorbeeld. Deze optie wordt echter meestal alleen gebruikt voor het delen van voorbeelden of demonstraties met kleine hoeveelheden code.
Als u Three.js wilt instellen, gaat u eerst naar de GitHub-repo. Er zal een knop verschijnen met de tekst "ZIP downloaden" waarmee je alle code in de repository als ZIP-bestand kunt downloaden. (Er zijn andere alternatieven, zoals klonen of het reppen van de repository met behulp van Git, die niet nodig zijn voor de gemiddelde gebruiker - deze opties zijn vooral alleen van nut als u van plan bent om bij te dragen aan de broncode of online documentatie.)
gerelateerde berichtenNadat u het bestand hebt gedownload en uitgepakt in een map naar keuze, blijft er nog een belangrijke stap over voordat u de meeste voorbeelden op uw eigen computer kunt bekijken. Veel Three.js-projecten omvatten het laden van inhoud van externe bestanden (zoals afbeeldingen), maar uit veiligheidsoverwegingen beperken webbrowsers dit gedrag standaard. De twee opties voor het oplossen van dit probleem zijn om de beveiligingsinstellingen in uw webbrowser te wijzigen of om bestanden vanaf een lokale server uit te voeren.
De eerste optie is de meest eenvoudige (u kunt bijvoorbeeld de instellingen voor Google Chrome in Windows wijzigen door een snelkoppeling voor Chrome te maken en het pad met de vlag te bewerken --allow-file-access-from-files). Instructies voor beide opties zijn te vinden in de officiële wiki, op de pagina 'Hoe dingen lokaal uit te voeren'.
Three.js is geschreven in Javascript, dus het is aan te bevelen dat u een goede kennis van deze taal hebt. Er is een groot aantal bronnen vrij beschikbaar op internet; twee bijzonder uitstekende interactieve bronnen zijn:
Voor meer informatie over het instellen van een basisscène in Three.js (inclusief een discussie over scènes, camera's, renderers, meshes en de animatielus, gaat u naar: de officiële handleiding.) Een andere geweldige introductie tot het maken van een basisscène is het artikel Aan de slag met Three.js door Paul Lewis
Een grondiger inleidend overzicht van de mogelijkheden van Three.js is de uitstekende presentatie door James Williams (een video en een diavoorstelling) bij Introduction to WebGL en Three.js.
De documentatie van Three.js, beschikbaar op http://threejs.org/docs/, is een werk in uitvoering maar een goede eerste plaats om een idee te krijgen voor veel van de beschikbare functies.
Een meer uitgebreide manier om meer te weten te komen over de interne werking van de bibliotheek, is bladeren door de broncode van de officiële verzameling voorbeelden op http://threejs.org/examples/, die vaak worden vernoemd naar het aspect van de bibliotheek dat ze het meest weergeven prominente functie. Een andere bron, bestaande uit vereenvoudigde en grondig becommentarieerde voorbeelden die zijn geschreven voor beginners, is de verzameling op http://stemkoski.github.io/Three.js/. Ook worden veel Three.js-projecten aangekondigd op Twitter met de #ThreeJS hashtag of op de Three.js subreddit.
Twee bijzonder indrukwekkende en inspirerende collecties van geavanceerde Three.js-projecten zijn:
Sommige websites en blogs die ontwikkelingen bespreken en vaak gebruikmaken van Three.js-projecten zijn:
Voor meer informatie over de basis van 3D-computergraphics, bekijk Interactive 3D Graphics, een gratis online cursus van Eric Haines met video-colleges en interactieve programmeeroefeningen met Three.js.
Als u meer functionaliteit wilt gebruiken dan die van Three.js, is het eenvoudig (en gebruikelijk) om extra Javascript-bibliotheken op te nemen, zoals:
Als u geavanceerde grafische effecten wilt maken die verder gaan dan die van Three.js, moet u leren om shaders te schrijven, functies die rechtstreeks op de GPU worden uitgevoerd. Twee uitstekende introducties voor shaders, specifiek geschreven voor gebruikers van Three.js, zijn:
Ten slotte, als u geïnteresseerd bent in het implementeren van uw project voor Android of iOS, dan is Cocaine JS van Ludei een platform dat precies dat doet. Het proces is goed gedocumenteerd en relatief eenvoudig, omdat het meeste werk wordt geautomatiseerd door het CocoonJS Cloud Compilation System.
Als je een vraag hebt die je niet kunt achterhalen aan de hand van de voorbeelden of bronnen hierboven, dan is Stack Overflow de eerste vraag- en antwoordsite voor professionele en enthousiaste programmeurs. Zoek eerst om te zien of uw vraag al is gesteld; zo niet, registreer je voor een account en vraag het daar!
Met deze middelen tot uw beschikking, is het tijd om te beginnen met creëren! Three.js heeft een actieve en levendige community, dus u moet altijd de tijd hebben om vragen te stellen, mee te doen aan discussies en uw werk te laten zien. Veel succes met je in je inspanningen!
Accentsconagua