[page:EventDispatcher] →

슬라이드 볼 컨트롤러([name])

ArcballControls 완전한 터치 지원과 고급 내비게이션 기능을 갖춘 가상 궤적구를 통해 카메라를 제어할 수 있습니다.
커서/손가락 위치와 움직임은 작은 컨트롤로 표시된 가상 궤적구의 표면에 직관적이고 일관된 카메라 이동에 반사됩니다.커서를 드래그하거나 손가락을 드래그하면 사진기가 공의 중심을 중심으로 안정적으로 회전합니다. (원점으로 돌아가면 사진기가 원래 방향으로 돌아가게 됩니다).

패닝, 확대/축소, 반공 제스처 지원 외에도 arcballcontrols는 두 번의 클릭/클릭을 통해 포커싱 기능을 제공하여, 오브젝트의 관심 지점을 가상 트랙볼의 중심으로 직관적으로 이동시킨다.초점은 복잡한 환경에서도 더 나은 검사와 방향을 제공한다.그밖에 arcballcontrols는 fov 동작 (아찔한 동작)과 z 축 회전을 허용한다.또한 클립보드를 통해 카메라 상태를 저장하고 복원할 수 있다 (ctrl+c, ctrl+v 단축키를 사용하여 복사 및 붙여넣기 상태).

[page:orbitcontrols], [page:trackballcontrols]와 달리 [name]은 애니메이션이 열릴 때 외부에서 호출될 필요가 없다 [page:.update].

이 기능을 사용하려면/examples 디렉터리에 있는 모든 파일과 마찬가지로 html 안에 별도로 포함시켜야 한다.。

수입

