Zgradite osnovno bojno igro s storitvijo three.js

three.js je knjižnica JavaScript 3D grafike, ki pomaga poenostaviti postopek ustvarjanja prizorov z WebGL. Three.js in WebGL sta bila skupaj uporabljena pri projektih, od spletnih oglaševalskih kampanj za filmsko trilogijo Hobbit do vizualizacij za Google I / O.

V tem članku bomo s tri.js ustvarili preprosto igro. Ni prostora za popoln vodnik po korakih, vendar bom predstavil ključne koncepte. Ko jih obvladate, dobite celotno izvorno kodo tukaj za podrobno raziskovanje. Nimate razvrščene programske opreme? Tukaj so najboljša programska oprema za 3D modeliranje možnosti okrog.



Recoil je bila tankovska igra, ki jo je leta 1999 razvil Zipper Interactive. Uporabili ga bomo kot osnovo za lastno igro

Recoil je bila tankovska igra, ki jo je leta 1999 razvil Zipper Interactive. Uporabili ga bomo kot osnovo za lastno igro

Takrat, ko sem v računalniškem kampu poučeval tečaje programiranja, je bila med otroki priljubljena igra za več igralcev Recoil. V njem nadzorujete oklepni tank in, kar je najpomembneje, razstrelite stvari. To bo navdih za našo igro.

Osnovna nastavitev

Spodaj je koda za nastavitev osnovne scene, ki vsebuje kamero in luč:

var height = 480, width = 640, fov = 45, aspect, near, far; aspect = width/height; near = 0.1; far = 10000; self.renderer = new THREE.WebGLRenderer(); self.renderer.setSize(width, height); self.camera = new THREE.PerspectiveCamera(fov, aspect, near, far); self.camera.position.y = 5; self.camera.position.z = 30; var light = new THREE.DirectionalLight(0xFFFFFF, 0.75); light.position.set(0,200, 40); self.scene = new THREE.Scene(); self.scene.add(this.camera); self.scene.add(light); document.querySelector('#c').appendChild(this.renderer.domElement)

Nalaganje modelov

Čeprav je ustvarjanje predmetov s kodo zabavno, boste za karkoli zapletenega želeli uporabiti specializirano programsko opremo za 3D modeliranje. Za to igro uporabljam Blender, zelo sposobno in zrelo 3D aplikacijo (glej okvirček nasproti). three.js prvotno podpira nekaj običajnih formatov datotek 3D, za aplikacije, kot so 3ds Max, Maya in Blender, pa so na voljo vtičniki, ki vam bodo omogočili izvoz modelov v obliki JSON, ki jo bo lahko tri.js lažje razčlenil.

Obstaja veliko modelov, ki so na voljo brezplačno na spletnih mestih, kot so Zamenjajte mešanico in Umetniki mešalnika . three.js podpira uvoz tako statičnih kot dinamičnih modelov.

Slednji zahtevajo nekaj več dela, tako pred kot po uvozu v igro. Vrtanje - priprava modela za animacijo - je zunaj področja uporabe tega članka. Vendar pa so modeli na spletnih mestih, kot je Blend Swap, pogosto vnaprej pripravljeni, tako da lahko ustvarite lastne animacije; ali; celo z lastnim nizom že ustvarjenih animacij.

three.js za uvoz modelov uporablja objekt JSONLoader. Ta objekt vključuje funkcijo nalaganja, ki vzame fragment URI, ki kaže na datoteko JSON, funkcijo povratnega klica in neobvezen fragment, ki kaže na sredstva:

var scope = this; var loader = new THREE.JSONLoader(); loader.load('model/chaingunner.json', function(geometry, material) { var texture = THREE.ImageUtils.loadTexture('model/chaingunner_body.png'); var material = new THREE.MeshLambertMaterial({color:0xFFFFFF, map:texture, morphTargets: true}); scope.human2 = new THREE.MorphAnimMesh(geometry, material); scope.human2.position.y = 0.4; scope.human2.position.x = 8; scope.human2.scale.set(0.5, 0.5, 0.5); scope.scene.add(scope.human2); });

Teksture in materiali

Preden se pogovorimo o mreži, ki smo jo naložili, se pogovorimo o tem, kako bo teksturirana. three.js ima pomožni objekt THREE.ImageUtils za nalaganje tekstur v eno vrstico kode. Ko je tekstura naložena, lahko na njej nastavite lastnosti, da določite, kako bo preslikana na objekt, preden jo dodate v material.

Material določa videz predmeta. Glede na material določa tudi, kako viri svetlobe vplivajo na predmet in vplivajo nanj.

Model rezervoarja, prikazan v urejevalniku three.js z materiali in osvetlitvijo. Urednik je odličen kraj za eksperimentiranje z materiali

Model rezervoarja, prikazan v urejevalniku three.js z materiali in osvetlitvijo. Urednik je odličen kraj za eksperimentiranje z materiali

