リファレンス orbitControl()

orbitControl()

マウス、トラックパッド、またはタッチスクリーンを使用して、ユーザーが3Dスケッチの周りを軌道運動できるようにします。

3Dスケッチは想像上のカメラを通して見られます。draw()関数内でorbitControl()を呼び出すことで、 ユーザーがカメラの位置を変更できるようになります:

function draw() {
  background(200);

  // マウスで軌道運動を有効にする。
  orbitControl();

  // スケッチの残りの部分。
}

左クリックしてドラッグするか、スワイプ動作をすると、スケッチの中心を軸にカメラ位置が回転します。 右クリックしてドラッグするか、マルチスワイプすると、回転せずにカメラ位置がパンします。 マウスホイール(スクロール)を使用するか、ピンチイン/アウトすると、カメラがスケッチの中心から 遠ざかったり近づいたりします。

最初の3つのパラメータ、sensitivityXsensitivityYsensitivityZはオプションです。これらは各軸に沿った動きに対するスケッチの 感度を設定する数値です。例えば、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])

パラメーター

sensitivityX
Number:

x軸に沿った動きの感度。デフォルトは1。

sensitivityY
Number:

y軸に沿った動きの感度。デフォルトは1。

sensitivityZ
Number:

z軸に沿った動きの感度。デフォルトは1。

options
Object:

2つのオプションプロパティdisableTouchActionsfreeRotationを持つオブジェクト。両方とも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!

関連するリファレンス