p5.Camera

3Dスケッチを表示するためのカメラを記述するクラスです。

p5.Cameraオブジェクトは、3D空間の一部を表示するカメラを表します。 カメラの位置、向き、投影に関する情報を保存します。

WebGLモードでは、デフォルトカメラはp5.Cameraオブジェクトで、 camera()perspective()ortho()frustum()関数で制御できます。 追加のカメラはcreateCamera()で作成し、 setCamera()で有効化できます。

注意:p5.Cameraのメソッドは2つの座標系で動作します:

  • 「ワールド」座標系は、x軸、y軸、z軸に沿った原点との関係で位置を記述します。 例えば、myCamera.setPosition()を呼び出すと、「ワールド」座標を使用して 3D空間にカメラを配置します。
  • 「ローカル」座標系は、カメラの視点から位置を記述します: 左右、上下、前後。例えば、myCamera.move()を呼び出すと、 カメラを自身の軸に沿って移動させます。

実例

シンタックス

p5.Camera(rendererGL)

パラメーター

rendererGL
RendererGL:

WebGLレンダラーのインスタンス

フィールド

eyeX

カメラのx座標。

デフォルトでは、カメラのx座標は「ワールド」空間で0に設定されています。

eyeY

カメラのy座標。

デフォルトでは、カメラのy座標は「ワールド」空間で0に設定されています。

eyeZ

カメラのz座標。

デフォルトでは、カメラのz座標は「ワールド」空間で800に設定されています。

centerX

カメラが向いている場所のx座標。

デフォルトでは、カメラは「ワールド」空間の原点(0, 0, 0)を向いているため、 myCamera.centerXは0です。

centerY

カメラが向いている場所のy座標。

デフォルトでは、カメラは「ワールド」空間の原点(0, 0, 0)を向いているため、 myCamera.centerYは0です。

centerZ

カメラが向いている場所のz座標。

デフォルトでは、カメラは「ワールド」空間の原点(0, 0, 0)を向いているため、 myCamera.centerZは0です。

upX

カメラの「上」ベクトルのx成分。

カメラの「上」ベクトルはそのy軸の向きを決定します。デフォルトでは、 「上」ベクトルは(0, 1, 0)なので、「ローカル」空間での x成分は0です。

upY

カメラの「上」ベクトルのy成分。

カメラの「上」ベクトルはそのy軸の向きを決定します。デフォルトでは、 「上」ベクトルは(0, 1, 0)なので、「ローカル」空間での y成分は1です。

upZ

カメラの「上」ベクトルのz成分。

カメラの「上」ベクトルはそのy軸の向きを決定します。デフォルトでは、 「上」ベクトルは(0, 1, 0)なので、「ローカル」空間での z成分は0です。

メソッド

perspective

カメラに透視投影を設定します。

透視投影では、カメラから遠い形状は近い形状よりも小さく見えます。 この技術は遠近法と呼ばれ、リアルな3Dシーンを作成します。 新しいp5.Cameraオブジェクトではデフォルトで適用されます。

myCamera.perspective()は、カメラの視錐台を変更することで カメラの透視を変更します。視錐台はカメラから見える空間の体積です。 視錐台の形状は、上部が切り取られたピラミッドです。カメラはピラミッドの 上部があるべき場所に配置され、底面の方向を向いています。 視錐台内のすべてを見ることができます。

最初のパラメータfovyは、カメラの垂直視野角です。 カメラの視野の高さや狭さを表す角度です。例えば、 myCamera.perspective(0.5)を呼び出すと、カメラの垂直視野角を 0.5ラジアンに設定します。デフォルトでは、fovyはスケッチの高さと カメラのデフォルトのz座標(800)に基づいて計算されます。 デフォルトのfovyの計算式は2 * atan(height / 2 / 800)です。

2番目のパラメータaspectは、カメラのアスペクト比です。 上面の幅と高さの比率を表す数値です。例えば、 myCamera.perspective(0.5, 1.5)を呼び出すと、カメラの視野角を 0.5ラジアンに、アスペクト比を1.5に設定し、正方形のキャンバスで 形状がより細く見えるようになります。デフォルトでは、aspectwidth / heightに設定されます。

3番目のパラメータnearは、カメラから近平面までの距離です。 例えば、myCamera.perspective(0.5, 1.5, 100)を呼び出すと、 カメラの視野角を0.5ラジアン、アスペクト比を1.5に設定し、近平面を カメラから100ピクセルの位置に配置します。カメラから100ピクセル未満の 距離に描画された形状は表示されません。デフォルトでは、near0.1 * 800に設定されており、これはカメラと原点の デフォルト距離の1/10です。