[name] 는 애드온이며 명시적으로 가져와야 합니다. See [link:#manual/introduction/Installation Installation / Addons]。


			import { ArcballControls } from 'three/addons/controls/ArcballControls.js';

코드 예시


		const renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		const scene = new THREE.Scene();

		const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

		const controls = new ArcballControls( camera, renderer.domElement, scene );

		controls.addEventListener( 'change', function () {

			renderer.render( scene, camera );

		} );

		//controls.update() must be called after any manual changes to the camera's transform
		camera.position.set( 0, 20, 100 );
		controls.update();

예시

[example:misc_controls_arcball misc / controls / arcball ]

생성자

[name]( [param:Camera camera], [param:HTMLDOMElement domElement], [param:Scene scene] )

[page:Camera camera]：(필수) 제어해야 할 카메라입니다.객체가 장면 자체가 아닌 한 카메라는 다른 객체의 하위 객체가 될 수 없습니다.

[page:HTMLDOMElement domElement]： 이벤트 리스너를 위한 HTML 요소.

[page:Scene scene]：카메라가 렌더링한 장면입니다.표시되지 않으면 위젯을 표시할 수 없습니다.

이벤트

change

작은 컨트롤이 카메라를 변경할 때 작동합니다.

start

상호작용이 시작될 때 촉발된다.

end

상호 작용이 완료되었을 때 촉발된다.

특성

[property:Boolean adjustNearFar]

true 라면 확대/축소할 때마다 카메라의 근거리 엔드와 원격 엔드를 조정하여 원래의 근거리 엔드와 원격 엔드의 보이는 부분을 동일하게 유지하려고 한다 ([page:PerspectiveCamera] 제한).기본값은 false입니다.

[property:Camera camera]

카메라가 조종됩니다.

[property:Boolean cursorZoom]

크기 조정을 조정하려면 true로 설정했습니다.

[property:Float dampingFactor]

[page:.enableanimations] 가 true인 경우 감쇠 관성을 사용한다.

[property:HTMLDOMElement domElement]

HTMLDOMElement 마우스/터치 이벤트를 듣는 데 사용합니다.이것은 생성자 (생성자)에 전달되어야 한다.여기에서 변경하면 새 이벤트 리스너가 설정되지 않습니다.

[property:Boolean enabled]

'false'로 설정되면 작은 컨트롤은 더 이상 사용자 상호작용에 응답하지 않습니다.기본값은'true'이다.

[property:Boolean enableAnimations]

true로 설정하여 회전 (감쇠)과 초점 맞추기 동작을 위한 애니메이션을 활성화합니다.기본값은 true입니다.

[property:Boolean enableGrid]

true로 설정하면 패닝 동작을 할 때 모드가 나타날 것입니다 (데스크톱 상호 작용할 때만).기본값은 false입니다.

[property:Boolean enablePan]

카메라 펴기를 사용하거나 사용하지 않습니다.기본값은 true입니다.

[property:Boolean enableRotate]

카메라 회전을 사용하거나 사용하지 않습니다.기본값은 true입니다.

[property:Boolean enableZoom]

카메라 줌을 사용하거나 사용하지 않습니다.

[property:Float focusAnimationTime]

초점 애니메이션의 지속 시간입니다.

[property:Float maxDistance]

최대 이동 거리(다만 [page:PerspectiveCamera]).무한대로 묵인하다.

[property:Float maxZoom]

최대 배율 값입니다(다만 [page:OrthographicCamera]).무한대로 묵인하다.

[property:Float minDistance]

최소 이동 거리(다만 [page:PerspectiveCamera])。기본값은 0입니다。

[property:Float minZoom]

최소 크기 조정（다만 [page:OrthographicCamera] ）。기본값은 0입니다。

[property:Float radiusFactor]

화면 너비와 높이에 대한 위젯의 크기입니다. 기본값은 0.67이다。

[property:Float rotateSpeed]

회전 속도.기본값은 1입니다.

[property:Float scaleFactor]

확대/축소 작업을 수행할 때 사용할 확대/축소 요인입니다.

[property:Scene scene]

카메라가 렌더링한 장면입니다.

[property:Float wMax]

회전 애니메이션을 시작할 때 허용되는 최대 각속도입니다.

메소드

[method:undefined activateGizmos] ( [param:Boolean isActive] )

작은 컨트롤을 어느 정도 보이게 합니다.

[method:undefined copyState] ()

현재 상태를 클립보드에 복사 (읽을 수 있는 json 텍스트로).

[method:undefined dispose] ()

모든 이벤트 리스너를 삭제하고, 처리할 애니메이션을 취소하며, 장면에서 작은 컨트롤과 그리드를 지운다.

[method:undefined pasteState] ()

클립보드에서 컨트롤 상태를 설정합니다. 클립보드가 [page:.copyState]에서 저장된 json 텍스트를 저장한다고 가정한다.

[method:undefined reset] ()

위젯을 마지막 호출 [page:. saveState] 때의 상태나 원래 상태로 초기화합니다.

[method:undefined saveState] ()

컨트롤의 현재 상태를 저장합니다.나중에 [page:.reset]을 통해 다시 시작할 수 있다.

[method:undefined setCamera] ( [param:Camera camera] )

컨트롤할 카메라를 설정합니다.새 카메라를 제어하려면 호출되어야 합니다.

[method:undefined setGizmosVisible] ( [param:Boolean value] )

작은 컨트롤의 보이는 속성을 설정합니다.

[method:undefined setTbRadius] ( [param:Float value] )

`radiusFactor` 값을 업데이트하고, 작은 위젯을 다시 그리고 `changeEvent` 를 시각적으로 보낸다.

[method:Boolean setMouseAction] ( [param:String operation], mouse, key )

실행할 동작과 마우스/키 조합을 지정하여 새로운 마우스 동작을 설정합니다.충돌이 발생하면 기존 것을 대체합니다.

작업은'rotate','pan','fov','zoom'으로 지정할 수 있다.
마우스 입력은 마우스 버튼 0, 1, 2 또는'휠'로 지정할 수 있다.
키보드 수정자는'ctrl','shift'또는 null(더 이상 필요하지 않을 경우)로 지정할 수 있다.

[method:Boolean unsetMouseAction] ( mouse, key )

마우스/키 조합을 지정하여 마우스 동작을 삭제합니다.

마우스 입력은 마우스 버튼 0, 1, 2 또는'휠'로 지정할 수 있다.
키보드 수정자는'ctrl','shift'또는 null(더 이상 필요하지 않을 경우)로 지정할 수 있다.

[method:undefined update] ()

컨트롤 업데이트.수동으로 카메라 변경을 한 후에 호출되어야 합니다.

[method:Raycaster getRaycaster] ()

사용자 상호 작용을 위한 [page:raycaster] 객체를 되돌려준다.[name]의 [page:object3d.layer.layers] 속성이 설정되어 있으면 일치하는 값을 사용해야 한다. [page:raycaster.layers layers]의 [page:raycaster] 속성, 그렇지 않으면 [name]이 작동되지 않는다.

Source

[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/ArcballControls.js examples/jsm/controls/ArcballControls.js]