MeshBasicMaterial ne upošteva nobene luči, ki bi lahko bila prisotna. MeshLambertMaterial in MeshPhongMaterial upoštevata razsvetljavo. Lambert-senčene površine so na splošno razpršene. Phong senčene površine se izračunajo na ravni slikovnih pik in uporabniku omogočajo, da nastavi komponente, da ugotovi, kako svetleč je material. Phong materiali lahko z bolj drobnim nadzorom naredijo vse, kar lahko naredijo Basic ali Lambert materiali.

kako risati anatomijo moškega telesa

ShaderMaterial, ki vam ga bom pustil raziskovati sam, vam daje največji nadzor nad vsemi. Uporablja GLSL, jeziku, podobnemu C, ki deluje na grafičnem procesorju in vam omogoča interakcijo z vsako točko in slikovno piko v materialu.

Morph tarče in animacija

Model, ki ga uporabljamo, je vnaprej nameščen in ima nekaj animacij. three.js vam omogoča animiranje predmetov z uporabo morph tarče ali okostne animacije.

Za skeletno animacijo umetnik v 3D aplikaciji, kot je Blender, nastavi vrsto 'kosti'. Ti tvorijo digitalni ekvivalent armature znotraj modela zaustavitve. Ko so kosti animirane, deformirajo 3D mrežo, ki jih obdaja, kar pomeni, da se model sam premika. Te podatke o kosti lahko izvozite v format three.js.

Morph cilji pa shranjujejo položaje vseh točk v mreži neposredno za vsak ključni okvir vaše animacije. Torej, če imate model s 500 vertices - nikakor nerazumno velik - in imate 10 morph tarč, od katerih vsaka ustreza svoji obliki v ključnem kadru v animaciji, shranite podatke za 5000 dodatnih vertices. Morph tarči so bolj zanesljivi za delo, vendar imajo velikost datoteke.

MorphAnimMesh je posebna vrsta THREE.Mesh, ki naloži vse podatke o točkah za mrežo in vam omogoča selektivno izvajanje animacij. Če ima mreža samo eno animacijo, lahko ustvarite objekt MorphAnimation.

human2.animation = new THREE.MorphAnimation (scope.human2);
human2.animation.play ();

Upravljanje vnosa s tipkovnice

TRI je niz neodvisnih razširitev za three.js. Vključuje threex.keyboardstate, razširitev, ki spremlja tipke, pritisnjene na tipkovnici. Na prvi pogled se to ne zdi tako novo, podpira pa več hkratnih pritiskov tipk: na primer uporabo modifikacijskih tipk (shift, alt, ctrl, meta).

Animirani model sredi svojega animacijskega cikla. Še en model počiva v svoji

Animirani model sredi svojega animacijskega cikla. Še en model počiva v svoji 'mrtvi' pozi

Običajno bi napisali kodo, ki dodaja poslušalce dogodkov na tipkovnico ali tipkovnico in takoj zagnali kodo. V igri želite posodobiti samo enkrat na okvir. Threex.keyboardstate s pomočjo poslušalcev tipkovnice in tipkovnice posodobi objekt zemljevida, za katerega lahko poizvedujete tako pogosto, kot želite, da določi stanje ključa.

Naslednja koda nastavi razširitev in jo uporabi za določanje stisnjenega stanja tipke:

var keyboard = new THREEx.KeyboardState(); // ... if (keyboard.pressed('W')) { this.tank.translateX(moveDelta); }

Animiranje na poti

Animiranje mreže na mestu ni zelo razburljivo. Dajmo nekaterim našim predmetom avtonomno gibanje, da bo igra bolj privlačna. Da bi to naredil, sem ustvaril 'razred', imenovan PathAnimation. Večinoma izvira iz razreda MorphAnimation, vendar namesto da bi vzel niz nizov točk, ki predstavljajo mrežo, potrebuje niz točk, po katerih se bo mreža premikala.

three.js ima nekaj možnosti za ustvarjanje in določanje informacij o poti. Želel sem pot, ki je videti nekoliko realistično, zato sem za izračun nabora točk uporabil EllipseCurve in njegovo funkcijo getPoints:

