p5.js orbitControl()用法及代码示例

p5.js中的orbitControl()函数用于通过鼠标或触控板在3D草图周围移动。鼠标左键可用于围绕场景中心旋转相机位置。鼠标右键可用于平移相机而无需任何旋转。鼠标滚轮可用于将摄像机移近或移至场景中心。

可以为该函数提供可选参数，这些参数用于控制沿轴运动的灵敏度。沿所有轴的默认灵敏度为1。灵敏度的负值可用于反转运动方向。

用法:

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

参数：此函数接受上述和以下所述的三个参数：

sensitivityX:它是一个数字，确定对鼠标沿x轴移动的敏感性。它是一个可选参数。
sensitivityY:它是一个数字，确定对鼠标沿y轴移动的敏感性。它是一个可选参数。
sensitivityZ:它是一个数字，它确定对鼠标沿z轴移动的敏感性。它是一个可选参数。

以下示例说明了p5.js中的orbitControl()函数：

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

输出：
orbit-comtrol-toggle

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

输出：
orbit-sensitivity-sliders

在线编辑： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/orbitControl

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js | orbitControl() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。