Open In App

p5.js orbitControl() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The orbitControl() function in p5.js is used to enable the movement around a 3D sketch using a mouse or trackpad. The left mouse button can be used to rotate the camera position about the center of the scene. The right mouse button can be used to pan the camera without any rotation. The mouse scroll wheel can be used to move the camera closer or further to the center of the scene.
The function can be given optional parameters that are used to control the sensitivity of the movement along the axes. The default sensitivity along all axes is 1. A negative value of sensitivity can be used to reverse the direction of the movement.
Syntax: 
 

orbitControl( [sensitivityX], [sensitivityY], [sensitivityZ] )

Parameters: This function accepts three parameters as mentioned above and described below: 
 

  • sensitivityX: It is a number which determines the sensitivity to mouse movement along the x-axis. It is an optional parameter.
  • sensitivityY: It is a number which determines the sensitivity to mouse movement along the y-axis. It is an optional parameter.
  • sensitivityZ: It is a number which determines the sensitivity to mouse movement along the z-axis. It is an optional parameter.

Below examples illustrate the orbitControl() function in p5.js:
Example 1: 
 

javascript




let newFont;
let orbitControlEnable = false;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);
  
  orbitControlCheck = createCheckbox(
       "Enable Orbit Control", false);
  
  orbitControlCheck.position(20, 60);
  
  // Toggle default light
  orbitControlCheck.changed(() => {
    orbitControlEnable = !orbitControlEnable;
  });
}
  
function draw() {
  background("green");
  text("Click on the checkbox to toggle the "
     + "orbitControl() function.", -285, -125);
  noStroke();
  
  // Enable default lights
  lights();
  
  // If checkbox is enabled
  if (orbitControlEnable) {
  
    // Enable orbit control
    orbitControl();
  
    text("Orbit Control Enabled", -285, 125);
  }
  else {
    text("Orbit Control Disabled", -285, 125);
  }
  box(100);
}


Output: 
 

orbit-comtrol-toggle

Example 2: 
 

javascript




let newFont;
let orbitControlEnable = false;
  
function preload() {
  newFont = loadFont('fonts/Montserrat.otf');
}
  
function setup() {
  createCanvas(600, 300, WEBGL);
  textFont(newFont, 18);
  
  xSensitivitySlider = createSlider(0, 5, 1, 0.1);
  xSensitivitySlider.position(20, 50);
  
  ySensitivitySlider = createSlider(0, 5, 1, 0.1);
  ySensitivitySlider.position(20, 80);
  
  zSensitivitySlider = createSlider(0, 5, 1, 0.1);
  zSensitivitySlider.position(20, 110);
}
  
function draw() {
  background("green");
  text("Move the sliders to modify the x, y and"
         + " z orbit sensitivity", -285, -125);
  noStroke();
  
  xSensitivity = xSensitivitySlider.value();
  ySensitivity = ySensitivitySlider.value();
  zSensitivity = zSensitivitySlider.value();
  
  text("x Sensitivity is: " + xSensitivity, -285, 100);
  text("y Sensitivity is: " + ySensitivity, -285, 120);
  text("z Sensitivity is: " + zSensitivity, -285, 140);
  
  // Enable default lights
  lights();
  
  orbitControl(xSensitivity, ySensitivity, zSensitivity);
  
  box(100);
}


Output: 
 

orbit-sensitivity-sliders

Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/orbitControl
 



Last Updated : 23 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads