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