4番目のパラメータfarは、カメラから遠平面までの距離です。 例えば、myCamera.perspective(0.5, 1.5, 100, 10000)を 呼び出すと、カメラの視野角を0.5ラジアン、アスペクト比を1.5に設定し、 近平面をカメラから100ピクセルの位置に、遠平面をカメラから10,000ピクセルの 位置に配置します。カメラから10,000ピクセル以上離れた位置に描画された 形状は表示されません。デフォルトでは、far10 * 800に 設定されており、これはカメラと原点のデフォルト距離の10倍です。

ortho

カメラに正投影を設定します。

正投影では、同じサイズの形状は、カメラからの距離に関係なく 常に同じサイズに見えます。

myCamera.ortho()は、カメラの視錐台を切頂ピラミッドから 直方体に変更することで、カメラの透視を変更します。視錐台は カメラから見える空間の体積です。カメラは視錐台の前に配置され、 視錐台内のすべてを見ることができます。myCamera.ortho()には 視錐台を定義するための6つのオプションパラメータがあります。

最初の4つのパラメータleftrightbottomtopは、 視錐台の側面、底面、上面の座標を設定します。例えば、 myCamera.ortho(-100, 100, 200, -200)を呼び出すと、 幅200ピクセル、高さ400ピクセルの視錐台が作成されます。デフォルトでは、 これらの寸法はスケッチの幅と高さに基づいて設定されます。 myCamera.ortho(-width / 2, width / 2, -height / 2, height / 2)のようになります。

最後の2つのパラメータnearfarは、カメラからの 視錐台の近平面と遠平面の距離を設定します。例えば、 myCamera.ortho(-100, 100, 200, -200, 50, 1000)を呼び出すと、 幅200ピクセル、高さ400ピクセル、カメラから50ピクセルの位置から始まり、 カメラから1,000ピクセルの位置で終わる視錐台が作成されます。 デフォルトでは、nearfarはそれぞれ0と max(width, height) + 800に設定されています。

frustum

カメラの視錐台を設定します。

視錐台投影では、カメラから遠い形状は近い形状よりも小さく見えます。 この技術は遠近法と呼ばれ、リアルな3Dシーンを作成します。

myCamera.frustum()は、カメラの視錐台を変更することで カメラの透視を変更します。視錐台はカメラから見える空間の体積です。 視錐台の形状は、上部が切り取られたピラミッドです。カメラは ピラミッドの上部があるべき場所に配置され、底面の方向を向いています。 視錐台内のすべてを見ることができます。

最初の4つのパラメータleftrightbottomtopは、 視錐台の側面、底面、上面の座標を設定します。例えば、 myCamera.frustum(-100, 100, 200, -200)を呼び出すと、 幅200ピクセル、高さ400ピクセルの視錐台が作成されます。デフォルトでは、 これらの座標はスケッチの幅と高さに基づいて設定されます。 myCamera.frustum(-width / 20, width / 20, height / 20, -height / 20)のようになります。

最後の2つのパラメータnearfarは、カメラからの 視錐台の近平面と遠平面の距離を設定します。例えば、 myCamera.frustum(-100, 100, 200, -200, 50, 1000)を呼び出すと、 幅200ピクセル、高さ400ピクセル、カメラから50ピクセルの位置から始まり、 カメラから1,000ピクセルの位置で終わる視錐台が作成されます。 デフォルトでは、nearは0.1 * 800に設定されており、 これはカメラと原点のデフォルト距離の1/10です。far10 * 800に設定されており、これはカメラと原点の デフォルト距離の10倍です。

roll

カメラを時計回り/反時計回りに回転させます。

ロールはカメラの向きを変えずに回転させます。回転は カメラの「ローカル」空間で行われます。

パラメータangleは、カメラが回転すべき角度です。 正の角度を渡すと、例えばmyCamera.roll(0.001)のように、 カメラは反時計回りに回転します。 負の角度を渡すと、例えばmyCamera.roll(-0.001)のように、 カメラは時計回りに回転します。

注意:角度は現在の angleMode()に基づいて解釈されます。

pan

カメラを左右に回転させます。

パンはカメラの位置を変えずに回転させます。回転は カメラの「ローカル」空間で行われます。

