允许用户使用鼠标、触控板或触摸屏围绕 3D 绘图进行旋转。
通过一个虚拟的摄像机可以查看 3D 绘图。在 draw() 函数中调用 orbitControl()
允许用户改变摄像机的位置:
function draw() { background(200); <p> // 使用鼠标进行轨道控制。 orbitControl();</p> <p> // 绘图的其余部分。 } </p>
左键点击并拖动或滑动将使摄像机围绕绘图中心旋转。右键点击并拖动或多点滑动可以在不旋转摄像机的情况下平移其位置。使用鼠标滚轮(滚动)或进行捏合动作可以使摄像机远离或靠近绘图中心。
前三个参数,sensitivityX
、sensitivityY
和 sensitivityZ
都是可选的。它们是设置绘图对每个轴向移动的灵敏度的数字。例如,调用orbitControl(1, 2, -1)
会保持 x 轴的移动在默认值,并使得绘图对 y 轴的移动灵敏度加倍,以及使 z 轴反向移动。在默认情况下,所有灵敏度的值均为 1。
第四个参数, options
,也是可选的。这是一个改变旋转行为的对象。例如,调用 orbitControl(1, 1, 1, options)
可以在保持默认灵敏度值的同时,改变由 options
设置的行为。该对象可以具有以下属性:
let options = { // 将此设置为 false 可以防止在旋转时意外与页面交互, // 从而让移动交互更加顺畅。 // 默认情况下,此值为 true。 disableTouchActions: true, <p> // 将此设置为 true 会使摄像机总是按照 // 鼠标/触摸的移动方向旋转。 // 默认情况下,此值为 false。 freeRotation: false };</p> <p>orbitControl(1, 1, 1, options); </p>
示例
语法
orbitControl([sensitivityX], [sensitivityY], [sensitivityZ], [options])
参数
沿 x 轴移动的灵敏度,默认为1。
沿 y 轴移动的灵敏度,默认为1。
沿 z 轴移动的灵敏度,默认为1。
具有两个可选属性的对象, disableTouchActions
和 freeRotation
。 两者都是 Boolean
。 disableTouchActions
默认为 true
, freeRotation
默认为 false
。
相关参考
debugMode
添加网格和轴标志以帮助明确 3D 绘图中的方向。 debugMode() 函数添加一个网格, 显示绘图中“地面”的位置。默认情况下,网格将通过绘图的原点 (0, 0, 0) 沿着 XZ 平面运行。 debugMode() 还添加了一个沿着正 x、y 和 z 轴指向的坐标轴图标。调用 debugMode() 会显示网格和坐标轴图标, 以及它们的默认大小和位置。 >有四种调用 debugMode() 的方式,可选参数用于自定义调试环境。 第一种调用 debugMode() 的方式有一个参数,mode。 如果传递了系统常量 GRID, 例如debugMode(GRID), 那么将显示网格并隐藏坐标轴图标。 如果传递了常量AXES,例如 debugMode(AXES), 则会显示坐标轴图标并隐藏网格。 第二种调用 debugMode() 的方式有六个参数。第一个参数 mode, 选择要显示的 GRID 或 AXES。 接下来的五个参数, gridSize, gridDivisions, xOff, yOff, 和 zOff 是可选的。 它们是用于设置网格外观 (gridSize 和 gridDivisions) 以及放置坐标轴图标 (xOff, yOff, 和 zOff) 的数字。 例如,调用debugMode(20, 5, 10, 10, 10) 将 gridSize 设置为 20 个像素, 并将 gridDivisions 设置为 5, 并且沿着 x、y 和 z 轴偏移坐标轴图标 1 0像素。 第三种调用 debugMode() 的方式有五个参数。 第一个参数 mode 选择要显示的 GRID 或 AXES。接下来的四个参数, axesSize, xOff, yOff, 和 zOff 是可选的。它们是用于设置坐标轴图标大小 ( axesSize) 以及其放置位置 ( xOff、 yOff 和 zOff)的数字。 第四种调用 debugMode() 的方式有九个可选参数。前五个参数 gridSize、 gridDivisions、 gridXOff、 gridYOff 和 gridZOff 是用于设置网格外观的数字。例如,调用 debugMode(100, 5, 0, 0, 0) 将 gridSize 设置为 100,将 gridDivisions 设置为 5,并将所有偏移量设置为 0,以便网格居中于原点。接下来的四个参数 axesSize、 xOff、 yOff 和 zOff 是用于设置坐标轴图标大小的数字( axesSize)以及其放置位置( axesXOff、 axesYOff 和 axesZOff)。例如,调用 debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10) 将 gridSize 设置为 100,将 gridDivisions 设置为 5,并将所有偏移量设置为 0,以便网格居中于原点。然后将 axesSize 设置为 50,并将图标沿每个轴偏移 10 像素。 .
noDebugMode
在 3D 绘图中关闭 debugMode()。 .
orbitControl
允许用户使用鼠标、触控板或触摸屏围绕 3D 绘图进行旋转。 通过一个虚拟的摄像机可以查看 3D 绘图。在 draw() 函数中调用 orbitControl() 允许用户改变摄像机的位置: function draw() { background(200); // 使用鼠标进行轨道控制。 orbitControl(); // 绘图的其余部分。 } 左键点击并拖动或滑动将使摄像机围绕绘图中心旋转。右键点击并拖动或多点滑动可以在不旋转摄像机的情况下平移其位置。使用鼠标滚轮(滚动)或进行捏合动作可以使摄像机远离或靠近绘图中心。 前三个参数,sensitivityX、sensitivityY 和 sensitivityZ 都是可选的。它们是设置绘图对每个轴向移动的灵敏度的数字。例如,调用orbitControl(1, 2, -1) 会保持 x 轴的移动在默认值,并使得绘图对 y 轴的移动灵敏度加倍,以及使 z 轴反向移动。在默认情况下,所有灵敏度的值均为 1。 第四个参数, options,也是可选的。这是一个改变旋转行为的对象。例如,调用 orbitControl(1, 1, 1, options) 可以在保持默认灵敏度值的同时,改变由 options 设置的行为。该对象可以具有以下属性: let options = { // 将此设置为 false 可以防止在旋转时意外与页面交互, // 从而让移动交互更加顺畅。 // 默认情况下,此值为 true。 disableTouchActions: true, // 将此设置为 true 会使摄像机总是按照 // 鼠标/触摸的移动方向旋转。 // 默认情况下,此值为 false。 freeRotation: false }; orbitControl(1, 1, 1, options); .