Vi har evner i vores browsere, som vi ikke ville have drømt om for 5 eller 10 år siden. Hele 3D-spillverdener kan køre i browseren, og interaktive websteder kan være mere fordybende oplevelser.
Når et bestemt virtuelt virkelighedsfirma bliver købt af et bestemt socialmediefirma, er det nu den perfekte tid til at begynde at arbejde med 3D. Utroligt kan vi nu skabe 3D med rent JavaScript, herunder masker og materialer.
Selvom det er muligt, kræver det selv en stor mængde kode, og det er her, hvor Three.js kommer ind, så vi kan bygge 3D-miljøer simpelthen og med mindre kode.
Desværre, fordi det er nyt, understøttes 3D ikke af alle browsere. Vi er i øjeblikket begrænset til Chrome, Safari og Firefox.
Som tiden går, vil støtte på IE blive bedre, men i øjeblikket behøver du en tilbagesendelse til Microsoft-tilhængere.
Det første vi skal gøre er at gå over til three.js hjemmeside og download den nyeste version af biblioteket.
Derefter henvises det i hovedet på dit dokument som dig til en anden JavaScript-fil, og vi er klar til at gå.
Det første, vi skal gøre, at gøre noget med three.js er at skabe en scene, et kamera og en renderer. Begyndende med en scene:
var scene = new THREE.Scene();Dernæst har vi brug for et kamera. Tænk på dette som det synspunkt, brugeren ser fra. Three.js har faktisk mange muligheder her, men for nemheds skyld vil vi bruge et perspektiv kamera:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Denne metode tager fire parametre: Den første er synsfeltet, den anden er billedformatet (jeg vil anbefale at basere dette altid på brugerens visningsport), det nærliggende klippeplan og endelig det fjerneste plan. Disse sidste to parametre bestemmer grænserne for gengivelsen, så objekter, der er for tætte eller for langt væk, ikke er tegnet, hvilket ville spildte ressourcer.
Derefter skal vi oprette 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 at skabe en forekomst af rendereren, så sæt dens størrelse til brugerens visningsport, til sidst tilføjer vi den til siden for at skabe et blankt lærred, som vi kan arbejde med.
Hidtil er alt, hvad vi har gjort, sat op på scenen, nu skal vi oprette vores første 3D-objekt.
Til denne tutorial vil det være en simpel cylinder:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Denne metode tager også 4 parametre: den første er radius på toppen af cylinderen, den anden er radius af bunden af cylinderen, den tredje er højden, den sidste er antallet af højdesegmenter.
Vi har oprettet objektets matematik, nu skal vi pakke det ind i et materiale, så det faktisk ser ud som noget på skærmen:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Denne kode tilføjer et simpelt materiale til objektet, i dette tilfælde en blå farve. Jeg har sat wireframe til sand, fordi det vil vise objektet tydeligere, når vi kommer til at animere det.
Endelig skal vi tilføje vores cylinder til vores scene, som sådan:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
Den sidste ting at gøre, før vi gør scenen, er at indstille kameraets position:
camera.position.z = 20;Som du kan se, er JavaScript involveret yderst simpelt, det er fordi Three.js har at gøre med alle de komplicerede ting, så vi behøver ikke.
Hvis du tester filen i en browser, ser du nu, at der ikke sker noget. Det er fordi vi ikke har fortalt scenen at gøre. For at gøre scenen har vi brug for følgende kode:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Hvis du nu kigger på filen i din browser, så vil du se det gør en cylinder, men det er ikke så spændende.
For virkelig at forbedre værdien af 3D skal du starte animering, hvilket vi kan gøre med et par små ændringer i vores renderingsfunktion :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Hvis du tester i din browser, ser du en korrekt animerende 3D-cylinder.
Hvis du vil se en demo og lege med den kode, du kan gør det her.
Som du kan se, skabte dette (ganske vist meget simpelt) scene mindre end to dusin linjer kode, og der er meget lidt matematik involveret.
Hvis du tjekker eksempler På hjemmesiden three.js ses der noget utroligt arbejde, der er gjort.
Dette fantastiske bibliotek til JavaScript har virkelig sænket adgangsniveauet for kodning 3D til det punkt, at alle, der kan skrive grundlæggende JavaScript, kan involvere sig.
Fremhævet billede / miniaturebillede, 3D billede via Shutterstock.