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!