Do we have a touch event example to handle the rotation using fingers and get the angle of that rotation, made directly in Playcanvas?
Otherwise, I may use external library like hammer.js.
Hi @Mystik,
Not sure what you mean getting the rotation using fingers but you can study the model viewer project template. The orbit camera script comes together with touch input, so you can see how everything works together.
I mean a 2D rotation using 2 fingers. In this image, we can see that the user did a rotation of about 30 degrees.
No example on hand but I would store the initial vector of the first touch to the second touch when two touches are first detected. Then get the angle between the stored vector to current vector between the two touches on every move event.
1 Like
Hay @yaustar, I like to use this is in my game to!
I am currently using the script of this project https://playcanvas.com/project/439791/overview/orbit-camera to control my camera. Can you help me to apply this in that script?
The advantage of this is that there always two fingers are needed to zoom and rotate the camera and that gives room for the other functions in my game.
For documentation purpose and further readers, here is my solution with Hammer.js and Playcanvas
//Need to add this script in your project or HTML page
<script src="js/hammer.min.js"></script>
// initialize code called once per entity
TouchInput.prototype.initialize = function() {
[...]
this.hammer = Hammer(this.app.graphicsDevice.canvas);
this.hammer.add(new Hammer.Rotate());
this.hammer.get('rotate').set({ enable: true });
var lastRotation;
this.hammer.on('rotatemove', function(e) {
var deltaAngle= lastRotation - Math.round(e.rotation);
//Rotate on Y-axis
myEntity.rotateLocal(0, deltaAngle, 0);
lastRotation = Math.round(e.rotation);
});
this.hammer.on('rotatestart', function(e) {
lastRotation = Math.round(e.rotation);
});
};
1 Like
Hay @Mystik, thanks for sharing! I had never studied Hammer.js before but it looks interesting. It looks like it works a bit like Tween.js. I’m just a bit reluctant to use all such extensions because I’m afraid the compatibility with PlayCanvas is less guaranteed.
I don’t see any compatibility issue actually.
Also, the old model viewer starter kit was with Hammer.js as explained here.
Sorry, I mean in the future.
I’ve quickly hacked a fork of the model viewer to do 2 finger rotation on the camera: https://playcanvas.com/project/686041/overview/two-finger-rotate
Nice! Works great! 
How can I keep the camera rotating around the model so that the model stays in the middle of the screen?
Disable the panning controls 
1 Like