Share
Three.js er et open-source JavaScript-bibliotek / API som brukes til å lage og vise animert 3D-datamaskingrafikk i en nettleser, kompatibel med HTML5-lerretelementet, WebGL og SVG. I denne Hvordan Lære artikkelen vil vi utforske egenskapene til denne motoren og dele ressurser og forslag for å hjelpe deg med å begynne å utvikle spill med det med en gang.
Siden Three.js ble først utgitt av Ricardo Cabello til GitHub i 2010, har koden base blitt kontinuerlig opprettholdt og forbedret av et voksende og støttende samfunn. Settet med innebygde funksjoner er omfattende, og inkluderer:
Over 100 eksempler som illustrerer disse funksjonene (og mer) er inkludert i hovedregisteret, og mange andre nettsteder gir samlinger av eksempler med kildekoden tilgjengelig. Dessuten, siden biblioteket er skrevet i Javascript, er det enkelt å komme seg opp og løpe, samt å distribuere arbeidet ditt.
Et futuristisk racing spill laget av Thibaut Despoulain:
Et bil racing spill laget av Jasmine Kent:
Relaterte utviklingsartikler finnes på Jasmines Gamasutra-blogg.
En 2.5D-plattformspiller gjengitt i 3D, med et innebygd live level editor, opprettet av Mario Gonzalez:
Et marmor / fotballspill laget av Jerome Etienne:
Et labyrintspill laget av Rye Terrell:
Et 3D ping-pong spill som inkorporerer videochatt i spillet, laget av Google:
Mer informasjon finner du på spillets Chrome-eksperimentside og denne bak-scenen-artikkelen.
En interaktiv reise laget av Walt Disney og UNIT9
Mer informasjon er tilgjengelig på spillets Chrome Experiments-side.
Siden Three.js er et Javascript-bibliotek, er det spesielt enkelt å sette opp utviklingsmiljøet: de eneste kravene er en tekstredigerer og en nettleser. Når det er sagt, vil tekstredigerere med funksjoner som syntaxutheving / -folding, braketsammenstilling, et dokumentkart og så videre - som Notepad ++ eller Sublime Text - gi en bedre kodingserfaring.
Når det gjelder nettlesere, har både Google Chrome og Mozilla Firefox utmerket WebGL-støtte. Google Chrome har et spesielt nyttig sett med innebygde utviklerverktøy som i stor grad kan forenkle arbeidsflyten, for eksempel en konsoll som kan brukes til feilsøking og inspeksjon av Javascript-verdier og objekter, og arbeidsområdeinnstillinger som lar deg redigere og lagre kildefiler fra nettleseren. Flere detaljer finner du på Chrome DevTools-siden.
Tips: Det er også mulig å skrive kode ved hjelp av Three.js helt online, ved hjelp av tjenester som jsFiddle, som vist i dette eksemplet. Dette alternativet brukes imidlertid vanligvis kun til å dele eksempler eller demonstrasjoner med små mengder kode.
For å sette opp Three.js, gå først til GitHub repo. Det vil være en knapp som sier "Last ned ZIP" som lar deg laste ned all koden i depotet som en ZIP-fil. (Det finnes andre alternativer, for eksempel kloning eller forking av depotet ved hjelp av Git, som er unødvendig for den gjennomsnittlige brukeren. Disse alternativene er først og fremst nyttige bare hvis du planlegger å bidra til kildekoden eller dokumentasjonen på nettet.)
Relaterte innleggNår du har lastet ned og pakket ut filen i en katalog du har valgt, er det et viktig steg igjen før du kan se de fleste eksemplene på din egen datamaskin. Mange Three.js-prosjekter innebærer å laste inn innhold fra eksterne filer (for eksempel bilder), men av sikkerhetshensyn begrenser nettlesere denne oppførselen som standard. De to alternativene for å løse dette problemet er å enten endre sikkerhetsinnstillingene i nettleseren din, eller å kjøre filer fra en lokal server.
Det tidligere alternativet er det mest enkle (for eksempel kan endring av innstillingene for Google Chrome i Windows oppnås ved å opprette en snarvei for Chrome og redigere banen for å inkludere flagget --allow-fil-access-fra-filer). Instruksjoner for begge alternativene finnes i den offisielle wiki, på siden med tittelen Slik kjører du ting lokalt.
Three.js er skrevet i Javascript, så det anbefales at du har et arbeidskunnskap om dette språket. Det finnes et mylder av ressurser fritt tilgjengelig over Internett for dette; To spesielt fremragende interaktive ressurser er:
For å lære å sette opp en grunnleggende scene i Three.js (inkludert en diskusjon om scener, kameraer, renderere, masker og animasjonsløkken, besøk: Den offisielle håndboken. En annen god introduksjon til å lage en grunnleggende scene er artikkelen Komme i gang med Three.js av Paul Lewis
En mer grundig innledende undersøkelse av Three.js kapasitet er den utmerkede presentasjonen av James Williams (en video og lysbildefremvisning) ved Introduksjon til WebGL og Three.js.
Dokumentasjonen Three.js, tilgjengelig på http://threejs.org/docs/, er et pågående arbeid, men et godt første sted å få en ide for mange av de tilgjengelige funksjonene.
En mer omfattende måte å lære om bibliotekets indre arbeider er å bla gjennom kildekoden til den offisielle samlingen av eksempler på http://threejs.org/examples/, som ofte heter tittelen på biblioteket de mest fremtredende funksjon. En annen ressurs, som består av forenklet og grundig kommentert eksempler skrevet for nybegynnere, er samlingen på http://stemkoski.github.io/Three.js/. Også mange Three.js-prosjekter blir annonsert på Twitter med #ThreeJS hashtag eller på Three.js subreddit.
To spesielt imponerende og inspirerende samlinger av avanserte Three.js-prosjekter er:
Noen nettsteder og blogger som diskuterer utvikling og har ofte Three.js-prosjekter inkluderer:
For å lære mer om grunnlaget for 3D-datagrafikk, sjekk ut Interactive 3D Graphics, et gratis online kurs undervist av Eric Haines som inneholder videoforelesninger og interaktive programmeringsøvelser ved hjelp av Three.js.
Hvis du trenger å inkorporere funksjonalitet utover det som tilbys av Three.js, er det enkelt (og vanlig praksis) å inkorporere ytterligere Javascript-biblioteker, for eksempel:
Hvis du vil lage avanserte grafiske effekter utover de som er inkludert i Three.js, må du lære å skrive shaders, som er funksjoner som kjører direkte på GPU. To gode introduksjoner til shaders, skrevet spesielt for brukere av Three.js, er:
Til slutt, hvis du er interessert i å distribuere prosjektet ditt til Android eller iOS, er Ludeis CocoonJS en plattform som gjør akkurat det. Prosessen er veldokumentert og relativt enkelt, siden det meste av arbeidet er automatisert av CocoonJS Cloud Compilation System.
Hvis du har et spørsmål som du ikke kan finne ut ved å se på eksemplene eller ressursene ovenfor, er stedet å gå for hjelp Stack Overflow, det fremste spørsmålet og svarstedet for profesjonelle og entusiastiske programmerere. Først, søk for å se om spørsmålet ditt allerede var spurt; Hvis ikke, registrer deg for en konto og spør den!
Med disse ressursene til din disposisjon, er det på tide å begynne å skape! Three.js har et aktivt og levende samfunn, så du bør alltid gjerne stille spørsmål, delta i diskusjonene og presentere arbeidet ditt. Lykke til deg i dine bestrebelser!
Accentsconagua