Share
3D-grafik i webbläsaren har varit ett hett ämne helt sedan det först introducerades. Men om du skulle skapa dina appar med vanlig WebGL, skulle det ta åldrar. Det är just därför att några riktigt användbara bibliotek nyligen har kommit. Three.js är en av de mest populära, och i denna serie kommer jag visa dig hur bäst du kan använda den för att skapa fantastiska 3D-upplevelser för dina användare.
Innan vi börjar förväntar jag dig att du ska ha en grundläggande förståelse för 3D-rymden innan du börjar läsa den här handledningen, eftersom jag inte kommer att förklara saker som koordinater, vektorer etc.
Skapa först tre filer: index.html, main.js och style.css. Ladda nu Three.js (hela zip-filen med exempel och källa, eller ens JavaScript-fil, ditt val). Nu öppen index.html och sätt in den här koden:
Det är allt du behöver i den här filen. Bara en deklaration av skript och stilark. All magi kommer att hända i main.js, men innan vi får det behöver vi ett mer knep för att få appen att se bra ut. Öppna style.css och sätt in den här koden:
duk position: fast; topp: 0; vänster: 0;
Detta placerar duken i det övre vänstra hörnet, eftersom den som standard är kropp kommer att ha 8px av marginal. Nu kan vi fortsätta med JavaScript-koden.
Three.js använder begreppet en visningslista. Det betyder att alla objekt lagras i listan och dras sedan till skärmen.
Three.js använder begreppet en visningslista. Det betyder att alla objekt lagras i listan och dras sedan till skärmen. Här är det här en THREE.Scene objekt. Du måste lägga till något objekt som du vill dra på skärmen till scenen. Du kan ha så många scener som du vill, men en renderer kan bara rita en scen samtidigt (naturligtvis kan du byta scenen som visas).
Återgivaren drar helt enkelt allt från scenen till WebGL-kanfasen. Three.js stöder också att dra på SVG eller 2D Canvas, men vi kommer att fokusera på WebGL.
För att komma igång kan vi lagra fönstrets bredd och höjd i variabler, vi använder den senare:
var width = window.innerWidth; var height = window.innerHeight;
Definiera nu renderaren och scenen:
var renderer = nytt THREE.WebGLRenderer (antialias: true); renderer.setSize (bredd, höjd); document.body.appendChild (renderer.domElement); var scene = nytt THREE.Scene;
Den första raden definierar WebGL-renderaren. Du kan överföra renderarens alternativ i det första argumentet som en karta. Här ställer vi in antialias till sant, för att vi vill att objektets kanter är smidiga, inte skarpa.
Den andra raden sätter renderarens storlek i storleken på fönstret, och i den tredje lägger vi till renderarens duk element i dokumentet (du kan också göra det här med hjälp av ett bibliotek, som jQuery: $ ( 'Kropp'). Bifoga (renderer.domElement)).
Den sista definierar scenen, inga argument behövs.
Nu kan vi lägga till något som ska dras. Låt det vara en kub, eftersom det är det enklaste 3D-objektet. I Three.js heter de objekt som ritas på skärmen maskor. Varje nät måste ha sin egen geometri och material. Geometri är en uppsättning punkter som måste kopplas för att skapa objektet. Material är helt enkelt färgen (eller målningen, men det är inte ämnet för denna handledning) som kommer att täcka objektet. Så, låt oss skapa vår kub. Lyckligtvis för oss finns det några hjälparfunktioner i Three.js för att skapa primitiva (enkla former):
var cubeGeometry = nytt THREE.CubeGeometry (100, 100, 100); var cubeMaterial = nytt THREE.MeshLambertMaterial (color: 0x1ec876); var kub = nya THREE.Mesh (cubeGeometry, cubeMaterial); cube.rotation.y = Math.PI * 45/180; scene.add (kub);
Som du kan se skapar vi först geometrin. Argumenten definierar kubens storlek: bredden, höjden och djupet.
Därefter definierar vi kubens material. Det finns några materialtyper i Three.js, men den här gången använder vi THREE.MeshLambertMaterial, eftersom vi vill ha lite belysning senare (detta material använder Lambers algoritm för ljusberäkningar). Du kan överföra alternativen i det första argumentet som en karta, samma som med renderaren - det här är ganska mycket en regel för mer komplexa objekt i Three.js. Här använder vi bara färg, som passeras som ett hexadecimalt tal.
På den tredje raden skapar vi ett nät med hjälp av geometri och material som skapats tidigare. Därefter roterar vi kuben med 45 grader på Y-axeln, så att den ser bättre ut. Vi måste ändra grader till radianer, som hanteras av den ekvation du förmodligen kommer ihåg från din gymnasieklass: Math.PI * 45/180. Slutligen läggs kuben till scenen.
Nu kan du öppna index.html i din webbläsare för att se resultaten, men du kommer inte se något eftersom scenen ännu inte gjorts.
För att göra något måste vi först lägga till kameran på scenen, så återgivaren vet från vilken synpunkt den ska göra saker. Det finns några typer av kameror i Three.js, men du brukar bara använda THREE.PerspectiveCamera. Denna typ av kamera presenterar scenen som vi ser vår värld. Låt skapa en:
var kamera = ny THREE.PerspectiveCamera (45, bredd / höjd, 0,1, 10000);
"För att göra någonting måste vi först lägga till kameran på scenen, så återgivaren vet från vilken synpunkt den ska göra saker."
Att skapa kameran är lite mer komplicerad än resten av de saker vi hittills gjort. Det första argumentet definierar FOV (synfält), den vinkel som kan ses från var kameran är. En FOV på 45 grader ser naturligt ut. Därefter definierar vi kamerans förhållande. Detta är alltid bredden på renderaren dividerad med dess höjd, om du inte vill uppnå några specialeffekter. De två sista siffrorna definierar hur nära och hur långt objektet kan vara i kameran som ska dras.
Nu måste vi flytta kameran tillbaka och lite, eftersom alla objekt som skapats i Three.js har sin position i mitten av scenen (x: 0, y: 0, z: 0) som standard:
camera.position.y = 160; camera.position.z = 400;
De z koordinaten är positiv i betraktarens riktning, så objekt med en högre z positionen kommer att visas närmare dig (i det här fallet, sedan vi flyttade kameran, kommer alla föremål att visas längre bort från dig).
Nu kan vi lägga till kameran på scenen och göra den:
scene.add (kamera); renderer.render (scen, kamera);
Du lägger till kameran precis som du lagt till kuben. Nästa rad gör scenen med den här kameran. Nu kan du öppna webbläsaren och du bör se följande:
Du borde bara kunna se kubens topp. Det beror på att vi flyttade kameran upp och det är fortfarande ser direkt framför den. Detta kan åtgärdas genom att låta kameran veta vilken position den borde ha se. Lägg till den här raden efter att linjerna har ställt in kamerans position:
camera.lookAt (cube.position);
Det enda argumentet som passerat är en position där kameran kommer att se ut. Nu ser scenen bättre ut, men kuben är fortfarande svart, oavsett vilken färg du har satt när du skapar den:
Kuben är svart, eftersom det inte finns några ljus på scenen, så det är som ett helt svart rum. Du ser en vit bakgrund eftersom det inte finns något att dra ifrån kuben. För att undvika det kommer vi att använda en teknik som kallas skybox. I grund och botten lägger vi till en stor kub som kommer att visa bakgrunden till scenen (vanligtvis en del terräng om det är öppet utrymme). Så, låt oss skapa lådan. Denna kod ska gå före renderer.render ring upp:
var skyboxGeometry = nytt THREE.CubeGeometry (10000, 10000, 10000); var skyboxMaterial = nytt THREE.MeshBasicMaterial (färg: 0x000000, sida: THREE.BackSide); var skybox = nytt THREE.Mesh (skyboxGeometry, skyboxMaterial); scene.add (skybox);
Denna kod liknar den som skapar kuben. Men denna gång är geometrin mycket större. Vi har också använt THREE.MeshBasicMaterial eftersom vi inte behöver tända skyboxen. Observera också det ytterligare argumentet som skickats till materialet: sida: THREE.BackSide. Eftersom kuben kommer att visas från insidan måste vi ändra den sida som dras (vanligtvis drar Three.js endast ytterväggar).
Nu är den gjorda scenen helt svart. För att fixa det måste vi lägga ljus på scenen. Vi kommer använda THREE.PointLight, som avger ljuset som en glödlampa. Lägg till dessa rader efter skyboxen:
var pointLight = ny THREE.PointLight (0xffffff); PointLight.position.set (0, 300, 200); scene.add (pointLight);
Som du kan se har vi skapat punktljuset med vit färg, då ställer vi upp sin position för att vara upp och tillbaka lite för att tända framsidan och kubens topp. Slutligen läggs ljuset till scenen som något annat objekt. Öppna webbläsaren och du bör se en färgad, skuggad kub:
Men kuben är fortfarande ganska tråkig. Låt oss lägga till lite rörelse åt det.
Nu ska vi lägga till lite rörelse till scenen. Låter kuben rotera runt Y-axeln. Men först måste vi ändra sättet att vi gör scenen. Ett renderer.render samtal, gör det aktuella läget för scenen en gång. Så även om vi animerar kuben på något sätt kommer vi inte se det flytta. För att ändra det måste vi lägga till renderingsslingan i vår app. Detta kan uppnås med hjälp av renderAnimationFrame funktion som skapades speciellt för detta ändamål. Det stöds i de flesta större webbläsare, och för de som inte stöder det, kommer Three.js med sin egen polypfyll. Så, kan vi ändra det här:
renderer.render (scen, kamera);
till detta:
funktion render () renderer.render (scen, kamera); requestAnimationFrame (render); render ();
Faktum är att det inte finns någon slinga där, eftersom det skulle frysa webbläsaren. De requestAnimationFrame funktion beter sig lite som setTimeout, men det ringer funktionen gått så fort som webbläsaren är klar. Så, inget förändrats verkligen i den visade scenen och kuben rör sig fortfarande inte. Låt oss fixa det. Three.js kommer med THREE.Clock som kan användas för att uppnå en smidig animering av objekt. Först, initiera den före göra funktionsdefinition:
var klocka = nytt THREE.Clock;
Nu, varje gång du ringer clock.getDelta Det kommer att återgå tiden sedan det senaste samtalet, i millisekunder. Detta kan användas för att rotera kuben så här:
cube.rotation.y - = clock.getDelta ();
Lägg till den här raden mellan renderer.render och den requestAnimationFrame samtal i göra fungera. Det subtraherar helt enkelt tiden från kubens rotation på Y-axeln (kom ihåg att den befinner sig i radianer) för att rotera kuben medsols. Öppna nu webbläsaren och du bör se din kub rotera medurs ordentligt.
I den här delen av serien lärde du dig att förbereda scenen, lägga till föremål och ljus och hur man kan animera saker. Du kan experimentera med appen, lägga till fler eller olika objekt, ljus. Det är upp till dig. Nästa gång jag ska visa dig hur man använder texturer och hur man skapar några fina effekter med partiklar. Glöm inte att titta på dokumentationen om du har några problem.
Accentsconagua