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

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

軌道の制御:orbitControl()

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

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

デバッグモード: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()