V našich prohlížečích máme schopnosti, o kterých bychom neměli sen o 5 nebo 10 letech. Celá 3D světelná hříčka může běžet v prohlížeči a interaktivní webové stránky mohou být více ponořující zážitky.
S určitou firmou zabývající se virtuální realitou, kterou koupila určitá společnost sociálních médií, je nyní ten správný čas začít pracovat s 3D. Je překvapivé, že nyní můžeme vytvořit 3D s čistým javascriptem, včetně sítí a materiálů.
Samozřejmě, i když je to možné, vyžaduje velké množství kódu a tam přijdou Three.js, což nám umožňuje vytvářet 3D prostředí jednoduše as méně kódem.
Bohužel, protože je to nové, 3D není podporováno všemi prohlížeči. Momentálně jsme omezeni na Chrome, Safari a Firefox.
V průběhu času se podpora IE zlepší, ale prozatím budete potřebovat záchranu pro oddaných společnosti Microsoft.
První věc, kterou musíme udělat, je zamířit na three.js webových stránkách a stáhněte nejnovější verzi knihovny.
Dále jej odkazujte v hlavičce vašeho dokumentu, jako byste měli nějaký jiný soubor JavaScript a my jsme připraveni jít.
První věc, kterou musíme udělat, je vykreslit něco, co má tři.js, je vytvořit scénu, fotoaparát a renderer. Počínaje scénou:
var scene = new THREE.Scene();Potřebujeme fotoaparát. Přemýšlejte o tom jako o pohledu, ze kterého se uživatel dívá. Three.js vlastně má spoustu možností, ale pro jednoduchost budeme používat perspektivní kameru:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Tato metoda má čtyři parametry: první je zorné pole, druhá je poměr stran (doporučuji vždy založit to na výřezu uživatele), blízká ořezová rovina a nakonec vzdálená ořezová rovina. Tyto poslední dva parametry určují hranice vykreslování, takže objekty, které jsou příliš blízko nebo příliš vzdálené, nejsou nakresleny, což by způsobilo ztrátu zdrojů.
Dále musíme nastavit nástroj WebGL Renderer:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Jak vidíte, první věcí je vytvořit instanci vykreslování, poté nastavit její velikost na výřez uživatele a nakonec jej přidáme na stránku, abychom vytvořili prázdné plátno, s kterým bychom mohli pracovat.
Zatím jsme udělali jen to, co jsme udělali, a teď vytvoříme náš první 3D objekt.
Pro tento tutoriál to bude jednoduchý válec:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Tato metoda má také 4 parametry: první je poloměr horní části válce, druhý poloměr dna válce, třetí je výška, poslední je počet výškových segmentů.
Nastavili jsme matematiku objektu, nyní ho musíme zabalit do materiálu tak, aby to vypadalo jako něco na obrazovce:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Tento kód přidává pro objekt jednoduchý materiál, v tomto případě modrou barvu. Nastavil jsem drátu na hodnotu true, protože objeví objekt jasněji, jakmile jej budeme animovat.
Konečně musíme přidat náš válec do naší scény, například:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Poslední věc, kterou uděláme, než uděláme scénu, je nastavení polohy fotoaparátu:
camera.position.z = 20;Jak můžete vidět, zapojený jazyk JavaScript je nesmírně jednoduchý, je to proto, že Three.js se zabývá všemi komplikovanými věcmi, takže nemusíme.
Pokud testujete soubor v prohlížeči, uvidíte, že se nic neděje. To proto, že jsme scénu neřekli. K vykreslení scény potřebujeme následující kód:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Pokud se nyní podíváte na soubor ve vašem prohlížeči, uvidíte, že to skutečně činí válec, ale není to moc vzrušující.
Abyste skutečně zvýšili hodnotu 3D, musíte začít animovat, což můžeme udělat s několika malými změnami naší funkce renderu :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Pokud testujete ve svém prohlížeči, uvidíte správně animovaný 3D válec.
Chcete-li vidět demo a hrát si s kódem můžete udělej to tady.
Jak můžete vidět, vytvoření této (jistě velmi jednoduché) scény trvalo méně než dva tucty řádků kódu a je zapotřebí jen velmi málo matematiky.
Pokud se rozhodnete příklady na webové stránce three.js uvidíte neuvěřitelnou práci, kterou jste udělali.
Tato úžasná knihovna pro jazyk JavaScript opravdu snížila vstupní úroveň pro kódování 3D, takže se může zapojit každý, kdo může napsat základní JavaScript.