|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="ko"> |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta charset="utf-8" /> |
| 6 | + <base href="../../../" /> |
| 7 | + <script src="page.js"></script> |
| 8 | + <link type="text/css" rel="stylesheet" href="page.css" /> |
| 9 | +</head> |
| 10 | + |
| 11 | +<body> |
| 12 | + [page:EventDispatcher] → |
| 13 | + |
| 14 | + <h1>슬라이드 볼 컨트롤러([name])</h1> |
| 15 | + |
| 16 | + <p class="desc"> |
| 17 | + ArcballControls 완전한 터치 지원과 고급 내비게이션 기능을 갖춘 가상 궤적구를 통해 카메라를 제어할 수 있습니다.<br> |
| 18 | + 커서/손가락 위치와 움직임은 작은 컨트롤로 표시된 가상 궤적구의 표면에 직관적이고 일관된 카메라 이동에 반사됩니다.커서를 드래그하거나 손가락을 드래그하면 사진기가 공의 중심을 중심으로 안정적으로 회전합니다. (원점으로 돌아가면 사진기가 원래 방향으로 돌아가게 됩니다).<br><br> |
| 19 | + |
| 20 | + 패닝, 확대/축소, 반공 제스처 지원 외에도 arcballcontrols는 두 번의 클릭/클릭을 통해 <i> 포커싱 </i> 기능을 제공하여, 오브젝트의 관심 지점을 가상 트랙볼의 중심으로 직관적으로 이동시킨다.초점은 복잡한 환경에서도 더 나은 검사와 방향을 제공한다.그밖에 |
| 21 | + arcballcontrols는 fov 동작 (아찔한 동작)과 z 축 회전을 허용한다.또한 클립보드를 통해 카메라 상태를 저장하고 복원할 수 있다 (ctrl+c, ctrl+v 단축키를 사용하여 복사 및 붙여넣기 상태).<br><br> |
| 22 | + |
| 23 | + [page:orbitcontrols], [page:trackballcontrols]와 달리 [name]은 애니메이션이 열릴 때 외부에서 호출될 필요가 없다 [page:.update].<br><br> |
| 24 | + |
| 25 | + |
| 26 | + 이 기능을 사용하려면/examples 디렉터리에 있는 모든 파일과 마찬가지로 html 안에 별도로 포함시켜야 한다.。 |
| 27 | + </p> |
| 28 | + |
| 29 | + <h2>수입</h2> |
| 30 | + |
| 31 | + <p> |
| 32 | + [name] 는 애드온이며 명시적으로 가져와야 합니다. |
| 33 | + See [link:#manual/introduction/Installation Installation / Addons]。 |
| 34 | + </p> |
| 35 | + |
| 36 | + <code> |
| 37 | + import { ArcballControls } from 'three/addons/controls/ArcballControls.js'; |
| 38 | + </code> |
| 39 | + |
| 40 | + <h2>코드 예시</h2> |
| 41 | + |
| 42 | + <code> |
| 43 | + const renderer = new THREE.WebGLRenderer(); |
| 44 | + renderer.setSize( window.innerWidth, window.innerHeight ); |
| 45 | + document.body.appendChild( renderer.domElement ); |
| 46 | + |
| 47 | + const scene = new THREE.Scene(); |
| 48 | + |
| 49 | + const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); |
| 50 | + |
| 51 | + const controls = new ArcballControls( camera, renderer.domElement, scene ); |
| 52 | + |
| 53 | + controls.addEventListener( 'change', function () { |
| 54 | + |
| 55 | + renderer.render( scene, camera ); |
| 56 | + |
| 57 | + } ); |
| 58 | + |
| 59 | + //controls.update() must be called after any manual changes to the camera's transform |
| 60 | + camera.position.set( 0, 20, 100 ); |
| 61 | + controls.update(); |
| 62 | + </code> |
| 63 | + |
| 64 | + <h2>예시</h2> |
| 65 | + |
| 66 | + <p>[example:misc_controls_arcball misc / controls / arcball ]</p> |
| 67 | + |
| 68 | + <h2>생성자</h2> |
| 69 | + |
| 70 | + <h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement], [param:Scene scene] )</h3> |
| 71 | + <p> |
| 72 | + [page:Camera camera]:(필수) 제어해야 할 카메라입니다.객체가 장면 자체가 아닌 한 카메라는 다른 객체의 하위 객체가 될 수 없습니다.<br><br> |
| 73 | + |
| 74 | + [page:HTMLDOMElement domElement]: 이벤트 리스너를 위한 HTML 요소.<br><br> |
| 75 | + |
| 76 | + [page:Scene scene]:카메라가 렌더링한 장면입니다.표시되지 않으면 위젯을 표시할 수 없습니다. |
| 77 | + </p> |
| 78 | + |
| 79 | + <h2>이벤트</h2> |
| 80 | + |
| 81 | + <h3>change</h3> |
| 82 | + <p> |
| 83 | + 작은 컨트롤이 카메라를 변경할 때 작동합니다. |
| 84 | + </p> |
| 85 | + |
| 86 | + <h3>start</h3> |
| 87 | + <p> |
| 88 | + 상호작용이 시작될 때 촉발된다. |
| 89 | + </p> |
| 90 | + |
| 91 | + <h3>end</h3> |
| 92 | + <p> |
| 93 | + 상호 작용이 완료되었을 때 촉발된다. |
| 94 | + </p> |
| 95 | + |
| 96 | + <h2>특성</h2> |
| 97 | + |
| 98 | + <h3>[property:Boolean adjustNearFar]</h3> |
| 99 | + <p> |
| 100 | + true 라면 확대/축소할 때마다 카메라의 근거리 엔드와 원격 엔드를 조정하여 원래의 근거리 엔드와 원격 엔드의 보이는 부분을 동일하게 유지하려고 한다 ([page:PerspectiveCamera] 제한).기본값은 false입니다. |
| 101 | + |
| 102 | + </p> |
| 103 | + |
| 104 | + <h3>[property:Camera camera]</h3> |
| 105 | + <p> |
| 106 | + 카메라가 조종됩니다. |
| 107 | + </p> |
| 108 | + |
| 109 | + <h3>[property:Boolean cursorZoom]</h3> |
| 110 | + <p> |
| 111 | + 크기 조정을 조정하려면 true로 설정했습니다. |
| 112 | + </p> |
| 113 | + |
| 114 | + <h3> |
| 115 | + [property:Float dampingFactor]</h3> |
| 116 | + <p> |
| 117 | + [page:.enableanimations] 가 true인 경우 감쇠 관성을 사용한다. |
| 118 | + </p> |
| 119 | + |
| 120 | + <h3>[property:HTMLDOMElement domElement]</h3> |
| 121 | + <p> |
| 122 | + HTMLDOMElement 마우스/터치 이벤트를 듣는 데 사용합니다.이것은 생성자 (생성자)에 전달되어야 한다.여기에서 변경하면 새 이벤트 리스너가 설정되지 않습니다. |
| 123 | + </p> |
| 124 | + |
| 125 | + <h3>[property:Boolean enabled]</h3> |
| 126 | + <p> |
| 127 | + 'false'로 설정되면 작은 컨트롤은 더 이상 사용자 상호작용에 응답하지 않습니다.기본값은'true'이다. |
| 128 | + </p> |
| 129 | + |
| 130 | + <h3>[property:Boolean enableAnimations]</h3> |
| 131 | + <p> |
| 132 | + true로 설정하여 회전 (감쇠)과 초점 맞추기 동작을 위한 애니메이션을 활성화합니다.기본값은 true입니다. |
| 133 | + </p> |
| 134 | + |
| 135 | + <h3>[property:Boolean enableGrid]</h3> |
| 136 | + <p> |
| 137 | + true로 설정하면 패닝 동작을 할 때 모드가 나타날 것입니다 (데스크톱 상호 작용할 때만).기본값은 false입니다. |
| 138 | + </p> |
| 139 | + |
| 140 | + <h3>[property:Boolean enablePan]</h3> |
| 141 | + <p> |
| 142 | + 카메라 펴기를 사용하거나 사용하지 않습니다.기본값은 true입니다. |
| 143 | + </p> |
| 144 | + |
| 145 | + <h3>[property:Boolean enableRotate]</h3> |
| 146 | + <p> |
| 147 | + 카메라 회전을 사용하거나 사용하지 않습니다.기본값은 true입니다. |
| 148 | + </p> |
| 149 | + |
| 150 | + <h3>[property:Boolean enableZoom]</h3> |
| 151 | + <p> |
| 152 | + 카메라 줌을 사용하거나 사용하지 않습니다. |
| 153 | + </p> |
| 154 | + |
| 155 | + <h3>[property:Float focusAnimationTime]</h3> |
| 156 | + <p> |
| 157 | + 초점 애니메이션의 지속 시간입니다. |
| 158 | + </p> |
| 159 | + |
| 160 | + <h3>[property:Float maxDistance]</h3> |
| 161 | + <p> |
| 162 | + 최대 이동 거리(다만 [page:PerspectiveCamera]).무한대로 묵인하다. |
| 163 | + </p> |
| 164 | + |
| 165 | + <h3>[property:Float maxZoom]</h3> |
| 166 | + <p> |
| 167 | + 최대 배율 값입니다(다만 [page:OrthographicCamera]).무한대로 묵인하다. |
| 168 | + </p> |
| 169 | + |
| 170 | + <h3>[property:Float minDistance]</h3> |
| 171 | + <p> |
| 172 | + 최소 이동 거리(다만 [page:PerspectiveCamera])。기본값은 0입니다。 |
| 173 | + </p> |
| 174 | + |
| 175 | + <h3>[property:Float minZoom]</h3> |
| 176 | + <p> |
| 177 | + 최소 크기 조정(다만 [page:OrthographicCamera] )。기본값은 0입니다。 |
| 178 | + </p> |
| 179 | + |
| 180 | + <h3>[property:Float radiusFactor]</h3> |
| 181 | + <p> |
| 182 | + 화면 너비와 높이에 대한 위젯의 크기입니다. 기본값은 0.67이다。 |
| 183 | + </p> |
| 184 | + |
| 185 | + <h3>[property:Float rotateSpeed]</h3> |
| 186 | + <p> |
| 187 | + 회전 속도.기본값은 1입니다. |
| 188 | + </p> |
| 189 | + |
| 190 | + <h3>[property:Float scaleFactor]</h3> |
| 191 | + <p> |
| 192 | + 확대/축소 작업을 수행할 때 사용할 확대/축소 요인입니다. |
| 193 | + </p> |
| 194 | + |
| 195 | + <h3>[property:Scene scene]</h3> |
| 196 | + <p> |
| 197 | + 카메라가 렌더링한 장면입니다. |
| 198 | + </p> |
| 199 | + |
| 200 | + <h3>[property:Float wMax]</h3> |
| 201 | + <p> |
| 202 | + 회전 애니메이션을 시작할 때 허용되는 최대 각속도입니다. |
| 203 | + </p> |
| 204 | + |
| 205 | + |
| 206 | + <h2>메소드</h2> |
| 207 | + |
| 208 | + <h3>[method:undefined activateGizmos] ( [param:Boolean isActive] )</h3> |
| 209 | + <p> |
| 210 | + 작은 컨트롤을 어느 정도 보이게 합니다. |
| 211 | + </p> |
| 212 | + |
| 213 | + <h3>[method:undefined copyState] ()</h3> |
| 214 | + <p> |
| 215 | + 현재 상태를 클립보드에 복사 (읽을 수 있는 json 텍스트로). |
| 216 | + </p> |
| 217 | + |
| 218 | + <h3>[method:undefined dispose] ()</h3> |
| 219 | + <p> |
| 220 | + 모든 이벤트 리스너를 삭제하고, 처리할 애니메이션을 취소하며, 장면에서 작은 컨트롤과 그리드를 지운다. |
| 221 | + </p> |
| 222 | + |
| 223 | + <h3>[method:undefined pasteState] ()</h3> |
| 224 | + <p> |
| 225 | + 클립보드에서 컨트롤 상태를 설정합니다. 클립보드가 [page:.copyState]에서 저장된 json 텍스트를 저장한다고 가정한다. |
| 226 | + </p> |
| 227 | + |
| 228 | + <h3>[method:undefined reset] ()</h3> |
| 229 | + 위젯을 마지막 호출 [page:. saveState] 때의 상태나 원래 상태로 초기화합니다. |
| 230 | + </p> |
| 231 | + |
| 232 | + <h3>[method:undefined saveState] ()</h3> |
| 233 | + <p> |
| 234 | + 컨트롤의 현재 상태를 저장합니다.나중에 [page:.reset]을 통해 다시 시작할 수 있다. |
| 235 | + </p> |
| 236 | + |
| 237 | + <h3>[method:undefined setCamera] ( [param:Camera camera] )</h3> |
| 238 | + <p> |
| 239 | + 컨트롤할 카메라를 설정합니다.새 카메라를 제어하려면 호출되어야 합니다. |
| 240 | + </p> |
| 241 | + |
| 242 | + <h3>[method:undefined setGizmosVisible] ( [param:Boolean value] )</h3> |
| 243 | + <p> |
| 244 | + 작은 컨트롤의 보이는 속성을 설정합니다. |
| 245 | + </p> |
| 246 | + |
| 247 | + <h3>[method:undefined setTbRadius] ( [param:Float value] )</h3> |
| 248 | + <p> |
| 249 | + `radiusFactor` 값을 업데이트하고, 작은 위젯을 다시 그리고 `changeEvent` 를 시각적으로 보낸다. |
| 250 | + </p> |
| 251 | + |
| 252 | + <h3>[method:Boolean setMouseAction] ( [param:String operation], mouse, key )</h3> |
| 253 | + <p> |
| 254 | + 실행할 동작과 마우스/키 조합을 지정하여 새로운 마우스 동작을 설정합니다.충돌이 발생하면 기존 것을 대체합니다.<br><br> |
| 255 | + 작업은'rotate','pan','fov','zoom'으로 지정할 수 있다.<br> |
| 256 | + 마우스 입력은 마우스 버튼 0, 1, 2 또는'휠'로 지정할 수 있다.<br> |
| 257 | + 키보드 수정자는'ctrl','shift'또는 null(더 이상 필요하지 않을 경우)로 지정할 수 있다. |
| 258 | + </p> |
| 259 | + |
| 260 | + <h3>[method:Boolean unsetMouseAction] ( mouse, key )</h3> |
| 261 | + <p> |
| 262 | + 마우스/키 조합을 지정하여 마우스 동작을 삭제합니다.<br><br> |
| 263 | + 마우스 입력은 마우스 버튼 0, 1, 2 또는'휠'로 지정할 수 있다.<br> |
| 264 | + 키보드 수정자는'ctrl','shift'또는 null(더 이상 필요하지 않을 경우)로 지정할 수 있다. |
| 265 | + </p> |
| 266 | + |
| 267 | + <h3>[method:undefined update] ()</h3> |
| 268 | + <p> |
| 269 | + 컨트롤 업데이트.수동으로 카메라 변경을 한 후에 호출되어야 합니다. |
| 270 | + </p> |
| 271 | + |
| 272 | + <h3>[method:Raycaster getRaycaster] ()</h3> |
| 273 | + <p> |
| 274 | + 사용자 상호 작용을 위한 [page:raycaster] 객체를 되돌려준다.[name]의 [page:object3d.layer.layers] 속성이 설정되어 있으면 일치하는 값을 사용해야 한다. [page:raycaster.layers |
| 275 | + layers]의 [page:raycaster] 속성, 그렇지 않으면 [name]이 작동되지 않는다. |
| 276 | + </p> |
| 277 | + |
| 278 | + <h2>Source</h2> |
| 279 | + |
| 280 | + <p> |
| 281 | + [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/ArcballControls.js examples/jsm/controls/ArcballControls.js] |
| 282 | + </p> |
| 283 | +</body> |
| 284 | + |
| 285 | +</html> |
0 commit comments