Vi har funktioner i våra webbläsare som vi inte skulle ha drömt om för 5 eller 10 år sedan. Hela 3D-spelvärlden kan köras i webbläsaren och interaktiva webbplatser kan vara mer uppslukande upplevelser.
Med ett visst verkligt virtuellt företag som köps av ett visst socialt medieföretag är nu den perfekta tiden att börja arbeta med 3D. Förvånansvärt kan vi nu skapa 3D med ren JavaScript, inklusive maskor och material.
Självklart, även om det är möjligt, kräver det en stor mängd kod, och det är där Three.js kommer in, så att vi kan bygga 3D-miljöer helt enkelt och med mindre kod.
Tyvärr, för att det är nytt, stöds 3D inte av alla webbläsare. Vi är för närvarande begränsade till Chrome, Safari och Firefox.
När tiden går, kommer supporten på IE att förbättras, men för nu behöver du en återgång för Microsoft-hängiven.
Det första vi behöver göra är att gå över till three.js webbplats och ladda ner den senaste versionen av biblioteket.
Därefter hänvisa det till huvudet på ditt dokument som du skulle ha någon annan JavaScript-fil, och vi är redo att gå.
Det första vi behöver göra för att göra någonting med three.js är att skapa en scen, en kamera och en renderer. Börjar med en scen:
var scene = new THREE.Scene();Därefter behöver vi en kamera. Tänk på detta som den synpunkt som användaren tittar på. Three.js har faktiskt många alternativ här, men för enkelhetens skull kommer vi att använda en perspektivkamera:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Den här metoden tar fyra parametrar: den första är synfältet, den andra är bildförhållandet (jag rekommenderar att du alltid baserar detta på användarens visningsport), det närmaste klippplanet och äntligen det långt klippande planet. Dessa sista två parametrar bestämmer gränserna för rendering, så att objekt som är för nära eller för långt borta inte ritas, vilket skulle slösa bort resurser.
Därefter måste vi konfigurera WebGL Renderer:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Som du kan se är det första här att skapa en förekomst av renderaren, sätt sedan dess storlek till användarens visningsport, till sist lägger vi till den på sidan för att skapa en tom duk för att vi ska kunna arbeta med.
Hittills har allt vi gjort gjort på scenen, nu ska vi skapa vårt första 3D-objekt.
För denna handledning kommer det att bli en enkel cylinder:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Den här metoden tar också 4 parametrar: den första är radien av cylinderns topp, den andra är raden på cylinderns botten, den tredje är höjden, den sista är antalet höjdsegment.
Vi har satt upp objektets matematik, nu behöver vi lägga den i ett material så att det faktiskt ser ut som något på skärmen:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Denna kod lägger till ett enkelt material för objektet, i det här fallet en blå färg. Jag har satt wireframe till sann eftersom det kommer att visa objektet tydligare när vi kommer att animera den.
Slutligen måste vi lägga till vår cylinder till vår scen, som så:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Det sista att göra innan vi gör scenen är att ställa in kamerans position:
camera.position.z = 20;Som du kan se är JavaScript involverat extremt enkelt, det beror på att Three.js hanterar alla komplicerade saker, så vi behöver inte.
Om du testar filen i en webbläsare så ser du att inget händer. Det beror på att vi inte har berättat scenen att göra. För att göra scenen behöver vi följande kod:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Om du nu tittar på filen i din webbläsare så ser du att det verkligen gör en cylinder, men det är inte så spännande.
För att verkligen förbättra värdet av 3D måste du börja animera, vilket vi kan göra med några små förändringar i vår renderfunktion :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Om du testar i din webbläsare ser du en riktigt animerande 3D-cylinder.
Om du vill se en demo och spela med koden du kan gör så här.
Som du kan se skapade denna (visserligen mycket enkel) scen mindre än två dussin rader kod, och det är mycket lite matematik involverat.
Om du kolla in exempel På tre.js-webbplatsen ser du några fantastiska jobb som har gjorts.
Det här fantastiska biblioteket för JavaScript har verkligen sänkt ingångsnivån för kodning 3D till den punkt som alla som kan skriva grundläggande JavaScript kan involvera.