Meillä on kykyjä selaimissamme, ettemme olisi unelmoinut 5 tai 10 vuotta sitten. Koko 3D-pelimaailma voi toimia selaimessa ja vuorovaikutteiset sivustot voivat olla omaleimpia kokemuksia.

Tietyllä virtuaalitodellisuusyrityksellä on tietty sosiaalisen median yritys, ja nyt se on täydellinen aika aloittaa 3D-työskentely. Hämmästyttävää, voimme nyt luoda 3D-mallin, jossa on puhdas JavaScript, kuten silmät ja materiaalit.

Tietenkin, vaikka se on mahdollista, se vaatii valtavan määrän koodia, ja siellä tulee Three.js, jonka avulla voimme rakentaa 3D-ympäristöjä yksinkertaisesti ja vähemmän koodilla.

Selaimen yhteensopivuus

Valitettavasti, koska se on uusi, kaikki selaimet eivät tue 3D: tä. Tällä hetkellä meillä on vain Chrome, Safari ja Firefox.

Ajan myötä IE: n tuki paranee, mutta nyt tarvitset takuusumman Microsoftin harrastajille.

Päästä alkuun

Ensimmäinen asia, mitä meidän on tehtävä, on pään yli kolmella verkkosivustolla ja lataa kirjaston uusin versio.

Seuraavaksi viittaa se asiakirjan päähän, kuten jos haluat jonkin muun JavaScript-tiedoston, ja olemme valmiita menemään.

Ensimmäisen kohtauksen luominen

Ensimmäinen asia, mitä meidän on tehtävä, tehdä jotain kolmella.js on luoda kohtaus, kamera ja rendereri. Alkaen kohtaus:

var scene = new THREE.Scene();

Seuraavaksi tarvitsemme kameran. Ajattele tätä näkökulmasta, jonka käyttäjä etsii. Kolmella.jsillä on tosiasiassa paljon vaihtoehtoja, mutta yksinkertaisuuden tähden käytämme perspektiivikameraa:

var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);

Tämä menetelmä vaatii neljä parametria: ensimmäinen on näkökenttä, toinen on kuvasuhde (suosittelen aina perustelemaan tämän käyttäjän näkymäporttiin), lähellä leikkauslinjaa ja viimeiseksi paljon leikkaavaa tasoa. Nämä kaksi viimeistä parametria määrittävät renderoinnin rajat niin, että liian lähellä tai liian kaukana olevia esineitä ei piirretä, mikä tuhlaisi resursseja.

Seuraavaksi on luotava WebGL Renderer:

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );

Kuten näette, ensimmäinen asia tässä on luoda esitys renderistölle, sitten asettaa sen koko käyttäjän näkymään, lopulta lisäämme sen sivulle luoda tyhjä kangas, jotta voimme työskennellä.

Tiettyjen esineiden lisääminen

Toistaiseksi olemme laatineet vaiheet, nyt luomme ensimmäisen 3D-objektimme.

Tätä tutoriaalia varten se on yksinkertainen sylinteri:

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );

Tämä menetelmä vie myös 4 parametria: ensimmäinen on sylinterin yläosan säde, toinen sylinterin pohjan säde, kolmas korkeus, viimeinen korkeusermeiden määrä.

Olemme määrittäneet kohteen matematiikan, nyt meidän on käärittävä se materiaaliin, jotta se todella näyttää ruudulta:

var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );

Tämä koodi lisää esineelle yksinkertaisen materiaalin, tässä tapauksessa sinisen värin. Olen asettanut rautalangan todeksi, koska se näyttää kohteen selkeämmin, kun saamme sen animoimaan.

Lopuksi meidän on lisättävä sylinteri meidän kohtauksemme, kuten:

var cylinder = new THREE.Mesh( geometry, material ); scene.add( cylinder );

Viimeinen asia, ennen kuin teemme kohtauksen on asettaa kameran sijainti:

camera.position.z = 20;

Kuten näette, JavaScript on erittäin yksinkertainen, koska Three.js käsittelee kaikkia monimutkaisia ​​juttuja, joten meidän ei tarvitse.

Näyttämisen tekeminen

Jos testat tiedoston selaimessa, näet, että mitään ei tapahdu. Tämä johtuu siitä, ettemme ole kertoneet kohtaukselle. Näyttämisen tekemiseksi tarvitsemme seuraavan koodin:

function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();

Jos katsot nyt selaimesi tiedostoa, näet, että se todellakin tekee sylinterin, mutta se ei ole jännittävää.

Jos haluat todella parantaa 3D-arvon, sinun on aloitettava animaatio, jota voimme tehdä muutamilla pienillä muutoksilla renderöintitoiminnollamme :

function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();

Jos testat selaimessa nyt, näet oikein animoivan 3D-sylinterin.

johtopäätös

Jos haluat nähdä demoa ja pelata koodilla, voit tee niin täällä.

Kuten näette, luomalla tämä (tosin hyvin yksinkertainen) kohtaus kesti vähemmän kuin kaksi tusinaa riviä koodia, ja mukana on hyvin vähän matematiikkaa.

Jos tarkistat esimerkkejä kolmella verkkosivustolla näet uskomatonta työtä, joka on tehty.

Tämä hämmästyttävä JavaScript-kirjasto on todella alentanut 3D-koodauksen alkutason siihen pisteeseen, että kuka tahansa, joka voi kirjoittaa perus-JavaScriptin, voi osallistua.

Esitetty kuva / pikkukuva, 3D-kuva kautta Shutterstock.