元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【p5.js】カメラの軌道制御とデバッグモード:orbitControl(),debugMode()

「カメラの軌道制御」と「デバッグモード」の方法について書きます。カメラを操作できるようになると様々な方向から3D空間を見ることができます。モデルを配置して、様々な方向から見てみると面白いです。デバッグモードは、開発中に表示位置や方向を確認するのに使います。

軌道の制御:orbitControl()

マウスやトラックパッドを使ってカメラの軌道を制御する。動きは以下の通り。

  • 左クリックでドラッグするとcanvasの中心を中心として回転する。
  • 右クリックでドラッグするとカメラが前後左右に移動する。
  • マウスホイールを使用するとカメラがcanvasの中心に近づいたり、遠ざかったりする。

f:id:shiroyuki2020:20210609144627g:plain

デバッグモード:debugMode()

3D空間を視覚化して、表示位置や方向を確認する。

  • スケッチ内の地面を表すグリッドを表示する。
  • X軸、Y軸、Z軸を表すアイコンが表示される。
  • グリッドと軸でスケッチ内の3D空間を視覚化する。

軌道の制御とデバッグモードのデモ

function setup() {
    createCanvas(400, 400, WEBGL);
    camera(0, -80, 400, 0, 0, 0, 0, 1, 0);  // カメラの配置
    debugMode();    // デバッグモード
}
function draw() {
    background(200);
    orbitControl(); //軌道の制御
    rotateY(0.5);
    box(30, 50);
}

まとめ

  • 軌道の制御:orbitControl()
  • デバッグモード:debugMode()