Kom igång med WebGL med tre.js

Jan 27, 2026
Hur
Web developer creating 3D shape graphics

Webgl , som är allmänt stödd på alla moderna webbläsare, gör att du kan arbeta med hårdvaruaccelerat 3D-grafik i Javascript , öppna ett stort antal möjligheter för webbläsarbaserade appar och spel - kolla bara dessa 20 fantastiska exempel på webgl i aktion , för bevis.

WebGL själv är ganska lågt, och det är osannolikt att du vill arbeta med det i sin vaniljform. Det finns en rad bibliotek och även spelmotorer tillgängliga för att tillhandahålla högre nivå.

I den här handledningen ska jag visa dig Hur man gör en app eller webbplats som använder WebGL i kombination med tre.js , vilket är ett fritt open-source-bibliotek som ger abstraktion av webGL.

01. Få tre.js

Du måste börja med att få tag i tre.js . När du har den senaste byggnaden, placera tre.js i din projektmapp. Vi lägger till det som ett skript till vår sida som alla andra JavaScript-biblioteket. Vi lägger vår egen kod till en separat JavaScript-fil. 

 & lt;! Doktype html & gt;
& lt; html & gt;
  & lt; huvud & gt;
  & LT; Meta Charset = UTF-8 & GT;
  & LT; Titel & GT; Komma igång med Three.JS & LT; / Titel & GT;
  & LT; / Head & GT;
  & lt; kroppsstil = "marginal: 0;" & gt;
  & lt; script src = "tre.js" & gt; & lt; / script & gt;
  & lt; script src = "demo.js" & gt; & lt; / script & gt;
  & LT; / Body & GT;
& lt; / html & gt;

02. Ställ in scenen

Vi behöver tre saker att komma igång med WebGL: en scen, en kamera och en renderare. En scen är där vi lägger föremål som ska visas av tre.js. En kamera är den synvinkel som vi kommer att se dem. Renderer ger de två tillsammans och drar skärmen i enlighet med detta. När vi har ställts in, lägger vi till renderaren till dokumentet. 

 Var width = window.innerwidth;
varhöjd = fönster.innerheight;
var viewange = 45;
var näraClipping = 0,1;
Var Farclipping = 9999;
var scen = ny tre.scene ();
var kamera = ny tre.perspectivecamera (viewangle, width / height, nearclipping, farclipping);
var renderer = ny tre.webglrenderer ();
renderer.setsize (bredd, höjd);
document.body.appendchild (renderer.domeLement);

03. Skapa en slinga

Därefter måste vi skapa en slinga för att faktiskt göra vår scen. Vi gör det här med renderer.Render () funktion, men nyckeln är att återanvända RequestanimationFrame () , som är en inbyggd funktion som gör det möjligt för webbläsaren att begära en annan ram när den är klar att rita en. Använder sig av RequestanimationFrame () är lättare och resulterar i mjukare animering än att försöka tidtappning av ramar själv. 

 Funktion animera () {
  RequestanimationFrame (animera);
  renderer.Render (scen, kamera);
}
animera ();

04. Skapa grundläggande objekt

Nu kan vi börja lägga till några föremål till vår scen. Vi kan göra detta genom att skapa meshobjekt och lägga dem till det. Ett nät består av geometri (formen på objektet) och ett material (den färg eller textur som används för att måla den). Vi skapar några grundläggande föremål genom att definiera tre olika geometrier och tilldela olika färgmaterial till dem. 

 Var CubeGeometry = Ny tre.Boxgeometri (1, 1, 1);
var cubematerial = ny tre.meshlambertmaterial ({färg: 0xff0000});
var kub = ny tre.mesh (kubgeometri, kubematerial);
Var Conegeometri = NEW Tre.ConeGeometri (0,5, 1, 4);
var conematerial = ny tre.meshlambertmaterial ({färg: 0x00ff00});
Var Cone = Ny Three.Mesh (Conegeometri, Conatal);
Var SphereGeometry = New Three.SphereGeometry (0,5, 8, 8);
Var SphereMaterial = Ny tre.Meshlambertmaterial ({Färg: 0x0000FF});
Var Sphere = Ny Three.Mesh (SphereGometry, SphereMaterial);

05. Ange en position

Som standard läggs objekt till ursprunget (x = 0, y = 0, z = 0) av scenen, vilket också är där vår kamera är, så vi måste också ange en position för dem. Vi är då redo att lägga till maskorna till vår scen, vilket innebär att de automatiskt görs i animera() slinga. 

 cube.position.x = -2
cube.position.z = -5;
kone.position.z = -5;
sfär.position.z = -5;
sfär.position.x = 2;
cube.position.z = -5;
scene.add (kub);
scene.add (kon);
scen.Add (sfär);

06. Lägg till en ljuskälla

Om du ser din sida nu hittar du saker ser lite platt. Det finns ingen belysning applicerad på föremålen, så de är fasta primära färger och ser två dimensionella. För att åtgärda detta måste vi byta från MeshbasicMaterial till ett material som stöder belysning; Vi använder Meshlambertmaterial . Vi måste också lägga till en ljuskälla till scenen. 

 Var lätt = Ny tre.PointLight (0xFfFFFF);
ljus.position.x = 0;
ljus.position.y = 10;
ljus.position.z = 0;
scen.add (ljus);

07. Flytta källan

Nu kommer vi dit! Du bör se vad som är ganska tydligt tredimensionella objekt på din sida. Vad vi ännu inte har gjort är fullt fördel med animera() fungera. Låt oss göra några ändringar för att vår ljuskälla flyttar runt i en cirkulär rörelse ovanför föremålen. 

 VAR Lightangle = 0;
