Við höfum getu í vöfrum okkar sem við hefðum ekki dreymt um 5 eða 10 árum síðan. Allt 3D leikur heima getur keyrt í vafranum og gagnvirka vefsíður geta verið meira innsýn í reynslu.
Með ákveðnum sýndarveruleikafyrirtæki sem verið er að kaupa af ákveðnu félagslegu fjölmiðlafyrirtæki er nú fullkominn tími til að byrja að vinna með 3D. Ótrúlega getum við nú búið til 3D með hreinu JavaScript, þar á meðal möskva og efni.
Auðvitað, jafnvel þótt það sé mögulegt, þarf það mikið af kóða, og það er þar sem Three.js kemur inn og gerir okkur kleift að byggja 3D umhverfi einfaldlega og með minna kóða.
Því miður, vegna þess að það er nýtt, er 3D ekki studd af öllum vöfrum. Við erum núna bundin við Chrome, Safari og Firefox.
Eins og tíminn rennur út, mun stuðningur við IE batna, en fyrir nú þarftu að falla fyrir Microsoft hollustu.
Það fyrsta sem við þurfum að gera er að fara yfir á three.js website og hlaða niður nýjustu útgáfunni af bókasafni.
Næst skaltu vísa í höfuðið á skjalinu þínu eins og þú myndir einhverja aðra JavaScript-skrá og við erum tilbúin til að fara.
Það fyrsta sem við þurfum að gera til að gera eitthvað með three.js er að búa til vettvang, myndavél og endurhleðslutæki. Byrjar með vettvang:
var scene = new THREE.Scene();Næstum þurfum við myndavél. Hugsaðu um þetta sem sjónarhorn sem notandinn er að leita frá. Three.js hefur í raun mikið úrval af valkostum hér, en fyrir sakir einfaldleika ætlum við að nota sjónarhorni myndavélarinnar:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Þessi aðferð tekur fjóra breytur: það fyrsta er sjónarhornið, annað er hlutföllið (ég mæli með að stöðva þetta alltaf á sjónarhóli notandans), nánasta klippiplanið og að lokum langt klippaplanið. Þessir síðustu tveir breytur ákvarða takmörk flutningsins, þannig að hlutir sem eru of nálægt eða of langt í burtu eru ekki dregnar, sem myndi eyða úrgangi.
Næstum þurfum við að setja upp WebGL Renderer:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Eins og þú sérð er það fyrsta sem hér er að búa til dæmi um flutninginn, þá stilla stærðina í sjónarhóli notandans, lokum við bættum því við á síðunni til að búa til autt striga fyrir okkur til að vinna með.
Svo langt, allt sem við höfum gert er sett upp stigið, nú ætlum við að búa til fyrsta 3D mótmæla okkar.
Fyrir þetta námskeið verður það einfalt hólkur:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Þessi aðferð tekur einnig 4 breytur: fyrsta er radíus efst á strokka, annað er radíus botns strokka, þriðja er hæð, síðasta er fjöldi hluta hæð.
Við höfum sett upp stærðfræði hlutarins, nú þurfum við að vefja það í efni svo að það lítur virkilega út eins og eitthvað á skjánum:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Þessi kóði bætir við einfalt efni fyrir hlutinn, í þessu tilviki bláum lit. Ég hef sett víraframleiðslu í sönn vegna þess að það mun sýna hlutinn betur þegar við fáum að hreyfa hana.
Að lokum þurfum við að bæta strokka okkar við vettvang okkar, eins og svo:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Það síðasta sem þarf að gera áður en við gerum svæðið er að stilla myndavélina:
camera.position.z = 20;Eins og þú sérð er JavaScript sem er mjög einfalt, það er vegna þess að Three.js er að takast á við öll flókin efni, svo við verðum ekki að.
Ef þú prófar skrána í vafra núna sérðu að ekkert er að gerast. Það er vegna þess að við höfum ekki sagt svæðið að gera. Til að gera vettvanginn við þurfum eftirfarandi kóða:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Ef þú skoðar skrána í vafranum þínum þá sérðu að það gerist örugglega með strokka, en það er ekki mjög spennandi.
Til að auka verulega gildi 3D þarftu að hefja hreyfingu, sem við getum gert með nokkrum litlum breytingum á flutningsgetu okkar:
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Ef þú prófar í vafranum þínum þá muntu sjá réttan líflegur 3D strokka.
Ef þú vilt sjá kynningu og spilaðu með kóðanum sem þú getur gerðu það hér.
Eins og þú sérð, skapaði þetta (að vísu mjög einfalt) vettvangur minna en tvær tugi línur af kóða, og það er mjög lítið stærðfræði sem tekur þátt.
Ef þú skoðar dæmi Á vefsíðunni three.js sjáum við nokkur ótrúlegt verk sem hefur verið gert.
Þetta ótrúlega bókasafn fyrir JavaScript hefur í raun lækkað innganga fyrir kóða 3D þannig að einhver sem getur skrifað grunn JavaScript getur tekið þátt.