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:
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:
Example 2:
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/amp/
Reference: https://p5js.org/reference/#/p5/orbitControl