Kom godt i gang med Webgl ved hjælp af Three.js

Feb 2, 2026
hvordan
Web developer creating 3D shape graphics

WebGl. , som er bredt støttet på alle moderne browsere, gør det muligt for dig at arbejde med hardware-accelereret 3D-grafik i JavaScript. , åbner et stort udvalg af muligheder for browserbaserede apps og spil - bare tjek disse 20 fantastiske eksempler på Webgl i aktion , for bevis.

WebGL selv er ret lavt niveau, og det er usandsynligt, at du vil arbejde med det i sin vanilleform. Der er en række biblioteker og endda spilmotorer til rådighed for at levere højere niveau funktionalitet.

I denne tutorial skal jeg vise dig Sådan laver du en app eller websted, der bruger Webgl i kombination med tre.js. , som er et gratis open source bibliotek, der giver abstraktion af Webgl.

01. Få tre.js.

Du bliver nødt til at starte med at få fat i tre.js. . Når du har den nyeste bygning, skal du placere tre.js i din projektmappe. Vi tilføjer derefter det som et script til vores side som et andet JavaScript-bibliotek. Vi placerer vores egen kode i en separat JavaScript-fil. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; hoved & gt;
  & lt; meta charset = utf-8 & gt;
  & lt; titel & gt; Kom godt i gang med tre.js & lt; / titel & gt;
  & lt; / Head & GT;
  & lt; body style = "margin: 0;" & gt;
  & lt; script src = "three.js" & gt; & lt; / script & gt;
  & lt; script src = "demo.js" & gt; & lt; / script & gt;
  & lt; / body & gt;
& lt; / HTML & GT;

02. Sæt scenen

Vi har brug for tre ting at komme i gang med WebGL: en scene, et kamera og en renderer. En scene er, hvor vi placerer objekter, der skal vises af tre.js. Et kamera er det synspunkt, hvorfra vi vil se dem. Den renderer bringer de to sammen og trækker skærmen i overensstemmelse hermed. Når vi har disse oprettet, tilføjer vi rendereren til dokumentet. 

 Var bredde = vindue.innerwidth;
Var Højde = Vinduet.innerheight;
Var Viewangle = 45;
Var nærclipping = 0,1;
var farclipping = 9999;
var scene = ny tre.Scene ();
VAR kamera = ny tre.Perspectivecamera (viewangle, bredde / højde, nærclipping, farclipping);
var renderer = ny tre.webgrenderer ();
renderer.setsize (bredde, højde);
dokument.body.appendchild (renderer.domelement);

03. Opret en loop

Dernæst skal vi skabe en loop til faktisk at gøre vores scene. Vi gør dette ved hjælp af renderer.render () funktion, men nøgleparten er at rekursivt bruge RequestanimationFrame () , som er en indbygget funktion, der gør det muligt for browseren at anmode om en anden ramme, når den er klar til at tegne en. Ved brug af RequestanimationFrame () er lettere og resulterer i glattere animation end at forsøge at tegne rammer selv. 

 Funktion ANIMATE () {
  requestanimationframe (animere);
  renderer.render (scene, kamera);
}
animere ();

04. Opret grundlæggende objekter

Nu kan vi begynde at tilføje nogle genstande til vores scene. Vi kan gøre dette ved at oprette mesh genstande og tilføje dem til det. Et net er sammensat af geometri (formen af ​​objektet) og et materiale (farven eller teksturen til at male den). Vi opretter nogle grundlæggende objekter ved at definere tre forskellige geometrier og tildele forskellige farvematerialer til dem. 

 var cubegeometri = ny tre.boxgeometri (1, 1, 1);
