Share
Three.js är ett JavaScript-bibliotek med öppen källkod / API som används för att skapa och visa animerad 3D-datorgrafik i en webbläsare, kompatibel med HTML5-canvaselementet, WebGL och SVG. I den här hur man läser artikeln utforskar vi motorens egenskaper och delar resurser och förslag som hjälper dig att börja utveckla spel med det direkt.
Sedan Three.js först släpptes av Ricardo Cabello till GitHub 2010, har kodbasen kontinuerligt bibehållits och förbättrats av ett växande och stödjande samhälle. Satsen med inbyggda funktioner är omfattande och inkluderar:
Över 100 exempel som illustrerar dessa funktioner (och mer) ingår i huvudförvaret, och många andra webbplatser tillhandahåller samlingar av exempel med källkod tillgängliga. Dessutom, eftersom biblioteket är skrivet i Javascript, är det enkelt att komma igång, liksom att distribuera ditt arbete.
Ett futuristiskt tävlingsspel skapat av Thibaut Despoulain:
Ett motorsportspel skapat av Jasmine Kent:
Relaterade utvecklingsartiklar finns på Jasmines Gamasutra-blogg.
En 2.5D-plattformsläsare gjord i 3D, med en inbyggd live level editor, skapad av Mario Gonzalez:
Ett marmor / fotbollsmatch skapat av Jerome Etienne:
Ett labyrint spel skapat av Rye Terrell:
Ett 3D-ping-pong-spel som innehåller videochatt i spelet, skapat av Google:
Mer information finns på spelets Chrome-experiment sida och den här artikeln bakom kulisserna.
En interaktiv resa skapad av Walt Disney och UNIT9
Mer information finns på spelets Chrome Experiments-sida.
Eftersom Three.js är ett Javascript-bibliotek är det särskilt enkelt att konfigurera din utvecklingsmiljö. De enda kraven är en textredigerare och en webbläsare. Med detta sagt kan textredigerare med funktioner som syntaxmarkering / -viktning, konsollmatchning, en dokumentkarta och så vidare - som Notepad ++ eller Sublime Text - ge en bättre kodningsupplevelse.
När det gäller webbläsare har både Google Chrome och Mozilla Firefox utmärkt WebGL-stöd. Google Chrome har en särskilt användbar uppsättning av inbyggda utvecklingsverktyg som i stor utsträckning kan förenkla arbetsflödesprocessen, till exempel en konsol som kan användas för felsökning och inspektion av Javascript-värden och -objekt och arbetsområdeinställningar som låter dig redigera och spara källfiler från webbläsaren. Mer detaljer finns på Chrome DevTools-webbplatsen.
Tips: Det är också möjligt att skriva kod med Three.js helt online, med hjälp av tjänster som jsFiddle, vilket visas i det här exemplet. Men det här alternativet används normalt bara för att dela exempel eller demonstrationer med små mängder kod.
För att ställa in Three.js, gå först till GitHub repo. Det kommer att finnas en knapp som säger "Ladda ner ZIP" som låter dig ladda ner all kod i förvaret som en ZIP-fil. (Det finns andra alternativ, till exempel kloning eller förkungning av förvaret med hjälp av Git, vilket är onödigt för den genomsnittliga användaren. Dessa alternativ är först och främst användbara endast om du planerar att bidra till källkoden eller online-dokumentationen.)
relaterade inläggNär du väl har laddat ner filen och släppt den i en katalog du väljer väljer du ytterligare ett viktigt steg innan du kan se de flesta exemplen på din egen dator. Många Three.js-projekt innebär att du laddar innehåll från externa filer (till exempel bilder), men av säkerhetsskäl begränsar webbläsare det här beteendet som standard. De två alternativen för att lösa detta problem är att antingen ändra säkerhetsinställningarna i din webbläsare eller att köra filer från en lokal server.
Det tidigare alternativet är det enklaste (till exempel kan ändra inställningarna för Google Chrome i Windows genom att skapa en genväg för Chrome och redigera sökvägen för att inkludera flaggan --allow-file-access-from-filer). Instruktioner för båda alternativen finns i den officiella wiki, på sidan med titeln Hur man kör saker lokalt.
Three.js är skrivet i Javascript, så det rekommenderas att du har en fungerande kunskap om detta språk. Det finns en mängd resurser fritt tillgängliga över internet för detta; två särskilt enastående interaktiva resurser är:
För att lära dig att ställa in en grundläggande scen i Three.js (inklusive en diskussion om scener, kameror, renderare, nät och animationsslingan, besök: den officiella handboken. En annan bra introduktion till att skapa en grundläggande scen är artikeln Komma igång med Three.js av Paul Lewis
En noggrannare inledande undersökning av Three.js kapaciteter är den utmärkta presentationen av James Williams (en video och bildspel) vid Introduktion till WebGL och Three.js.
Dokumentationen Three.js, tillgänglig på http://threejs.org/docs/, är ett pågående arbete, men en bra första plats för att få en idé för många av de tillgängliga funktionerna.
Ett mer omfattande sätt att lära sig om bibliotekets inre arbete är att bläddra i källkoden för den officiella samlingen av exempel på http://threejs.org/examples/, som ofta betecknas av bibliotekets aspekt de mest framträdande funktion. En annan resurs som består av förenklade och grundligt kommenterade exempel skrivna för nybörjare är samlingen på http://stemkoski.github.io/Three.js/. Också många Three.js-projekt tillkännages på Twitter med #ThreeJS hashtag eller på Three.js subreddit.
Två särskilt imponerande och inspirerande samlingar av avancerade Three.js-projekt är:
Några webbplatser och bloggar som diskuterar utveckling och ofta innehåller Three.js-projekt inkluderar:
För att lära dig mer om grunden för 3D-datorgrafik, kolla in Interactive 3D Graphics, en gratis online-kurs undervisad av Eric Haines som innehåller videoföreläsningar och interaktiva programmeringsövningar med Three.js.
Om du behöver integrera funktionalitet utöver det som tillhandahålls av Three.js är det enkelt (och vanligt) att infoga ytterligare Javascript-bibliotek, till exempel:
Om du vill skapa avancerade grafiska effekter utöver de som ingår i Three.js, måste du lära dig att skriva shaders, vilka är funktioner som körs direkt på GPU. Två utmärkta introduktioner till shaders, skrivna specifikt för användare av Three.js, är:
Slutligen, om du är intresserad av att distribuera ditt projekt till Android eller iOS, är Ludeis CocoonJS en plattform som gör exakt det. Processen är väl dokumenterad och relativt lätt, eftersom det mesta av arbetet är automatiserat av CocoonJS Cloud Compilation System.
Om du har en fråga som du inte kan ta reda på genom att titta på exemplen eller resurserna ovan är platsen att gå till hjälp Stack Overflow, den främsta frågan och svarplatsen för professionella och entusiastiska programmerare. Sök först för att se om din fråga redan har ställts. Om inte, registrera dig för ett konto och fråga det där!
Med dessa resurser till ditt förfogande är det dags att börja skapa! Three.js har en aktiv och livlig samhälle, så du borde alltid gärna ställa frågor, delta i diskussionerna och visa upp ditt arbete. Lycka till dig i dina ansträngningar!
Accentsconagua