Skapa 3D Web Apps & Graphics med Whitestorm.js

Webbspel har kommit långt tack vare WebGL och relaterade HTML5 API. Det mest framträdande open source-biblioteket för 3D är Three.js.

Medan Three.js är kraftfull är det också komplex att lära från grunden. I stället kan du plocka upp Whitestorm.js, en öppen källkod ramad för 3D webbgrafik. Det använder Three.js som en underliggande teknik som hjälper dig att bygga snabbare och skapa realistiska 3D-effekter i webbläsaren.

Whitestorm kommer med sin egen fysikmotor byggd ovanpå Three.js-rendering. Detta låter dig skapa realistisk tyngdkraft och andra liknande effekter där objekt interagera och svara på varandra.

Och Whitestorm är helt modulär, så du har full kontroll över vilka funktioner som laddas in på sidan. Det använder Bullet Physics bibliotek portad till JavaScript för fullt stöd på webben.

Här är ett grundläggande kodblock som skapar en ny Three.js-miljö använder Whitestorm.

 const app = ny WHS.App ([ny WHS.app.ElementModule (), // bifoga DOM ny WHS.app.SceneModule (), // skapar THREE.Scene instance nya WHS.app.CameraModule (), // skapar PerspectiveCamera-instans ny WHS.app.RenderingModule () // skapar WebGLRenderer-instans]); app.start (); // kör animering 

Du kan naturligtvis lägg till dina egna moduler och även skapa plugins / komponenter byggt av standardbiblioteket. JS-koden stöder ECMAScript 6 och bör stödja alla kommande ändringar av språket.

Geometri, fysik, och rörelse alla rullade till ett bibliotek. Whitestorm är verkligen framtiden för 3D-animering för webben.

Du kan hitta massor av provkoder i GitHub repo tillsammans med ladda ner länkar och a filhanterare. Varnas biblioteket är enorm så det finns mycket att gå igenom. Även dokumentationen har långa handledning för nybörjare.

Men med dessa dokument kan du lära dig allt från 3D-transformer till felsökning och detaljerad 3D-animering.

För att lära dig mer, besök huvudwebbplatsen och bläddra igenom några levande exempel till se Whitestorm i aktion. Om du är vågig nog att dyka in, ladda ner en kopia av biblioteket från GitHub eller via npm och börja skapa några söta 3D-webappar.