Share
De complexiteit van het Web verschuift dagelijks en zijn mogelijkheden groeien net zo snel; vooral met 3D-rendering. WebGL (Web Graphics Library) is een JavaScript-API voor het weergeven van interactieve 3D- en 2D-afbeeldingen. Three.js van Ricardo Cabello is een bibliotheek die bovenop WebGL is gebouwd, zodat auteursauthenticatie compatibel is in verschillende browsers.
Three.js is voor WebGL wat jQuery is voor JavaScript, met declaratieve syntaxis geliefd bij zo veel, en het wegnemen van de hoofdpijn voor 3D in de browser. Laten we het bekijken, een algemeen overzicht van de syntaxis krijgen en bekijken hoe u aan de slag kunt als u nog niet bekend bent met 3D.
Bekijk de volgende demo over CodePen; gebruik je muiscursor om het model te slepen, zoom in en uit met je muiswiel.
We gaan voor het gemak in CodePen werken; begin door te linken naar Three.js (CDN 126Kb) via je JS-tabblad.
We beginnen met het maken van een scène, net zoals je begint met een canvas in Photoshop. Een scène wordt gedefinieerd met een variabele voordat een nieuwe code wordt geschreven. Voeg dus in je JS-venster toe:
var scene = new THREE.Scene ();
Met de gordijnen op en klaar voor onze prestaties hebben we een manier nodig om onze awesomeness-tijd te bekijken om een camera te introduceren. Er is een reeks camera's waarmee Three.js wordt gebundeld, zoals PerspectiveCamera, stereocamera, OrthographicCamera en CubeCamera. Voor onze doeleinden gebruiken we de PerspectiveCamera zoals het is ontworpen om de manier na te bootsen die het menselijk oog ziet. Net zoals we een scène met een variabele definiëren, doen we hetzelfde om een camera te definiëren:
var camera = nieuw THREE.PerspectiveCamera ();
Onze PerspectiveCamera accepteert vier argumenten: fov, aspect, in de buurt en ver.
Accentsconagua
fov (gezichtsveld) is hoeveel je kunt zien rond het midden van de camera. Denk in termen van een groothoeklens op een camera versus een standaardlens. aspect is de verhouding van de fov, of met andere woorden de breedte tot hoogte van een scherm (bijvoorbeeld 4: 5, 16: 9). in de buurt en ver, zijn de vliegtuigen van een solide. Samen bepalen ze of een object wordt gerenderd op basis van de afstand tot de camera. in de buurt is het dichtstbijzijnde object of deel van een object dat voor de camera kan zijn terwijl het nog steeds wordt weergegeven, ver is het verste dat een voorwerp van de camera kan zijn en nog steeds kan worden weergegeven. Samen bepalen deze de kijkkegel van de camera.
Frustum bekijkenHier is een voorbeeld van de PerspectiveCamera argumenten:
var camera = nieuw THREE.PerspectiveCamera (75, window.innerWidth / window.innerHeight, 0.1, 1000);
Het is niet belangrijk om elke waarde op dit punt te begrijpen, behalve om je bewust te zijn van de waarden die dat zijn kan worden doorgegeven. We moeten doorgaan met het instellen van de positie van de camera.
camera.position.set (x, y, z);
Deze lijn is de lokale positie van het object. Hiermee stelt u de X, y en z-coördinaten van de vector. Zonder dit zal de camera niets zien.
Het volgende belangrijke ingrediënt in ons recept is om een WebGLRenderer te maken. Dit is het stuk dat verantwoordelijk is voor de magie van het weergeven van je creatie.
var renderer = nieuw THREE.WebGLRenderer ();
De WebGLRenderer kan ook eigenschappen en waarden accepteren die als object zijn doorgegeven.
var renderer = nieuw THREE.WebGLRenderer (alpha: true // verwijder canvas 'bg color);
Er zijn er nogal wat eigendoms-waarde paren die kunnen worden gebruikt-ze worden vermeld in de documenten als u besluit dieper te duiken op een later tijdstip (iets dat ik sterk aanmoedig).
Met de gedefinieerde renderer kunnen we methoden instellen om onze creatie verder aan te passen, zoals setSize; een methode die je in bijna elk Three.js-project zult gebruiken.
/ / Maak scène renderer de grootte van het scherm renderer.setSize (window.innerWidth, window.innerHeight);
Er zijn veel meer methoden die u kunt gebruiken, maar voor onze doeleinden houden we ons aan setSize ().
Nu de gewenste grootte is gedefinieerd, hebben we een manier nodig om deze aan de DOM te koppelen.
document.body.appendChild (renderer.domElement);
Deze DOMElement eigenschap is waar de renderer zijn uitvoer haalt en in de vorm van een canvas element. Hoewel ik gebruik document.body je zou het kunnen toevoegen of toevoegen canvas element waar je maar wilt. Het is echt aan jou waar je de plaatsing wilt, op basis van je specifieke projectbehoeften.
Voor de volgende stap moeten we een object maken, omdat alles wat we tot nu toe hebben gedaan een scène, een camera en een renderer declareert. Laten we voor demonstratiedoeleinden een mobiele telefoon pakken in 3D Warehouse, zodat we een productvoorbeeld kunnen maken voor mensen die online een iPhone kopen.
iPhone 6+ door Jeremie PDoorgaans kunt u toepassingen zoals SketchUp of zelfs Blender gebruiken om uw 3D-objecten te tekenen, maar er is een hoge leercurve voor 3D-tekentoepassingen - een curve die zeker buiten de reikwijdte van dit artikel valt.
Om ons 3D-object in de scène in te voegen, moeten we het gebruiken ColladaLoader. Er moet worden vermeld dat elke afbeelding die u wilt gebruiken in het algemeen minder dan 1 - 2 MB groot moet zijn en een Collada-bestand moet zijn om te gebruiken met Three.js: dit zijn bestanden die eindigen met de .dae uitbreiding. Als u een Collada-bestand opent, ziet u dat het daadwerkelijk in XML is geschreven.
We beginnen met het definiëren van de ColladaLoader een variabele gebruiken en de methode samen met een andere variabele definiëren om de 3D-afbeelding voor referentie op een later punt weer te geven.
var dae, // graphic loader = new THREE.ColladaLoader (); // loader
Dit is een goed begin, maar we hebben nog meer werk te doen voordat we de telefoon kunnen weergeven. Laten we een functie maken die precies dat doet:
functie loadCollada (collada) dae = collada.scene; scene.add (dae);
Voor de volgende stap gebruiken we de laden methode, geef de URL van ons Collada-bestand door en bel onze functie op naam als het tweede argument:
loader.load ('http://myurl.com/file/iphone6.dae', loadCollada);Als u meer wilt weten over de ColladaLoader je kunt de broncode doornemen op GitHub.
Nu onze lader en grafiek eindelijk op hun plaats zijn, is er nog een laatste stap; we moeten een zogenaamde "render-lus" maken. Dit komt omdat we nog niet echt iets renderen.
Deze "render-loop" zorgt ervoor dat de renderer de scène zestig keer per seconde tekent. De volgende functie zal onze creatie tot leven brengen (het beste deel van het hele proces).
function renderPhone () requestAnimationFrame (renderPhone); renderer.render (scène, camera); renderPhone ();
requestAnimationFrame heeft een aantal voordelen. Het belangrijkste is dat het pauzeert wanneer de gebruiker naar een ander browsertabblad navigeert en uiteindelijk zijn verwerkingskracht en levensduur van de batterij niet verspilt.
Het resultaat van al dit werk is een schattige weergave van een 3D-iPhone die je kunt draaien, draaien en in- en uitzoomen:
Er zijn nog een paar stukjes in de uiteindelijke creatie geweest, dus ik moedig je aan om dieper in het JavaScript-paneel van de demo te duiken.
Bijvoorbeeld; Verlichting (Omgevingslicht, HemisphereLight, PointLight), TrackballControls, AxisHelper en een Window Resizing-gebeurtenis. Sommige van deze genoemde items bevatten geen documentatie zoals TrackballControls, maar je kunt alle eigenschappen vinden die beschikbaar zijn in het kern JS-bestand op GitHub. Er zijn andere echt coole controls die je kunt gebruiken, die ook op GitHub staan.
Soms heb je een beetje inspiratie nodig om het brein in een hoog tempo ideeën te laten schieten. Hieronder volgen enkele van mijn favoriete demo's die Three.js gebruiken om dromen werkelijkheid te laten worden.
https://paperplanes.world
https://throughthedark.withgoogle.com (pak je koptelefoon)
http://carvisualizer.plus360degrees.com/threejsRachel Smith schreef een geweldig artikel over CodePen over WebGL en ik raad iedereen aan om het te lezen als je vrije tijd hebt. De tutorial is gevuld met eenvoudige taal en is een grondige uitleg van Three.js over scene, geometrie, belichting, materialen en animatie die ik in dit korte bericht zeker niet kon behandelen.
U kunt ook genieten van:
Dit artikel zou niet mogelijk zijn geweest zonder de genereuze hulp van de Animation at Work Slack Community, dus ik wil (in willekeurige volgorde) Stephen Shaw, Jeff Ayer, Louis Hoebregts, Neil Pullman, Eli Fitch en Chris Johnson bedanken.
