마우스, 트랙패드, 또는 터치스크린을 사용하여 3D 스케치 주위를 회전할 수 있게 해줍니다.
3D 스케치는 가상의 카메라를 통해 보여집니다. draw() 함수 내에서 orbitControl()
을 호출하면 사용자가 카메라의 위치를 변경할 수 있습니다:
function draw() { background(200); <p> // Enable orbiting with the mouse. </p> orbitControl(); <p> // Rest of sketch. </p> }
마우스 좌클릭 상태에서 드래그, 또는 스와이프 동작은 스케치 중심을 기준으로 카메라 위치를 회전시킵니다. 마우스 우클릭 상태에서 드래그, 또는 멀티 스와이프 동작은 회전 없이 카메라 위치를 이동시킵니다. 마우스 휠 사용(스크롤), 또는 핀치 인/아웃 동작은 카메라를 스케치의 중심에서 더 가깝게 하거나 멀어지게 합니다.
첫 세 매개변수 sensitivityX
, sensitivityY
, sensitivityZ
는 선택 사항입니다. 이들은 각 축에 따른 스케치의 움직임 감도를 설정하는 숫자입니다. 예를 들어, orbitControl(1, 2, -1)
을 호출하면 x축의 움직임은 기본값을 유지하고, y축의 움직임에 대해 두 배 더 민감하게 하며, z축의 움직임은 반대 방향이 됩니다. 기본적으로 모든 감도값은 1입니다.
네 번째 매개변수 options
도 선택 사항입니다. 이는 회전의 행동을 변경하는 객체입니다. 예를 들어, orbitControl(1, 1, 1, options)
을 호출하면 기본 감도 값을 유지하면서 options
로 설정된 행동들을 변경합니다. 객체는 다음 속성을 가질 수 있습니다:
let options = { // Setting this to false makes mobile interactions smoother by // preventing accidental interactions with the page while orbiting. // By default, it's true. disableTouchActions: true, <p> // Setting this to true makes the camera always rotate in the // direction the mouse/touch is moving. // By default, it's false. freeRotation: false };</p> <p>orbitControl(1, 1, 1, options); </p>
예제
구문
orbitControl([sensitivityX], [sensitivityY], [sensitivityZ], [options])
매개변수
x축을 따라 움직임에 대한 감도. 기본값은 1입니다.
y축을 따라 움직임에 대한 감도. 기본값은 1입니다.
z축을 따라 움직임에 대한 감도. 기본값은 1입니다.
disableTouchActions
와 freeRotation
두 가지 선택 사항 속성을 가진 객체입니다. 둘 다 Boolean
입니다. disableTouchActions
는 기본값이 true
이고, freeRotation
은 기본값이 false
입니다.