def setup
createCanvas(100, 100, WEBGL)
cam = createCamera
cam.camera(0, 0, (height/2) / tan(PI/6))
cam.perspective(PI / 3.0, width / height, 0.1, 500)
end
def draw
background(200)
orbitControl
normalMaterial
rotateX(-0.3)
rotateY(-0.2)
translate(0, 0, -50)
push do
translate(-15, 0, sin(frameCount / 30) * 95)
box(30)
end
push do
translate(15, 0, sin(frameCount / 30 + PI) * 95)
box(30)
end
end
[p5.js] (p5.Camera.obj).perspective
カメラに透視投影による視野(視錐台)を設定します。
| 引数名 | 内容 | 備考 | オプション | デフォルト値 |
|---|---|---|---|---|
| fovy | 垂直視野角 | angleModeの設定に依存 | ○ | 2 * atan(height / 2 / 800) |
| aspect | アスペクト比 | ○ | width / height | |
| near | 視野(視錐台)の近い平面までの距離 | ○ | 0.1 * 800 | |
| far | 視野(視錐台)の遠い平面までの距離 | ○ | 10 * 800 |
obj (メソッドを呼び出した p5cameraオブジェクト自身)
・perspectiveメソッドと frustumメソッドはほぼ同じ機能です。
(指定する引数が異なります)。
・p5.jsのバージョンアップに伴い、以下のようにデフォルト値が変更されています。
| 引数名 | 内容 | デフォルト値 | 旧仕様のデフォルト値 |
|---|---|---|---|
| fovy | 垂直視野角 | 2 * atan(height / 2 / 800) | PI / 3 |
| aspect | アスペクト比 | width / height | 同左 ※変更なし |
| near | 視野(視錐台)の近い平面までの距離 | 0.1 * 800 | (height/2) / tan(PI/6) / 10 |
| far | 視野(視錐台)の遠い平面までの距離 | 10 * 800 | (height/2) / tan(PI/6) * 10 |
・rbCanvas/p5の v0.5.1までとは 3Dの見え方が若干異なりますので、
(p5camera).cameraメソッドや (p5camera).frustumメソッドの
デフォルト値変更の情報もあわせて参照して、各パラメータなどを調整してください。
・視野(視錐台)のイメージについては下記のサイトなどを参考にしてください。
p5.js WebGL入門 5 カメラ
6. カメラ（processing 3D入門）