In regards to an idea I have concerning the Orbit Camera (https://developer.playcanvas.com/en/tutorials/orbit-camera/), I seek to make functional on a mobile device.
A susch I want it to merge with the Multitouch Input example (https://developer.playcanvas.com/en/tutorials/multitouch-input/)
- here is what I have done so far within the mouseInput script of Orbit Camera
{trying to make the lastPoint of screenPoint into currentTouch of multitouch etc}:
MouseInput.prototype.initialize = function() {
var touch = this.app.touch;
if (touch) {
touch.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
touch.on(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
touch.on(pc.EVENT_TOUCHCANCEL, this.onTouchCancel, this);
} else {
// Touch isn't supported on device (should show a message in the sample)
}
// Keep track of the fingers on the screen
this.activeTouches = [];
if( this.activeTouches.length>1){
}
// Keep a cache of 'touches' so we don't keep creating new ones every time the
// user touches the screen
this.freeTouches = [];
this.orbitCamera = this.entity.script.orbitCamera;
if (this.orbitCamera) {
var self = this;
var onMouseOut = function (e) {
self.onMouseOut(e);
};
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
this.app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
this.app.mouse.on(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);
// Listen to when the mouse travels out of the window
window.addEventListener('mouseout', onMouseOut, false);
// Remove the listeners so if this entity is destroyed
this.on('destroy', function() {
this.app.mouse.off(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
this.app.mouse.off(pc.EVENT_MOUSEUP, this.onMouseUp, this);
this.app.mouse.off(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
this.app.mouse.off(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);
window.removeEventListener('mouseout', onMouseOut, false);
});
}
// Disabling the context menu stops the browser displaying a menu when
// you right-click the page
this.app.mouse.disableContextMenu();
this.lookButtonDown = false;
this.panButtonDown = false;
this.lastPoint = new pc.Vec2();
};
MouseInput.fromWorldPoint = new pc.Vec3();
MouseInput.toWorldPoint = new pc.Vec3();
MouseInput.worldDiff = new pc.Vec3();
MouseInput.prototype.pan = function(screenPoint) {
var fromWorldPoint = MouseInput.fromWorldPoint;
var toWorldPoint = MouseInput.toWorldPoint;
var worldDiff = MouseInput.worldDiff;
// For panning to work at any zoom level, we use screen point to world projection
// to work out how far we need to pan the pivotEntity in world space
var camera = this.entity.camera;
var distance = this.orbitCamera.distance;
camera.screenToWorld(screenPoint.x, screenPoint.y, distance, fromWorldPoint);
camera.screenToWorld(this.lastPoint.x, this.lastPoint.y, distance, toWorldPoint);
worldDiff.sub2(toWorldPoint, fromWorldPoint);
this.orbitCamera.pivotPoint.add(worldDiff);
};
MouseInput.prototype.update = function(dt) {
// Draw a line from the first touch object to the next and then from that one to the next, etc
for (var i = 1; i < this.activeTouches.length; i += 1) {
var prevTouch = this.activeTouches[i-1];
var currentTouch = this.activeTouches[i];
this.app.renderLine(prevTouch.position, currentTouch.position, this.lineColor);
}
};
MouseInput.prototype.ftPan = function(screenPoint) {
var fromWorldPoint = MouseInput.fromWorldPoint;
var toWorldPoint = MouseInput.toWorldPoint;
var worldDiff = MouseInput.worldDiff;
// For panning to work at any zoom level, we use screen point to world projection
// to work out how far we need to pan the pivotEntity in world space
var camera = this.entity.camera;
var distance = this.orbitCamera.distance;
for (var i = 1; i < this.activeTouches.length; i += 1) {
var prevTouch = this.activeTouches[i-1];
var currentTouch = this.activeTouches[i];
camera.screenToWorld(currentTouch.x, currentTouch.y, distance, fromWorldPoint);
camera.screenToWorld(this.prevTouch.x, this.prevTouch.y, distance, toWorldPoint);
}
worldDiff.sub2(toWorldPoint, fromWorldPoint);
this.orbitCamera.pivotPoint.add(worldDiff);
};
MouseInput.prototype.onMouseDown = function (event) {
switch (event.button) {
case pc.MOUSEBUTTON_LEFT: {
this.lookButtonDown = true;
} break;
case pc.MOUSEBUTTON_MIDDLE:
case pc.MOUSEBUTTON_RIGHT: {
this.panButtonDown = true;
} break;
}
};
MouseInput.prototype.onFingDown = function(number) {
switch (number) {
case 2: {
this.panButtonDown = true;
} break;
case 3: {
this.lookButtonDown = true;
} break;
case 4:
}
};
