参考 orbitControl()

orbitControl()

允许用户使用鼠标、触控板或触摸屏围绕 3D 绘图进行旋转。

通过一个虚拟的摄像机可以查看 3D 绘图。在 draw() 函数中调用 orbitControl() 允许用户改变摄像机的位置:

function draw() { background(200); <p> // &#x4f7f;&#x7528;&#x9f20;&#x6807;&#x8fdb;&#x884c;&#x8f68;&#x9053;&#x63a7;&#x5236;&#x3002; orbitControl();</p> <p> // &#x7ed8;&#x56fe;&#x7684;&#x5176;&#x4f59;&#x90e8;&#x5206;&#x3002; } </p>

左键点击并拖动或滑动将使摄像机围绕绘图中心旋转。右键点击并拖动或多点滑动可以在不旋转摄像机的情况下平移其位置。使用鼠标滚轮(滚动)或进行捏合动作可以使摄像机远离或靠近绘图中心。

前三个参数,sensitivityXsensitivityY 和 sensitivityZ 都是可选的。它们是设置绘图对每个轴向移动的灵敏度的数字。例如,调用orbitControl(1, 2, -1) 会保持 x 轴的移动在默认值,并使得绘图对 y 轴的移动灵敏度加倍,以及使 z 轴反向移动。在默认情况下,所有灵敏度的值均为 1。

第四个参数, options,也是可选的。这是一个改变旋转行为的对象。例如,调用 orbitControl(1, 1, 1, options) 可以在保持默认灵敏度值的同时,改变由 options 设置的行为。该对象可以具有以下属性:

let options = { // &#x5c06;&#x6b64;&#x8bbe;&#x7f6e;&#x4e3a; false &#x53ef;&#x4ee5;&#x9632;&#x6b62;&#x5728;&#x65cb;&#x8f6c;&#x65f6;&#x610f;&#x5916;&#x4e0e;&#x9875;&#x9762;&#x4ea4;&#x4e92;&#xff0c; // &#x4ece;&#x800c;&#x8ba9;&#x79fb;&#x52a8;&#x4ea4;&#x4e92;&#x66f4;&#x52a0;&#x987a;&#x7545;&#x3002; // &#x9ed8;&#x8ba4;&#x60c5;&#x51b5;&#x4e0b;&#xff0c;&#x6b64;&#x503c;&#x4e3a; true&#x3002; disableTouchActions: true, <p> // &#x5c06;&#x6b64;&#x8bbe;&#x7f6e;&#x4e3a; true &#x4f1a;&#x4f7f;&#x6444;&#x50cf;&#x673a;&#x603b;&#x662f;&#x6309;&#x7167; // &#x9f20;&#x6807;/&#x89e6;&#x6478;&#x7684;&#x79fb;&#x52a8;&#x65b9;&#x5411;&#x65cb;&#x8f6c;&#x3002; // &#x9ed8;&#x8ba4;&#x60c5;&#x51b5;&#x4e0b;&#xff0c;&#x6b64;&#x503c;&#x4e3a; false&#x3002; 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。 两者都是 BooleandisableTouchActions 默认为 truefreeRotation 默认为 false

This page is generated from the comments in src/webgl/interaction.js . Please feel free to edit it and submit a pull request!

相关参考