레퍼런스 orbitControl()

orbitControl()

마우스, 트랙패드, 또는 터치스크린을 사용하여 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])

매개변수

sensitivityX
Number:

x축을 따라 움직임에 대한 감도. 기본값은 1입니다.

sensitivityY
Number:

y축을 따라 움직임에 대한 감도. 기본값은 1입니다.

sensitivityZ
Number:

z축을 따라 움직임에 대한 감도. 기본값은 1입니다.

options
Object:

disableTouchActionsfreeRotation 두 가지 선택 사항 속성을 가진 객체입니다. 둘 다 Boolean입니다. disableTouchActions는 기본값이 true이고, freeRotation은 기본값이 false입니다.

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

관련 레퍼런스