Instructables universum i Three.js (5 / 13 steg)
Steg 5: Three.js: komma igång
Detta är bara en gif. Klicka för full JSFiddle!
Three.js kan vara utmanande att steg in för första gången. För mig var förvirringen räkna ut alla bitar jag behövde för att montera för bara den mest grundläggande "Hello, World" typ av exempel. Jag kunde hitta några bra tutorials som skulle ge mig koden för att lägga en kub på skärmen, roterande, men jag kunde inte lista ut vad alla bitar gjorde. Jag skulle ändra något och hela röran skulle bryta.
Jag hoppas att diagrammet ovan löser detta för några av mina läsare. Att komma igång med threejs du behöver varje del i diagrammet, och du vill montera dem som beskrivs även för det mest minimala exemplet. Det finns inget sådant som en one-liner "Rita en kub". Jag ska gå igenom den. Om du behöver mer hjälp, skulle jag börja med Aerotwist's tutorial, bäst av de som jag hittade. Också mycket användbar, "att skapa en scen" sida i ThreeJS docs.
Den ThreeJS läraren nämns ovan går till mig, i en konstig ordning. Men säkert svagare kod till någon som redan förstår det, jag skulle kommentera exemplet "animera kub" som denna (koden är samma som ThreeJS doc, upprepade här med en annan förklaring):
Skapa en kub:
var geometri = nya tre. CubeGeometry(1,1,1);
var materialet = nya tre. MeshBasicMaterial ({color: 0x00ff00});
var kub = nya tre. Mesh (geometri, material);
Skapa en scen:
var scen = nya tre. Scene();
Lägg till kuben till scenen:
Scene.Add (kub);
Skapa ett återgivningstillägg:
var renderer = nya tre. WebGLRenderer();
renderer.setSize (window.innerWidth, window.innerHeight);
document.body.appendChild (renderer.domElement);
Lägga till en kamera och återge:
var kamera = nya tre. PerspectiveCamera (75, window.innerWidth / window.innerHeight, 0,1, 1000);
renderer.Render (scen, kamera);
Steg tillbaka för en andra. Fungerade det? OK, nu animera.
Lägg till en Rendering Loop, Ersätt renderer.render() med:
funktionen render() {
requestAnimationFrame(render);
Cube.rotation.x += 0,1;
Cube.rotation.y += 0,1;
renderer.Render (scen, kamera);
}
Render();
... och gå hem nöjd!
requestAnimationFrame(render) är ett shims för metoden infödda (ungefär) med samma namn som du kan tänka som liknar JavaScript är setInterval. Förutom att det finns många fördelar: requestAnimationFrame kommer inte elden när sidan inte visas, till exempel, så du behöver inte använda resurser för en animation som inte är som visas. Träd i skogen typ av situation. Det är också ett API som gör att webbläsaren att rita om många saker på en gång (från JS, CSS, WebGL, etc), så det ska optimera din omritning cykel. Läs mer.