TrackballControls.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. [page:Controls] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. [name] is similar to [page:OrbitControls]. However, it does not maintain a constant camera [page:Object3D.up up] vector.
  14. That means if the camera orbits over the “north” and “south” poles, it does not flip to stay "right side up".
  15. </p>
  16. <h2>Import</h2>
  17. <p>
  18. [name] is an add-on, and must be imported explicitly.
  19. See [link:#manual/introduction/Installation Installation / Addons].
  20. </p>
  21. <code>
  22. import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
  23. </code>
  24. <h2>Examples</h2>
  25. <p>[example:misc_controls_trackball misc / controls / trackball ]</p>
  26. <h2>Constructor</h2>
  27. <h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
  28. <p>
  29. [page:Camera camera]: The camera of the rendered scene.
  30. </p>
  31. <p>
  32. [page:HTMLDOMElement domElement]: The HTML element used for event listeners. (optional)
  33. </p>
  34. <p>
  35. Creates a new instance of [name].
  36. </p>
  37. <h2>Events</h2>
  38. <h3>change</h3>
  39. <p>
  40. Fires when the camera has been transformed by the controls.
  41. </p>
  42. <h3>start</h3>
  43. <p>
  44. Fires when an interaction (e.g. touch) was initiated.
  45. </p>
  46. <h3>end</h3>
  47. <p>
  48. Fires when an interaction has finished.
  49. </p>
  50. <h2>Properties</h2>
  51. <p>See the base [page:Controls] class for common properties.</p>
  52. <h3>[property:Number dynamicDampingFactor]</h3>
  53. <p>
  54. Defines the intensity of damping. Only considered if [page:.staticMoving staticMoving] is set to `false`. Default is `0.2`.
  55. </p>
  56. <h3>[property:Array keys]</h3>
  57. This array holds keycodes for controlling interactions.
  58. <ul>
  59. <li>When the first defined key is pressed, all mouse interactions (left, middle, right) performs orbiting.</li>
  60. <li>When the second defined key is pressed, all mouse interactions (left, middle, right) performs zooming.</li>
  61. <li>When the third defined key is pressed, all mouse interactions (left, middle, right) performs panning.</li>
  62. </ul>
  63. Default is *KeyA, KeyS, KeyD* which represents A, S, D.
  64. <h3>[property:Number maxDistance]</h3>
  65. <p>
  66. How far you can dolly out ( [page:PerspectiveCamera] only ). Default is `Infinity`.
  67. </p>
  68. <h3>[property:Number minDistance]</h3>
  69. <p>
  70. How far you can dolly in ( [page:PerspectiveCamera] only ). Default is *0*.
  71. </p>
  72. <h3>[property:Float maxZoom]</h3>
  73. <p>
  74. How far you can zoom out ( [page:OrthographicCamera] only ). Default is `Infinity`.
  75. </p>
  76. <h3>[property:Float minZoom]</h3>
  77. <p>
  78. How far you can zoom in ( [page:OrthographicCamera] only ). Default is *0*.
  79. </p>
  80. <h3>
  81. [property:Object mouseButtons]</h3>
  82. This object contains references to the mouse actions used by the controls.
  83. <ul>
  84. <li>.LEFT is assigned with `THREE.MOUSE.ROTATE`</li>
  85. <li>.MIDDLE is assigned with `THREE.MOUSE.ZOOM`</li>
  86. <li>.RIGHT is assigned with `THREE.MOUSE.PAN`</li>
  87. </ul>
  88. <h3>[property:Boolean noPan]</h3>
  89. <p>
  90. Whether or not panning is disabled. Default is `false`.
  91. </p>
  92. <h3>[property:Boolean noRotate]</h3>
  93. <p>
  94. Whether or not rotation is disabled. Default is `false`.
  95. </p>
  96. <h3>[property:Boolean noZoom]</h3>
  97. <p>
  98. Whether or not zooming is disabled. Default is `false`.
  99. </p>
  100. <h3>[property:Number panSpeed]</h3>
  101. <p>
  102. The pan speed. Default is `0.3`.
  103. </p>
  104. <h3>[property:Number rotateSpeed]</h3>
  105. <p>
  106. The rotation speed. Default is `1.0`.
  107. </p>
  108. <h3>[property:Object screen]</h3>
  109. Represents the properties of the screen. Automatically set when [page:.handleResize handleResize]() is called.
  110. <ul>
  111. <li>left: Represents the offset in pixels to the screen's left boundary.</li>
  112. <li>top: Represents the offset in pixels to the screen's top boundary.</li>
  113. <li>width: Represents the screen width in pixels.</li>
  114. <li>height: Represents the screen height in pixels.</li>
  115. </ul>
  116. <h3>[property:Boolean staticMoving]</h3>
  117. <p>
  118. Whether or not damping is disabled. Default is `false`.
  119. </p>
  120. <h3>[property:Vector3 target]</h3>
  121. <p>
  122. The focus point of the controls.
  123. </p>
  124. <h3>[property:Number zoomSpeed]</h3>
  125. <p>
  126. The zoom speed. Default is `1.2`.
  127. </p>
  128. <h2>Methods</h2>
  129. <p>See the base [page:Controls] class for common methods.</p>
  130. <h3>[method:undefined handleResize] ()</h3>
  131. <p>
  132. Should be called if the application window is resized.
  133. </p>
  134. <h3>[method:undefined reset] ()</h3>
  135. <p>
  136. Resets the controls to its initial state.
  137. </p>
  138. <h2>Source</h2>
  139. <p>
  140. [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/TrackballControls.js examples/jsm/controls/TrackballControls.js]
  141. </p>
  142. </body>
  143. </html>