マウス、トラックパッド、またはタッチスクリーンを使用して、ユーザーが3Dスケッチの周りを軌道運動できるようにします。
3Dスケッチは想像上のカメラを通して見られます。draw()関数内でorbitControl()
を呼び出すことで、 ユーザーがカメラの位置を変更できるようになります:
function draw() {
background(200);
// マウスで軌道運動を有効にする。
orbitControl();
// スケッチの残りの部分。
}
左クリックしてドラッグするか、スワイプ動作をすると、スケッチの中心を軸にカメラ位置が回転します。 右クリックしてドラッグするか、マルチスワイプすると、回転せずにカメラ位置がパンします。 マウスホイール(スクロール)を使用するか、ピンチイン/アウトすると、カメラがスケッチの中心から 遠ざかったり近づいたりします。
最初の3つのパラメータ、sensitivityX
、sensitivityY
、 sensitivityZ
はオプションです。これらは各軸に沿った動きに対するスケッチの 感度を設定する数値です。例えば、orbitControl(1, 2, -1)
を呼び出すと、 x軸に沿った動きはデフォルト値のままで、y軸に沿った動きの感度を2倍にし、 z軸に沿った動きを反転させます。デフォルトでは、すべての感度値は1です。
4番目のパラメータoptions
もオプションです。これは軌道運動の動作を 変更するオブジェクトです。例えば、orbitControl(1, 1, 1, options)
を 呼び出すと、デフォルトの感度値を保持しながら、options
で設定された 動作を変更します。このオブジェクトは以下のプロパティを持つことができます:
let options = {
// これをfalseに設定すると、軌道運動中にページとの偶発的な
// インタラクションを防ぐことで、モバイルでのインタラクションがよりスムーズになります。
// デフォルトではtrueです。
disableTouchActions: true,
// これをtrueに設定すると、カメラが常にマウス/タッチの
// 動きの方向に回転するようになります。
// デフォルトではfalseです。
freeRotation: false
};
orbitControl(1, 1, 1, options);
実例
シンタックス
orbitControl([sensitivityX], [sensitivityY], [sensitivityZ], [options])
パラメーター
x軸に沿った動きの感度。デフォルトは1。
y軸に沿った動きの感度。デフォルトは1。
z軸に沿った動きの感度。デフォルトは1。
2つのオプションプロパティdisableTouchActions
とfreeRotation
を持つオブジェクト。両方ともBoolean
型です。disableTouchActions
のデフォルトはtrue
で、freeRotation
のデフォルトはfalse
です。