p5.js | 轨道控制()

在p5.js中，通过调用orbitControl()函数可以轻松地添加轨道控制。这个函数是p5.js中的一个内置函数，用于创建一个可交互的3D视图，让用户可以旋转和缩放场景。

语法

orbitControl([maxZoom],[minZoom],[sensitivity])

• maxZoom：可选。定义用户可以缩放到的最大距离。
• minZoom：可选。定义用户可以缩放到的最小距离。
• sensitivity：可选。定义鼠标滚轮敏感度。

示例

function setup() {
  createCanvas(400, 400, WEBGL);
  orbitControl(); // 添加轨道控制
}

function draw() {
  background(220);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(100);
}

在运行这个示例之前，你需要在p5.js编辑器中设置图形模式为WEBGL，这可以让p5.js支持3D视图。

调用orbitControl()函数会在画布上创建一个控制器元素，用户可以通过鼠标来控制场景，比如缩放、旋转等操作。用户也可以使用键盘来进行控制，比如使用ALT键将光标变为一个放大镜，使用CTRL键将光标变为一个旋转图标。

使用orbitControl()函数还可以传递三个可选参数：maxZoom（最大缩放距离）、minZoom（最小缩放距离）和sensitivity（鼠标滚轮敏感度）。例如，如果你希望用户可以更近地缩放场景，你可以这样调用该函数：

function setup() {
  createCanvas(400, 400, WEBGL);
  orbitControl(100, 10, 0.5); // 添加轨道控制，并定义参数
}

function draw() {
  background(220);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(100);
}

这种情况下，用户只能将场景缩放到离摄像机100个像素的最远处，离摄像机10个像素的最近处，鼠标滚轮滚动敏感度为0.5。

结论

orbitControl()函数是p5.js中一个很有用的内置函数，可以轻松地添加轨道控制。使用该函数可以让用户通过鼠标和键盘来交互地控制3D场景。