p5.js | función orbitControl()

La función orbitControl() en p5.js se usa para permitir el movimiento alrededor de un boceto 3D usando un mouse o trackpad. El botón izquierdo del mouse se puede usar para rotar la posición de la cámara sobre el centro de la escena. El botón derecho del mouse se puede usar para desplazar la cámara sin ninguna rotación. La rueda de desplazamiento del mouse se puede usar para acercar o alejar la cámara al centro de la escena.
La función puede recibir parámetros opcionales que se utilizan para controlar la sensibilidad del movimiento a lo largo de los ejes. La sensibilidad predeterminada a lo largo de todos los ejes es 1. Se puede usar un valor negativo de sensibilidad para invertir la dirección del movimiento.
Sintaxis: 
 

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

Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación: 
 

• sensitividadX: Es un número que determina la sensibilidad al movimiento del mouse a lo largo del eje x. Es un parámetro opcional.
• sensitividadY: Es un número que determina la sensibilidad al movimiento del mouse a lo largo del eje y. Es un parámetro opcional.
• sensitividadZ: Es un número que determina la sensibilidad al movimiento del mouse a lo largo del eje z. Es un parámetro opcional.

Los siguientes ejemplos ilustran la función orbitControl() en p5.js:
Ejemplo 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);
}

Producción: 
 

Ejemplo 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);
}

Producción: 
 

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5/orbitControl