var cubemateriale = ny tre.meshlambertmaterial ({farve: 0xff0000});
Var Cube = Ny Tre.Mesh (Cubeegeometri, Cubeaterial);
Var COUTEGEOMETRY = NEW TREE.CONEGEOMETRY (0,5, 1, 4);
var conemateriale = ny tre.meshlambertmaterial ({farve: 0x00ff00});
Var Cone = Nye tre.Mesh (ConteGeometry, Connemateriale);
var spfestometri = ny tre.spheregeometri (0,5, 8, 8);
var spheremateriale = ny tre.meshlambertmaterial ({farve: 0x0000ff});
Var sfære = ny tre.mesh (sumgingometri, spfæremateriale);

05. Angiv en position

Som standard tilføjes objekter på oprindelsen (x = 0, y = 0, z = 0) af scenen, som også er hvor vores kamera er, så vi skal også angive en position for dem. Vi er så klar til at tilføje maskerne til vores scene, hvilket betyder, at de automatisk gengives i animere () loop. 

 Cube.position.x = -2
cube.position.z = -5;
cone.position.z = -5;
sfære.position.z = -5;
sfære.position.x = 2;
cube.position.z = -5;
scene.add (kube);
scene.add (kegle);
scene.add (kugle);

06. Tilføj en lyskilde

Hvis du ser din side nu, finder du ting ser lidt fladt ud. Der er ingen belysning anvendt på objekterne, så de er solide primære farver og ser todimensionale. For at rette dette skal vi skifte fra Meshbasicmaterial. til et materiale, der understøtter belysning; Vi bruger Meshlambertmaterial. . Vi skal også tilføje en lyskilde til scenen. 

 Var Light = New Three.Pointlight (0xFFFFFF);
lys.position.x = 0;
lys.position.y = 10;
lys.position.z = 0;
scene.add (lys);

07. Flyt kilden

Nu kommer vi derhen! Du bør se, hvad der er helt åbenbart tredimensionale objekter på din side. Hvad vi endnu ikke har gjort, tages fuld fordel af animere () fungere. Lad os lave et par ændringer for at få vores lyskilde flytte rundt i en cirkulær bevægelse over objekterne. 

 Var Lightangle = 0;
funktion animate () {
  Lightangle + = 5;
  Hvis (Lightangle & GT; 360) {Lightangle = 0;};
  light.position.x = 5 * math.cos (Lightangle * math.pi / 180);
  lys.position.z = 5 * math.sin (lysangel * math.pi / 180);
  requestanimationframe (animere);
  renderer.render (scene, kamera); }

08. Tilføj tekstur.

I praksis vil vi sandsynligvis ikke have vores genstande til at være flade farver. Det ville være mere typisk at anvende nogle teksturer til dem fra en fil. Vi kan gøre dette ved hjælp af Tre.textureloader () . Lad os ændre, hvordan vores kegleobjekt er oprettet for at udnytte en tekstur, vi har lagt fra en fil. Funktionen kaldes, når filen er indlæst.

  • Hvor finder man gratis teksturer til 3D-projekter 
 Var textureloader = ny tre.textureloader ();
textureloader.load ("./ græs_texture.jpg", tekstur = & gt; {
  Var COUTEGEOMETRY = NEW TREE.CONEGEOMETRY (0,5, 1, 4);
  Var Conemateriale = Ny Tre.MeshLambertmaterial ({Map: Texture});
  Var Cone = Nye tre.Mesh (ConteGeometry, Connemateriale);
  cone.position.z = -5;
  scene.add (kegle);
  },
);

09. Gør det naturligt

Ting ser bedre ud, men noget er stadig ikke helt naturligt. Teksturen ser meget flad ud og reagerer ikke på belysningen. Vi kan løse dette ved brug af Bump Mapping, som gør det muligt for os at bruge lyse og mørke dele af et billede til at simulere teksturering på overfladen af ​​et objekt. Lad os prøve det ud med en anden tekstur på kuglen. Vi skifter materialet til Mhphongmaterial. , som giver os mulighed for at angive en bumpmap. attribut. 

 Var textureloader = ny tre.textureloader ();
