We hebben mogelijkheden in onze browsers waar we 5 of 10 jaar geleden nog nooit van hadden gedroomd. Volledige 3D-gamewerelden kunnen in de browser worden uitgevoerd en interactieve websites kunnen meeslepende ervaringen opleveren.
Met een bepaald virtual reality-bedrijf dat wordt gekocht door een bepaald bedrijf voor sociale media, is dit het perfecte moment om met 3D te gaan werken. Verbazingwekkend genoeg kunnen we nu 3D maken met pure JavaScript, inclusief mazen en materialen.
Natuurlijk, hoewel het mogelijk is, vereist het een enorme hoeveelheid code, en dat is waar Three.js binnenkomt, waardoor we eenvoudig 3D-omgevingen kunnen bouwen met minder code.
Helaas wordt 3D niet door alle browsers ondersteund omdat het nieuw is. We zijn momenteel beperkt tot Chrome, Safari en Firefox.
Naarmate de tijd verstrijkt, zal de ondersteuning op IE verbeteren, maar voor nu heb je een terugval nodig voor Microsoft-toegewijden.
Het eerste wat we moeten doen is naar de website van three.js en download de nieuwste versie van de bibliotheek.
Bekijk het vervolgens in de kop van uw document, net als elk ander JavaScript-bestand, en we zijn klaar om te beginnen.
Het eerste dat we moeten doen om iets met three.js te renderen, is door een scène, een camera en een renderer te maken. Beginnen met een scène:
var scene = new THREE.Scene();Vervolgens hebben we een camera nodig. Zie dit als het gezichtspunt waar de gebruiker naar kijkt. Three.js heeft hier eigenlijk heel veel opties, maar voor de eenvoud gaan we een perspectiefcamera gebruiken:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Deze methode neemt vier parameters in beslag: de eerste is het gezichtsveld, de tweede is de beeldverhouding (ik zou aanraden dit altijd te baseren op het kijkvenster van de gebruiker), het dichtbijgelegen knipvlak en ten slotte het verre knipvlak. Deze laatste twee parameters bepalen de grenzen van rendering, zodat objecten die te dichtbij of te ver weg zijn niet worden getekend, wat bronnen verspilt.
Vervolgens moeten we de WebGL Renderer instellen:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Zoals u kunt zien, is het eerste wat u hier moet doen om een instantie van de renderer te maken en vervolgens de grootte ervan in het kijkvenster van de gebruiker in te stellen. Uiteindelijk voegen we deze toe aan de pagina om een leeg canvas te maken waarmee wij kunnen werken.
Tot nu toe is alles wat we hebben gedaan de weg geëffend, nu gaan we ons eerste 3D-object maken.
Voor deze zelfstudie wordt het een eenvoudige cilinder:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Deze methode omvat ook 4 parameters: de eerste is de straal van de bovenkant van de cilinder, de tweede is de straal van de bodem van de cilinder, de derde is de hoogte, de laatste is het aantal hoogtesegmenten.
We hebben de wiskunde van het object ingesteld, nu moeten we het in een materiaal verwerken, zodat het er op het scherm uitziet:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Deze code voegt een eenvoudig materiaal voor het object toe, in dit geval een blauwe kleur. Ik heb wireframe ingesteld op true, omdat het object duidelijker wordt weergegeven als we het kunnen animeren.
Ten slotte moeten we onze cilinder aan onze scène toevoegen, zoals zo:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Het laatste wat u moet doen voordat we de scène renderen, is om de camerapositie in te stellen:
camera.position.z = 20;Zoals je kunt zien, is het betrokken JavaScript extreem eenvoudig, omdat Three.js te maken heeft met alle ingewikkelde dingen, dus dat hoeven we niet te doen.
Als je het bestand nu in een browser test, zie je dat er niets aan de hand is. Dat komt omdat we de scène niet hebben verteld om te renderen. Om de scène weer te geven, hebben we de volgende code nodig:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Als je nu naar het bestand in je browser kijkt, zie je dat het inderdaad een cilinder weergeeft, maar het is niet erg spannend.
Om de waarde van 3D echt te vergroten, moet je beginnen met animeren, wat we kunnen doen met een paar kleine veranderingen in onze renderfunctie :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Als je nu in je browser test, zie je een goed bewegende 3D-cilinder.
Als u een demo wilt zien en wilt spelen met de code die u kunt gebruiken doe het hier.
Zoals u kunt zien, heeft het maken van deze (inderdaad zeer eenvoudige) scène minder dan twee dozijn regels code in beslag genomen, en er is heel weinig wiskunde bij betrokken.
Als je de voorbeelden op de website van three.js zult u ongelooflijk veel werk zien dat is gedaan.
Deze geweldige bibliotheek voor JavaScript heeft het instapniveau voor het coderen van 3D echt verlaagd, zodat iedereen die JavaScript kan schrijven, erbij betrokken kan raken.
Uitgelichte afbeelding / thumbnail, 3D-afbeelding via Shutterstock.