After you say " Till now I have achieved this." I only see a blank space. Are you saying you are starting from zero or was there supposed to be an image and/or some code there?

For now I have moved this to general discussion as no relevant code is included. The general answer is that you can either use camera() or translate(), rotate() and scale() for this type of 3D movement. Personally I prefer the latter, because it will allow much finer control over the movement of objects within your view. I believe peasyCam uses the former to move the camera around a given center (which is great for quickly moving around a centered object but is limited for more advanced movement). Note that there is also the proscene library for much more advanced camera movement within a 3D world.

Thanks for the reply. 

Ah, the image is visible now indeed.

With regard to examples, I remember there are some examples on the forum where people want to zoom in and move around an image/canvas bigger than the sketch window. Those are relatively close to what you're doing. You might wanna search for those to find some inspiration.

Here is a basic implementation of a camera (but actually the world moves) based on translate, rotate and scale which can be completely controlled through the mouse (left button, right button, scrollwheel).

Code Example

1. // left mouse button + mouse drag = rotate
2. // right mouse button + mouse drag = translate
3. // mouse scroll wheel = scale
4.  
5. import processing.opengl.*;
6. import java.awt.event.*;
7.  
8. PVector position = new PVector(450, 450);
9. PVector movement = new PVector();
10. PVector rotation = new PVector();
11. PVector velocity = new PVector();
12. float rotationSpeed = 0.035;
13. float movementSpeed = 0.05;
14. float scaleSpeed = 0.25;
15. float fScale = 2;
16.  
17. void setup() {
18.   size(900, 900, OPENGL);
19.   stroke(255, 255, 0);
20.   strokeWeight(2);
21.   fill(150, 200, 250);
22.   addMouseWheelListener(new MouseWheelListener() {
23.     public void mouseWheelMoved(MouseWheelEvent mwe) {
24.       mouseWheel(mwe.getWheelRotation());
25.   }});
26. }
27.  
28. void draw() {
29.   if (mousePressed) {
30.     if (mouseButton==LEFT) velocity.add( (pmouseY-mouseY) * 0.01, (mouseX-pmouseX) * 0.01, 0);
31.     if (mouseButton==RIGHT) movement.add( (mouseX-pmouseX) * movementSpeed, (mouseY-pmouseY) * movementSpeed, 0);
32.   }
33.   velocity.mult(0.95);
34.   rotation.add(velocity);
35.   movement.mult(0.95);
36.   position.add(movement);
37.  
38.   background(0);
39.   lights();
40.  
41.   translate(position.x, position.y, position.z);
42.   rotateX(rotation.x*rotationSpeed);
43.   rotateY(rotation.y*rotationSpeed);
44.   scale(fScale);
45.  
46.   box(90);
47.   line(-100, 0, 0, 100, 0, 0);
48.   line(0, -100, 0, 0, 100, 0);
49.   line(0, 0, -100, 0, 0, 100);
50. }
51.  
52. void mouseWheel(int delta) {
53.   fScale -= delta * scaleSpeed;
54.   fScale = max(0.5, fScale);
55. }

@ amnon.owed:

What happens when you add the following line to the top of your draw() loop:

1. background(0);

Without a background call the drawing is cumulative. When you are in 3D this works a little differently, but it still applies.

What you see in the video can be achieved with the methods in the example. You just need to tweak them (and you actually need less degrees of freedom to move around), especially the order. For example change the point of origin to the center of the map, then rotate around it over one axis while the other axis is slightly tilted etc.

The methods (translate, rotate and scale) I've been talking about all the time and the code example I posted above. Try them one by one and also in a different order (which will matter for the final result). With Processing it's easy to experiment with code and see the visual result. You may even use println, text() or frame.setTitle() to see the exact numbers of what you're doing in realtime. To change the origin you can use translate. The center of the object is in the middle of the map. Once you've translated by (mapwidth/2, mapheight/2) then the origin is centered in the map. When you rotate then the rotation will be around this point of origin. Just experiment to see the difference.