允许用户使用鼠标、触控板或触摸屏围绕 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])
参数
sensitivityX
数字:
沿 x 轴移动的灵敏度,默认为1。
sensitivityY
数字:
沿 y 轴移动的灵敏度,默认为1。
sensitivityZ
数字:
沿 z 轴移动的灵敏度,默认为1。
options
对象:
具有两个可选属性的对象, disableTouchActions
和 freeRotation
。 两者都是 Boolean
。 disableTouchActions
默认为 true
, freeRotation
默认为 false
。
Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/interaction.js and open a pull request!