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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。