Orbit control uses mouse or touch input to adjust camera orientation in a 3D sketch. To rotate the camera, left click and drag a mouse or swipe on a touch screen. To pan the camera, right click and drag a mouse or swipe with multiple fingers on a touch screen. To move the camera closer or further to the center of the sketch, use the scroll wheel on a mouse or pinch in/out on a touch screen.
Orbit Control by p5.js Contributors and the Processing Foundation is licensed under CC BY-NC-SA 4.0.
Related Examples
![Eight 3D shapes; a plane, box, cylinder, cone, torus, sphere, ellipsoid, and a model of an astronaut. The surface of the shapes are multicolored.](/_astro/11_3D-00_Geometries-thumbnail.CIGxWPlb_ZrLzA7.webp)
Eight 3D shapes; a plane, box, cylinder, cone, torus, sphere, ellipsoid, and a model of an astronaut. The surface of the shapes are multicolored.
Geometries
Draw 3D shapes, including a custom model.
![A tiled plane of snake models.](/_astro/11_3D-01_Custom_Geometry-thumbnail.hOI_CIjS_kGC1q.webp)
A tiled plane of snake models.
Custom Geometry
Generate a 3D shape programmatically.
![Astronaut 3D model on a black background.](/_astro/11_3D-02_Materials-thumbnail.BH6mGApZ_Z1y8uVN.webp)
Astronaut 3D model on a black background.
Materials
Change 3D objects' color, texture, and how they respond to light.
![A sphere of dark purple cubes on a light pink background.](/_astro/11_3D-03_Orbit_Control-thumbnail.-zEVdjrU_Zua1gI.webp)
A sphere of dark purple cubes on a light pink background.
Orbit Control
Control the camera with the mouse.
![A screenshot of a video of a city crosswalk, with offset colors.](/_astro/11_3D-04_Filter_Shader-thumbnail.BSzfvPSy_Z7FNLg.webp)
A screenshot of a video of a city crosswalk, with offset colors.
Filter Shader
Manipulate imagery with a shader.
![A red-to-blue waving ribbon on a white background.](/_astro/11_3D-05_Adjusting_Positions_With_A_Shader-thumbnail.D6XjOyN8_1AWOoU.webp)
A red-to-blue waving ribbon on a white background.
Adjusting Positions with a Shader
Use a shader to adjust shape vertices.
![A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.](/_astro/11_3D-06_Framebuffer_Blur-thumbnail.Ck8s9IeK_Z1r2Q1P.webp)
A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.
Framebuffer Blur
Simulate a camera's depth of field.