var curve = new THREE.EllipseCurve( 0, 0, // ax, aY 200, 200, // xRadius, yRadius 0, ; 2 * Math.PI, ; // aStartAngle, aEndAngle false // aClockwise ); var points = curve.getPoints(100); var pathAnim = new PathAnimation(mesh, points, 0.4);

Naslednja koda preveri, ali se predvaja animacija (tj. Predmet se premika po poti). Če je tako, doda delto trenutnemu času, s tem določi, na kateri točki naj bo mreža, in jo premakne na to točko. Če je trenutni čas daljši od trajanja animacije, se začne znova:

update: function(delta) { if (this.isPlaying === false || this.mesh == undefined) return; this.currentTime += delta; if (this.loop === true && this.currentTime > this.duration) { this.currentTime %= this.duration; } var interpolation = this.duration / this.points.length; this.point = Math.floor(this.currentTime / interpolation); var vectorCurrentPoint = this.points[this.point]; if (vectorCurrentPoint) this.mesh.position.set(-vectorCurrentPoint.x, this.y, vectorCurrentPoint.y); }

Zaznavanje trkov

Zdaj imamo animacije ožičene, potrebujemo način, kako obvestiti znake, da se morajo odzvati na zadetek. Z zaznavanjem trkov je mogoče dobiti zelo natančne odzive z uporabo naprednih algoritmov in fizikalnih formul, za našo preprosto igro pa lahko uporabimo omejene količine - polja in krogle - za ugotavljanje, ali sta se dva predmeta dotaknila. To so preproste geometrijske oblike, ki obkrožajo mrežo in obdajajo vse njene točke.

Omejujoče količine lahko uporabimo za vizualno preverjanje trkov in za boljše razumevanje medsebojnega delovanja kamer in luči znotraj scene

Omejujoče količine lahko uporabimo za vizualno preverjanje trkov in za boljše razumevanje medsebojnega delovanja kamer in luči znotraj scene

Na srečo ima three.js v knjižnico vgrajene omejene nosilce, zato se samodejno ustvarijo za objekt. BoundingBoxHelper vam omogoča, da vizualizirate položaj omejevalnega polja prek; te kode:

var bbox = new THREE.BoundingBoxHelper( tank ); bbox.update();

Posodobiti boste morali svoje omejevalno polje na vsakem okvirju animacije, da zagotovite, da ostane sinhronizirano z vašim modelom.

Zakaj pa potrebujemo omejene količine? Če želite ohraniti hitrost predvajanja sličic 60 sličic na sekundo, ima vaša igra približno 16,6 ms za dokončanje vseh potrebnih izračunov, izračun novih položajev predmetov in njihovo ponovno risanje. Preverjanje trkov med dvema zapletenima očesoma, od katerih lahko vsaka vsebuje na tisoče obrazov, je računsko zelo drago. Toda s preverjanjem kolizij med njihovimi omejenimi prostorninami lahko dobimo razumen približek, ali sta očesi sami trčili - in preverjanje križišč škatle ali škatle krogle je razmeroma hitro.

Predmet ima lahko več omejenih zvezkov. Na primer, za človeku podoben značaj bi lahko imeli posamezne omejujoče količine okoli glave, trupa, rok, nog, rok in stopal. Okoli celotnega lika je lahko tudi omejujoča krogla.

Sovražni tank, gledan skozi prvoosebno perspektivo igralca

Sovražni tank, gledan skozi prvoosebno perspektivo igralca

Ko se igra zažene, najprej preveri, ali bi morala preveriti, ali med dvema predmetoma ni trkov. Recimo, da želimo, da se trki izračunajo le, če so predmeti bližje od 50 enot. Če poznamo središče mase za oba predmeta, lahko hitro ugotovimo, ali bi se morali premakniti naprej.

Če preverjanje mine, nadaljujemo s preverjanjem omejevalnih krogel, da ugotovimo, ali je prišlo do trka. V tem primeru lahko izberemo podmnožico omejujočih količin, da ugotovimo - v primeru našega značaja - kateri del telesa je bil zadet. Na ta način izvajamo drage izračune le takrat, ko to zares potrebujemo.

Sledenje žarkov

Razred žarkov je podoben streljanju puščice na kup predmetov in spraševanju, kateri so bili zadeti:

this.ray = new THREE.Raycaster(); checkCollisions: function(b, vec, objects) { this.ray.set(b.position.clone(), vec); var collResults = this.ray.intersectObjects(objects, true); if (collResults.length > 0 && collResults[0].distance < 5) { var object = collResults[0].object; // Do something with that collision this.removeBullet(b); return object; } }

Če se žarek uporablja za predstavitev fotona svetlobe in ne fizičnega predmeta, se lahko s tem simulira način odbijanja svetlobnih žarkov ali interakcija s površinami, ki jih udarijo, kar nam omogoča, da na naši sceni postavimo fotorealistično osvetlitev - koncept, znan kot sledenje žarkom. Sledenje žarkov je računsko zelo drago, kar je razlog, da smo v zgornji kodi delali samo z enim žarkom in določili njegovo smer.

Gremo naprej

V tem članku smo zajeli veliko področij in vam predstavili številne osnovne koncepte razvoja iger z uporabo three.js. Začetek je dober, a do popolne igre smo še daleč.

Če želite iti dlje, lahko najdete celotno kodo tukaj , in preoblikujte, remiksirajte ali predelajte, kar potrebujete, v svoje igre. Poročilo vsebuje tudi seznam povezav do 3D modelov, ki sem jih uporabil. Zabavaj se!

Besede : James Williams

James Williams je razvijalec tečajev pri Udacity. Ta članek se je prvotno pojavil v številki 264 časopisa net magazine .

Je to všeč? Preberite jih!