Pan and zoom
Learn how to pan and zoom
To pan around the scene, we change the camera's x and y coordinates when the user is dragging the mouse. To zoom, we change z on a mouseWheel event (which is also fired when the user pinches with two fingers on a touch-screen device). We change the position of the camera using wade.setCameraPosition().
App = function()
{
this.init = function()
{
var textSprite = new TextSprite('Click and drag to pan.\n Mouse wheel or pinch to zoom.', '32px Arial', 'blue', 'center');
var obj = new SceneObject(textSprite);
wade.addSceneObject(obj);
};
this.onMouseDown = function(eventData)
{
// store coordinates when the mouse button is pressed (or when the screen is touched)
this.mouseDownPosition = eventData.screenPosition;
this.clickCameraPosition = wade.getCameraPosition();
};
// pan
this.onMouseMove = function(eventData)
{
if (wade.isMouseDown())
{
// see how much we've moved since the onMouseDown event
var dx = this.mouseDownPosition.x - eventData.screenPosition.x;
var dy = this.mouseDownPosition.y - eventData.screenPosition.y;
// update camera position
var cameraPos = {x: this.clickCameraPosition.x + dx,
y: this.clickCameraPosition.y + dy,
z: this.clickCameraPosition.z};
wade.setCameraPosition(cameraPos);
}
};
// zoom
this.onMouseWheel = function(eventData)
{
var cameraPos = wade.getCameraPosition();
cameraPos.z -= eventData.value * 0.01;
wade.setCameraPosition(cameraPos);
};
};
Your code was executed successfully!