funktion animera () {
  Lightangle + = 5;
  Om (Lightangle & GT; 360) {Lightangle = 0;};
  light.position.x = 5 * Math.cos (Lightangle * Math.pi / 180);
  light.position.z = 5 * Math.sin (Lightangle * Math.pi / 180);
  RequestanimationFrame (animera);
  renderer.Render (scen, kamera); }

08. Lägg till textur

I praktiken vill vi förmodligen inte att våra föremål ska vara plana färger. Det skulle vara mer typiskt att applicera lite texturering till dem från en fil. Vi kan göra det här med Tre.textureloader () . Låt oss ändra hur vårt konobjekt skapas för att använda en textur som vi har laddat från en fil. Funktionen kallas när filen är laddad.

  • Var hittar du gratis texturer för 3D-projekt 
 Var TextureLoader = Ny tre.textureloader ();
TextureLoader.Load ("./ grass_texture.jpg", textur = & gt; {
  Var Conegeometri = NEW Tre.ConeGeometri (0,5, 1, 4);
  var conematerial = ny tre.meshlambertmaterial ({karta: textur});
  Var Cone = Ny Three.Mesh (Conegeometri, Conatal);
  kone.position.z = -5;
  scene.add (kon);
  },
);

09. Gör det naturligt

Saker ser bättre ut, men något är fortfarande inte helt naturligt. Texturen ser väldigt platt och svarar inte på belysningen. Vi kan lösa detta genom användning av bumpmappning, vilket gör det möjligt för oss att använda ljusa och mörka delar av en bild för att simulera texturering på ytan av ett objekt. Låt oss prova det med en annan konsistens på sfären. Vi byter materialet till Meshphongmaterial , vilket gör det möjligt för oss att ange a bumpmapp attribut. 

 Var TextureLoader = Ny tre.textureloader ();
TextureLoader.Load ("./ bump_map.jpg", textur = & gt; {
  Var SphereGeometry = New Three.SphereGeometry (0,5, 8, 8);
  var spherematerial = ny tre.meshphongmaterial ({färg: 0x0000ff, bumpmap: textur, bumpscale: 1,0});
  Var Sphere = Ny Three.Mesh (SphereGometry, SphereMaterial);
  sfär.position.z = -5;
  sfär.position.x = 2;
  scene.add (sfär);
  },
);

10. Lägg till kontroller

Som en slutlig touch, ge användaren lite kontroll över scenen. För att lägga till förmågan att panorera runt finns det ett extra bibliotek som skickas med tre.js som gör det otroligt lätt att göra just det. Se till att extrahera ORBITCONTROLS.JS från Three.JS-paketet till din projektkatalog och inkludera det på din sida. Detta är ett av flera kontrollbibliotek som skickas med tre.js för att uppfylla vanliga stilar av kamerakontroll. 

 & lt; script src = "orbitcontrols.js" & gt; & lt; / script & gt;

11. Ansök på kamera

Nu är allt vi behöver göra att skapa en Tre.orbitcontrols objekt och applicera det på vår kamera. Biblioteket tar hand om resten för dig: Du behöver inte lyssna på klick, musrörelser, och så vidare. Du kanske också vill flytta dina objekt tillbaka till ursprungspunkten och kompensera kameran istället så att den kan panorera snyggt runt föremålen.

Med det är vi färdiga med vår introduktion. Du borde ha tre objekt med varierande strukturer av textur, lite dynamisk belysning och en användarstyrd kamera som ska spelas med. 

 Kamera.Position.Z = 10;
Var kontroller = nya tre.Orbitcontrols (kamera);

Denna artikel presenteras i utgåva 268 av webbdesignern, den kreativa webbdesignmagasinet - som erbjuder experthandledning, avancerade trender och gratis resurser. Prenumerera på webbdesignern nu.

Gillade detta? Pröva dessa:

  • En kodarens fullständiga guide till API
  • Hur smälter ett 3D-objekt med tre.js
  • Ström en blogg med WordPress API

Hur - Mest populära artiklar

Bygg en SEO-vänlig huvudkomponent för NEXTJS / reagera

Hur Jan 27, 2026

(Bildkredit: Negativt utrymme på peklar) Medan reagerar är ett kraftfullt JavaScript-bibliotek, inkluderar det inte..

Hur man skapar digitala plein-luftmålningar

Hur Jan 27, 2026

Få utomhus för att skapa stor konst (Bildkredit: Mike Mc Cain) Det finns så många bra sätt att lära..

Animera SVG med JavaScript

Hur Jan 27, 2026

Det finns så mycket som kan uppnås med information om webbläsaren med hjälp av CSS3 eller webbanimationerna API, i JavaScript..

Vrid 2D-illustrationer till 3D-konst

Hur Jan 27, 2026

Min resa till att göra 3d konst startade för några år sedan när min bror berättade för mig att försöka ..

Hur man väljer med Photoshops Lasso-verktyg

Hur Jan 27, 2026

Val är en av de viktigaste uppgifterna du lär dig att behärska Photoshop cc . Ett bra urval kommer att ge realism till en bild, för att inte tala om renhet. Men med så må..

4 Viktiga bildoptimeringstips

Hur Jan 27, 2026

Några lyckliga utvecklare och den här författaren hade möjlighet att Tech redigera Addy Osmani's New Image Optimization ebook..

Skapa stilramar i Photoshop

Hur Jan 27, 2026

Sida 1 av 2: Sida 1 Sida 1 Sida 2 ..

Förbered ditt arbete för 3D-utskrift: 8 Topptips

Hur Jan 27, 2026

3D-utskrift har blivit enormt populär. Om du vill börja skriva ut din egen 3d konst , det finns några saker att se upp för att få de bästa resultaten. Här visar jag dig ..

Kategorier