パラメータangleは、カメラが回転すべき角度です。 正の角度を渡すと、例えばmyCamera.pan(0.001)のように、 カメラは右に回転します。 負の角度を渡すと、例えばmyCamera.pan(-0.001)のように、 カメラは左に回転します。

注意:角度は現在の angleMode()に基づいて解釈されます。

tilt

カメラを上下に回転させます。

チルトはカメラの位置を変えずに回転させます。回転は カメラの「ローカル」空間で行われます。

パラメータangleは、カメラが回転すべき角度です。 正の角度を渡すと、例えばmyCamera.tilt(0.001)のように、 カメラは下に回転します。 負の角度を渡すと、例えばmyCamera.tilt(-0.001)のように、 カメラは上に回転します。

注意:角度は現在の angleMode()に基づいて解釈されます。

lookAt

カメラを特定の位置に向けます。

myCamera.lookAt()は、カメラの位置を変えずに その向きを変更します。

パラメータxyzは、カメラが向けるべき 「ワールド」空間の座標です。例えば、 myCamera.lookAt(10, 20, 30)を呼び出すと、 カメラは座標(10, 20, 30)に向けられます。

camera

カメラの位置と向きを設定します。

myCamera.camera()を使用すると、オブジェクトを異なる角度から 見ることができます。9つのパラメータがあり、すべてオプションです。

最初の3つのパラメータxyzは、「ワールド」空間における カメラの位置の座標です。例えば、myCamera.camera(0, 0, 0)を 呼び出すと、カメラは原点(0, 0, 0)に配置されます。 デフォルトでは、カメラは(0, 0, 800)に配置されています。

次の3つのパラメータcenterXcenterYcenterZは、 「ワールド」空間でカメラが向いている点の座標です。 例えば、myCamera.camera(0, 0, 0, 10, 20, 30)を呼び出すと、 カメラは原点(0, 0, 0)に配置され、(10, 20, 30)を向きます。 デフォルトでは、カメラは原点(0, 0, 0)を向いています。

最後の3つのパラメータupXupYupZは、 「ローカル」空間におけるカメラの「上」ベクトルの成分です。 「上」ベクトルはカメラのy軸の向きを決定します。例えば、 myCamera.camera(0, 0, 0, 10, 20, 30, 0, -1, 0)を呼び出すと、 カメラは原点(0, 0, 0)に配置され、(10, 20, 30)を向き、 「上」ベクトルを(0, -1, 0)に設定します。これは上下逆さまに 持っているようなものです。デフォルトでは、「上」ベクトルは (0, 1, 0)です。

move

カメラの向きを変えずに、その「ローカル」軸に沿って移動させます。

パラメータxyzは、カメラが移動すべき 距離です。例えば、myCamera.move(10, 20, 30)を呼び出すと、 カメラは「ローカル」空間で右に10ピクセル、下に20ピクセル、 後ろに30ピクセル移動します。

setPosition

カメラの向きを変えずに、「ワールド」空間でのカメラの位置を 設定します。

パラメータxyzは、カメラを配置すべき 座標です。例えば、myCamera.setPosition(10, 20, 30)を 呼び出すと、カメラは「ワールド」空間の座標(10, 20, 30)に 配置されます。

set

別のカメラをコピーして、カメラの位置、向き、投影を設定します。

パラメータcamは、コピーするp5.Cameraオブジェクトです。 例えば、cam2.set(cam1)を呼び出すと、cam1の 設定を使用してcam2が設定されます。

slerp

2つの他のカメラの中間の値にカメラの位置と向きを設定します。

myCamera.slerp()は、球面線形補間を使用して、2つの他のカメラの 中間の位置と向きを計算します。これは、2つの視点間をスムーズに 遷移させるのに役立ちます。

最初の2つのパラメータcam0cam1は、現在のカメラの 設定に使用されるp5.Cameraオブジェクトです。

3番目のパラメータamtは、cam0cam1の間で 補間する量です。0.0はカメラの位置と向きをcam0と等しく保ち、 0.5はcam0cam1の中間に設定し、1.0は位置と向きを cam1と等しくします。

例えば、myCamera.slerp(cam0, cam1, 0.1)を呼び出すと、 カメラの位置と向きをcam0に非常に近く設定します。 myCamera.slerp(cam0, cam1, 0.9)を呼び出すと、カメラの 位置と向きをcam1に非常に近く設定します。

注意:すべてのカメラは同じ投影を使用する必要があります。

Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/p5.Camera.js and open a pull request!

関連するリファレンス