textureloader.load ("./ bump_map.jpg", tekstur = & gt; {
  var spfestometri = ny tre.spheregeometri (0,5, 8, 8);
  var sfæremateriale = ny tre.mhphongmaterial ({farve: 0x0000ff, bumpmap: tekstur, bumpscale: 1.0});
  Var sfære = ny tre.mesh (sumgingometri, spfæremateriale);
  sfære.position.z = -5;
  sfære.position.x = 2;
  scene.add (kugle);
  },
);

10. Tilføj kontrol

Som en endelig berøring, giv brugeren en lille kontrol over scenen. For at tilføje evnen til at panorere rundt, er der et ekstra bibliotek, der sender med tre.js, der gør det utroligt nemt at gøre netop det. Sørg for at udtrække orbitcontrols.js fra tre.js-pakken til din projektmappe og inkludere det på din side. Dette er en af ​​flere kontrolbiblioteker, der skibes med tre.js for at opfylde fælles stilarter af kameramikring. 

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

11. Anvend på kameraet

Nu er alt, hvad vi skal gøre, at skabe en Tre.orbitcontrols. objekt og anvende det på vores kamera. Biblioteket vil tage sig af resten for dig: Du behøver ikke at lytte til klik, musbevægelser og så videre. Du vil måske også flytte dine objekter tilbage til oprindelsespunktet, og kompensere kameraet i stedet for, at det kan panoreres pænt omkring objekterne.

Med det er vi færdige med vores introduktion. Du skal have tre genstande med varierende stilarter af tekstur, nogle dynamiske belysning og et brugerstyret kamera til at spille med. 

 kamera. Position.z = 10;
VAR Controls = nye tre.orbitcontrols (kamera);

Denne artikel fremhævet i udstedelse 268 af Web Designer, Creative Web Design Magazine - tilbyder ekspert tutorials, banebrydende trends og gratis ressourcer. Abonner på webdesigner nu.

Kunne lide dette? Prøv disse:

  • En koder er komplette vejledning til API'er
  • Sådan smelter du et 3D-objekt med tre.js
  • Strøm en blog ved hjælp af WordPress API

hvordan - Mest populære artikler

Sådan rengøres pensler: Den endelige vejledning

hvordan Feb 2, 2026

(Billedkredit: sonny flanaghan) At lære at rengøre malingbrushes korrekt er en vigtig færdighed. Som det siger sig..

Sådan laver du en foto collage i Photoshop CC

hvordan Feb 2, 2026

At lære at lave en fotokollage i Photoshop vil komme til nytte i mange forskellige situationer. Individuelle fotos fanger enkeltmomenter i tide, men påberåber en collage, og du vil kunne i..

Byg en stemme kontrolleret UI

hvordan Feb 2, 2026

Vi har set mange nye API'er, der tilføjes på internettet i løbet af de sidste par år, der virkelig har gjort det muligt for webindholdet at have den samme slags funktionalitet, så mange ..

Sådan implementeres lys eller mørke tilstande i CSS

hvordan Feb 2, 2026

CSS-specifikationen er evigt udviklet. Processen til implementering af nye funktioner i CSS er kompliceret, men den forenklede ve..

Opret GUD-stråler i V-ray

hvordan Feb 2, 2026

I virkelige fotografering er lysstråler på deres mest synlige, når de har en overflade for at hoppe ud, såsom støv, pollen e..

14 Zbrush Workflow Tips

hvordan Feb 2, 2026

Alle kunstnere har deres egen unikke arbejdsgang, når de skaber 3D-kunst i Zbbrush. Denne workflow kan betyde en masse teknikker..

Sådan oprettes manga med en vild West Twist

hvordan Feb 2, 2026

Westerns er noget, jeg altid har elsket. I denne vejledning opretter jeg et billede i den typiske manga-stil, men ligger i en vil..

Brug partikler til at oprette en 3D-splash

hvordan Feb 2, 2026

Denne vejledning vil se på, hvordan du kan lave en flydende stænk eller kroneffekt, og kan bruges til at skubbe ud af vand, mæ..

Kategorier