Zdarzenia dotyku w javascript dla 3d graphera
Niedawno dorobiłam możliwość obsługi obracania powierzchni w 3d grapherze oraz w implicit equations 3d grapherze za pomocą dotyku na urządzeniach mobilnych. Używam następujących zdarzeń:
- touchstart - rozpoczęcie zdarzenie dotyku. Odpowiednik mouseDown
- touchmove - wywoływane podczas przesuwania palcem po obiekcie. Odpowiednik mouseMove
- touchend - wywoływane kiedy dotykanie się kończy. Odpowiednik mouseUp.
renderer.domElement.addEventListener('touchstart', onDocumentMouseDown, false); renderer.domElement.addEventListener('touchend', onDocumentMouseUp, false); renderer.domElement.addEventListener('touchmove', onDocumentTouchMove, false);W celu odczytanie współrzędnych dotkniętego punktu należy użyć.
e.changedTouches[0].pageX; e.changedTouches[0].pageY;Efekt zoomowania na urządzeniach mobilnych wprowadziłam dodając zdarzenia pinchin i pinchout wykorzystując bibliotekę hammer.js. Poniżej przykładowy kod wykorzystujący tą bibliotekę.
Hammer(renderer.domElement).on("pinchin", function(e) { e.preventDefault(); obj.scale.x *= 0.99; obj.scale.y *= 0.99; obj.scale.z *= 0.99; });Przydatne materiały:
Touchevents - JavaScript Kit