p5.js |轨道控制()函数

p5.js 中的orbitControl()函数用于启用使用鼠标或触控板围绕 3D 草图的移动。鼠标左键可用于围绕场景中心旋转相机位置。鼠标右键可用于平移相机而不进行任何旋转。鼠标滚轮可用于将相机移近或进一步靠近场景中心。
可以为函数提供可选参数，这些参数用于控制沿轴移动的灵敏度。沿所有轴的默认灵敏度为 1。灵敏度的负值可用于反转运动方向。
句法：

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

参数：此函数接受三个参数，如上所述，如下所述：

• 灵敏度X：它是一个确定鼠标沿x 轴移动的灵敏度的数字。它是一个可选参数。
• 灵敏度Y：它是一个确定鼠标沿y轴移动的灵敏度的数字。它是一个可选参数。
• 灵敏度Z：它是一个数字，它决定了鼠标沿 z 轴移动的灵敏度。它是一个可选参数。

以下示例说明了 p5.js 中的orbitControl()函数：
示例 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);
}

输出：

示例 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);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5/orbitControl