3D-Objekt, mit Canvas und Touch-Interface
Dass das Objekt aus dem letzten Post nur mit der Maus zu bedienen war, liess mir keine Ruhe.
Deshalb studierte ich die entsprechenden Abschnitte im Buch "HTML5 Games" und grübelte die restliche Details aus dem Internet zusammen.
Es stellte sich heraus, dass die Touch-Bedienung gut zu realisieren ist. Jetzt läuft die Simulation auch auf Tablets. Ich habe sie auf aktuellen iPads und zwei Android-Tablets getestet und fand keine Probleme.
Da die Maus-Funktionen durch das Touch-Interface nicht tangiert werden, läuft diese Version sowohl auf PCs mit Maus als auch auf den Tablets.
Bei der Initialisierung wird geprüft, ob die Touch-Events vom Browser unterstützt werden. Ist dies der Fall, werden die Event-Handler registriert:
if( "ontouchstart" in window )
{
canvas.addEventListener( "touchmove", touchhandler, false ) ;
canvas.addEventListener( "touchstart", touchhandler, false ) ;
}
Im Handler gilt es zu beachten, dass das Event-Objekt auf Multi-Touch ausgelegt ist. Deshalb gibt es ein Array von Berührungspunkten.
Diese Demo nimmt einfach den ersten Punkt als Position des Pointers:
var x = event.touches[0].clientX ;
Ohne event.preventDefault() lief der Handler nicht glatt, sondern hatte eine spürbare Verzögerung. preventDefault verhindert zudem dass der Canvas im Browser weggescrollt oder selektiert wird.
Wenn der Finger oder sonstige Pointer den Canvas verlässt, dann werden weiter Events an den Handler geliefert, mit Koordinaten ausserhalb des Canvas. Deshalb ist es nötig, die angegebenen Koordinaten auf die Fläche des Canvas zu begrenzen.
Update : Vorzeichen der Winkel geändert, damit die Bedienung intuitiver wird.