p5.js | orbitControl() Function - GeeksforGeeks

13 Jan, 2022
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(() =&gt; {    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:  
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:  
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 
adnanirshad158
JavaScript-p5.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?