def setup
createCanvas(100, 100, WEBGL)
cam = createCamera
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の設定に依存 | ○ | PI / 3 |
| aspect | アスペクト比 | ○ | width / height | |
| near | 視野(視錐台)の近い平面までの距離 | ○ | (height/2) / tan(PI/6) / 10 | |
| far | 視野(視錐台)の遠い平面までの距離 | ○ | (height/2) / tan(PI/6) * 10 |
なし
・perspectiveメソッドと frustumメソッドはほぼ同じ機能です。
(指定する引数が異なります)。
・視野(視錐台)のイメージについては下記のサイトなどを参考にしてください。
p5.js WebGL入門 5 カメラ
6. カメラ（processing 3D入門）