Vi har evner i våre nettlesere som vi ikke ville ha drømt om for 5 eller 10 år siden. Hele 3D-spillverdenene kan kjøre i nettleseren, og interaktive nettsteder kan være mer oppslukende opplevelser.
Med et bestemt virtuelt virkelighetsfirma som blir kjøpt av et bestemt sosialt mediefirma, er det nå den perfekte tiden til å begynne å jobbe med 3D. Utrolig, vi kan nå lage 3D med ren JavaScript, inkludert masker og materialer.
Selvfølgelig, selv om det er mulig, krever det en stor del kode, og det er der Three.js kommer inn, slik at vi kan bygge 3D-miljøer enkelt og med mindre kode.
Dessverre, fordi det er nytt, er 3D ikke støttet av alle nettlesere. Vi er for øyeblikket begrenset til Chrome, Safari og Firefox.
Etter hvert som tiden går, vil støtte på IE bli bedre, men for nå trenger du en tilbakelevering for Microsoft-hengivne.
Det første vi må gjøre er å gå over til three.js nettsted og last ned den nyeste versjonen av biblioteket.
Deretter refererer det til i hovedet av dokumentet ditt som deg, noe som helst annen JavaScript-fil, og vi er klare til å gå.
Det første vi må gjøre, å gjengi noe med three.js, er å lage en scene, et kamera og en renderer. Starter med en scene:
var scene = new THREE.Scene();Deretter trenger vi et kamera. Tenk på dette som synspunktet som brukeren ser fra. Three.js har faktisk mange alternativer her, men for enkelhets skyld skal vi bruke et perspektivkamera:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Denne metoden tar fire parametere: den første er synsfeltet, den andre er aspektforholdet (jeg vil anbefale å alltid basere dette på brukerens visningsport), det nærliggende klippeplanet, og til slutt det fjerne klippeplanet. Disse to siste parametrene bestemmer grensene for gjengivelse, slik at objekter som er for nær eller for langt unna, ikke trekkes, noe som vil kaste bort ressurser.
Deretter må vi sette opp WebGL Renderer:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Som du kan se, er det første her å lage en forekomst av rendereren, sett deretter størrelsen til brukerens visningsport, til slutt legger vi den til siden for å lage et tomt lerret for oss å jobbe med.
Så langt har alt vi har gjort satt opp scenen, nå skal vi lage vårt første 3D-objekt.
For denne opplæringen skal det være en enkel sylinder:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Denne metoden tar også 4 parametre: den første er radius på toppen av sylinderen, den andre er radiusen på bunnen av sylinderen, den tredje er høyden, den siste er antall høydesegmenter.
Vi har satt opp matematikken til objektet, nå må vi pakke det inn i et materiale slik at det faktisk ser ut som noe på skjermen:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Denne koden legger til et enkelt materiale for objektet, i dette tilfellet en blå farge. Jeg har satt wireframe til ekte fordi det vil vise objektet tydeligere når vi kommer til å animere den.
Til slutt må vi legge vår sylinder til vår scene, slik som:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Den siste tingen å gjøre før vi gjør scenen, er å stille kameraets posisjon:
camera.position.z = 20;Som du kan se, er JavaScript involvert ekstremt enkelt, det er fordi Three.js har å gjøre med alle kompliserte ting, så vi trenger ikke.
Hvis du tester filen i en nettleser, ser du nå at ingenting skjer. Det er fordi vi ikke har fortalt scenen å gjengi. For å gjøre scenen trenger vi følgende kode:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Hvis du nå ser på filen i nettleseren din, ser du det gjør faktisk en sylinder, men det er ikke veldig spennende.
For å virkelig forbedre verdien av 3D må du begynne å animere, noe vi kan gjøre med et par små endringer i vår gjengivelsesfunksjon :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Hvis du tester i nettleseren din, ser du en riktig animerende 3D-sylinder.
Hvis du vil se en demonstrasjon og leke med koden du kan gjør det her.
Som du ser, skapte denne (ganske vist veldig enkel) scenen mindre enn to dusin linjer med kode, og det er veldig lite matematikk involvert.
Hvis du sjekker ut eksempler På hjemmesiden three.js ser du noe utrolig arbeid som har blitt gjort.
Dette fantastiske biblioteket for JavaScript har virkelig senket inngangsnivået for koding 3D til det punktet at alle som kan skrive grunnleggende JavaScript, kan bli involvert.