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:
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
