Skapa en animerad 3D-värld

By , . Latest revision .

Skapa en animerad 3D värld av kuber som rör sig och flytta runt i världen genom att styra med tangentbordet.

#Förkunskaper

Du har läst igenom kapitel 5 och 7 i boken “WebGL Programming Guide”.

Du har studerat exempelprogrammen i kursrepot som heter example/sandboxWebGL5*/ samt example/sandboxWebGL7*/.

#Introduktion

Börja med att ta en kopia av din senaste sandbox, eller från din senaste uppgift.

# Ställ dig i rooten av kursrepot
cd me
cp -ir kmom02/sandbox3/* kmom03/world/

Nu har du grunden för att göra uppgiften.

#Krav

  1. Använd JavaScript objekt för att organisera din kod.

  2. Skapa (minst) tre kuber. Kuberna skall skilja i storlek, position och färg.

  3. Minst en av kuberna skall ha texturer på sidorna.

  4. Använd en VP-matris för att styra scenen.

  5. Skapa en kontrollpanel som visualiserar nuvarande inställningar på VP-matrisen.

  6. Scenen skall animeras.

  7. Varje kub skall röra sig individuellt, via rotering, skalning eller translate, för att visa rörelse i scenen.

  8. Kontrollpanelen skall kunna pausa animeringen samt styra hastigheten.

  9. Använd en HUD för att visualisera prestandan.

  10. Använd tangentbordet och/eller musen/touch-event för att navigera i scenen med hjälp av en kamera.

  11. Integrera din canvas med din animerade 3D-värld från denna uppgiften i din portfölj.

  12. Validera och publicera din kod enligt följande.

# Ställ dig i kurskatalogen
dbwebb validate world
dbwebb publish world

Rätta eventuella fel som dyker upp och publicera igen. När det ser grönt ut så är du klar.

#Extrauppgift

Gör extrauppgifterna om du har tid och vill förkovra dig ytterligare.

  1. Gör så att kontrollpanelen kan justera samtliga värden i VP-matrisen.

  2. Fördela din JavaScript-kod så att varje objekt ligger i en egen fil.

  3. Använd fler bilder som underlag gör texturer.

  4. Gör en riktigt snygg navigering i scenen via en kombination av tangenter, mus och touch-event. Kontrollera att navigeringen även fungerar på touch-enheter.

#Tips från coachen

Lycka till och hojta till i forumet om du behöver hjälp!

#Revision history

  • 2018-10-05: (B, efo) Uppdaterade kravspec från feedback ht17.
  • 2015-11-29: (A, mos) Första utgåvan i samband med kursen webgl.

Document source.

Category: javascript.

Mikael Roos

Mikael Roos

undervisar vid Blekinge Tekniska Högskola och skriver om webbprogrammering, webbutveckling och utmaningen med att undervisa på distans och campus. Mikael driver ett företag inom webbprogrammering och på kvällarna utvecklar han sina projekt inom öppen källkod.

Emil Folino

Emil Folino

är BTH’s första förste adjunkt. Emil undervisar, utvecklar och handleder dbwebb-kurserna. Utöver arbetet på BTH tar Emil hand om sina 3 ungar och springer orientering för OK Orion. Har tidigare jobbat som konsult i ett mindre företag.