Lag 3D Web Apps & Graphics med Whitestorm.js
Nettspill har kommet langt takket være WebGL og relaterte HTML5 APIer. Det mest fremtredende open source-biblioteket for 3D er Three.js.
Mens Three.js er kraftig, er det også komplisert å lære fra grunnen av. I stedet kan du plukke opp Whitestorm.js, en åpen kildekode ramme laget for 3D web grafikk. Den bruker Three.js som en underliggende teknologi som hjelper deg med å bygge raskere og skape realistiske 3D-effekter i nettleseren.
Whitestorm kommer med sin egen fysikkmotor bygget på toppen av Three.js-rendering. Dette lar deg lage realistisk tyngdekraft og andre lignende effekter der objekter samhandle og svare på hverandre.

Og Whitestorm er helt modulær, så du har full kontroll over hvilke funksjoner som lastes inn på siden. Den bruker Bullet Physics bibliotek portet inn i JavaScript for full støtte på nettet.
Her er en grunnleggende kodebit som skaper et nytt Three.js miljø bruker Whitestorm.
const app = ny WHS.App ([ny WHS.app.ElementModule (), // legg til DOM ny WHS.app.SceneModule (), // lager THREE.Scene eksempel nytt WHS.app.CameraModule (), // lager PerspectiveCamera-forekomst ny WHS.app.RenderingModule () // lager WebGLRenderer-forekomst]); app.start (); // kjør animasjon
Du kan selvsagt legg til dine egne moduler Til og med lag plugins / komponenter bygget av standardbiblioteket. JS-koden støtter ECMAScript 6 og skal støtte alle kommende endringer i språket.
Geometry, fysikk, og bevegelse alt rullet inn i ett bibliotek. Whitestorm er virkelig fremtiden for 3D-animasjon for nettet.
Du kan finne mange prøvekoder i GitHub repo sammen med laste ned koblinger og a fil utforsker. Vær advart biblioteket er enorm så det er mye å gå gjennom. Selv dokumentasjonen har lange opplæringsprogrammer for nybegynnere.
Men med disse dokumentene kan du lære alt fra 3D-transformasjoner til feilsøking og detaljert 3D-animasjon.

For å lære mer, besøk hovedsiden og bla gjennom noen levende eksempler til se Whitestorm i aksjon. Hvis du er dristig nok til å dykke inn, laster du ned en kopi av biblioteket fra GitHub eller via npm og begynn å lage noen søte 3D web apps.