TransformControls-es6.js 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548
  1. const BoxGeometry = THREE.BoxGeometry,
  2. BufferGeometry = THREE.BufferGeometry,
  3. CylinderGeometry = THREE.CylinderGeometry,
  4. DoubleSide = THREE.DoubleSide,
  5. Euler = THREE.Euler,
  6. Float32BufferAttribute = THREE.Float32BufferAttribute,
  7. Line = THREE.Line,
  8. LineBasicMaterial = THREE.LineBasicMaterial,
  9. Matrix4 = THREE.Matrix4,
  10. Mesh = THREE.Mesh,
  11. MeshBasicMaterial = THREE.MeshBasicMaterial,
  12. Object3D = THREE.Object3D,
  13. OctahedronGeometry = THREE.OctahedronGeometry,
  14. PlaneGeometry = THREE.PlaneGeometry,
  15. Quaternion = THREE.Quaternion,
  16. Raycaster = THREE.Raycaster,
  17. SphereGeometry = THREE.SphereGeometry,
  18. TorusGeometry = THREE.TorusGeometry,
  19. Vector3 = THREE.Vector3
  20. const _raycaster = new Raycaster();
  21. const _tempVector = new Vector3();
  22. const _tempVector2 = new Vector3();
  23. const _tempQuaternion = new Quaternion();
  24. const _unit = {
  25. X: new Vector3( 1, 0, 0 ),
  26. Y: new Vector3( 0, 1, 0 ),
  27. Z: new Vector3( 0, 0, 1 )
  28. };
  29. const _changeEvent = { type: 'change' };
  30. const _mouseDownEvent = { type: 'mouseDown' };
  31. const _mouseUpEvent = { type: 'mouseUp', mode: null };
  32. const _objectChangeEvent = { type: 'objectChange' };
  33. class TransformControls extends Object3D {
  34. constructor( camera, domElement ) {
  35. super();
  36. if ( domElement === undefined ) {
  37. console.warn( 'THREE.TransformControls: The second parameter "domElement" is now mandatory.' );
  38. domElement = document;
  39. }
  40. this.visible = false;
  41. this.domElement = domElement;
  42. this.domElement.style.touchAction = 'none'; // disable touch scroll
  43. const _gizmo = new TransformControlsGizmo();
  44. this._gizmo = _gizmo;
  45. this.add( _gizmo );
  46. const _plane = new TransformControlsPlane();
  47. this._plane = _plane;
  48. this.add( _plane );
  49. const scope = this;
  50. // Defined getter, setter and store for a property
  51. function defineProperty( propName, defaultValue ) {
  52. let propValue = defaultValue;
  53. Object.defineProperty( scope, propName, {
  54. get: function () {
  55. return propValue !== undefined ? propValue : defaultValue;
  56. },
  57. set: function ( value ) {
  58. if ( propValue !== value ) {
  59. propValue = value;
  60. _plane[ propName ] = value;
  61. _gizmo[ propName ] = value;
  62. scope.dispatchEvent( { type: propName + '-changed', value: value } );
  63. scope.dispatchEvent( _changeEvent );
  64. }
  65. }
  66. } );
  67. scope[ propName ] = defaultValue;
  68. _plane[ propName ] = defaultValue;
  69. _gizmo[ propName ] = defaultValue;
  70. }
  71. // Define properties with getters/setter
  72. // Setting the defined property will automatically trigger change event
  73. // Defined properties are passed down to gizmo and plane
  74. defineProperty( 'camera', camera );
  75. defineProperty( 'object', undefined );
  76. defineProperty( 'enabled', true );
  77. defineProperty( 'axis', null );
  78. defineProperty( 'mode', 'translate' );
  79. defineProperty( 'translationSnap', null );
  80. defineProperty( 'rotationSnap', null );
  81. defineProperty( 'scaleSnap', null );
  82. defineProperty( 'space', 'world' );
  83. defineProperty( 'size', 1 );
  84. defineProperty( 'dragging', false );
  85. defineProperty( 'showX', true );
  86. defineProperty( 'showY', true );
  87. defineProperty( 'showZ', true );
  88. // Reusable utility variables
  89. const worldPosition = new Vector3();
  90. const worldPositionStart = new Vector3();
  91. const worldQuaternion = new Quaternion();
  92. const worldQuaternionStart = new Quaternion();
  93. const cameraPosition = new Vector3();
  94. const cameraQuaternion = new Quaternion();
  95. const pointStart = new Vector3();
  96. const pointEnd = new Vector3();
  97. const rotationAxis = new Vector3();
  98. const rotationAngle = 0;
  99. const eye = new Vector3();
  100. // TODO: remove properties unused in plane and gizmo
  101. defineProperty( 'worldPosition', worldPosition );
  102. defineProperty( 'worldPositionStart', worldPositionStart );
  103. defineProperty( 'worldQuaternion', worldQuaternion );
  104. defineProperty( 'worldQuaternionStart', worldQuaternionStart );
  105. defineProperty( 'cameraPosition', cameraPosition );
  106. defineProperty( 'cameraQuaternion', cameraQuaternion );
  107. defineProperty( 'pointStart', pointStart );
  108. defineProperty( 'pointEnd', pointEnd );
  109. defineProperty( 'rotationAxis', rotationAxis );
  110. defineProperty( 'rotationAngle', rotationAngle );
  111. defineProperty( 'eye', eye );
  112. this._offset = new Vector3();
  113. this._startNorm = new Vector3();
  114. this._endNorm = new Vector3();
  115. this._cameraScale = new Vector3();
  116. this._parentPosition = new Vector3();
  117. this._parentQuaternion = new Quaternion();
  118. this._parentQuaternionInv = new Quaternion();
  119. this._parentScale = new Vector3();
  120. this._worldScaleStart = new Vector3();
  121. this._worldQuaternionInv = new Quaternion();
  122. this._worldScale = new Vector3();
  123. this._positionStart = new Vector3();
  124. this._quaternionStart = new Quaternion();
  125. this._scaleStart = new Vector3();
  126. this._getPointer = getPointer.bind( this );
  127. this._onPointerDown = onPointerDown.bind( this );
  128. this._onPointerHover = onPointerHover.bind( this );
  129. this._onPointerMove = onPointerMove.bind( this );
  130. this._onPointerUp = onPointerUp.bind( this );
  131. this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
  132. this.domElement.addEventListener( 'pointermove', this._onPointerHover );
  133. this.domElement.addEventListener( 'pointerup', this._onPointerUp );
  134. }
  135. // updateMatrixWorld updates key transformation variables
  136. updateMatrixWorld() {
  137. if ( this.object !== undefined ) {
  138. this.object.updateMatrixWorld();
  139. if ( this.object.parent === null ) {
  140. console.error( 'TransformControls: The attached 3D object must be a part of the scene graph.' );
  141. } else {
  142. this.object.parent.matrixWorld.decompose( this._parentPosition, this._parentQuaternion, this._parentScale );
  143. }
  144. this.object.matrixWorld.decompose( this.worldPosition, this.worldQuaternion, this._worldScale );
  145. this._parentQuaternionInv.copy( this._parentQuaternion ).invert();
  146. this._worldQuaternionInv.copy( this.worldQuaternion ).invert();
  147. }
  148. this.camera.updateMatrixWorld();
  149. this.camera.matrixWorld.decompose( this.cameraPosition, this.cameraQuaternion, this._cameraScale );
  150. this.eye.copy( this.cameraPosition ).sub( this.worldPosition ).normalize();
  151. super.updateMatrixWorld( this );
  152. }
  153. pointerHover( pointer ) {
  154. if ( this.object === undefined || this.dragging === true ) return;
  155. _raycaster.setFromCamera( pointer, this.camera );
  156. const intersect = intersectObjectWithRay( this._gizmo.picker[ this.mode ], _raycaster );
  157. if ( intersect ) {
  158. this.axis = intersect.object.name;
  159. } else {
  160. this.axis = null;
  161. }
  162. }
  163. pointerDown( pointer ) {
  164. if ( this.object === undefined || this.dragging === true || pointer.button !== 0 ) return;
  165. if ( this.axis !== null ) {
  166. _raycaster.setFromCamera( pointer, this.camera );
  167. const planeIntersect = intersectObjectWithRay( this._plane, _raycaster, true );
  168. if ( planeIntersect ) {
  169. this.object.updateMatrixWorld();
  170. this.object.parent.updateMatrixWorld();
  171. this._positionStart.copy( this.object.position );
  172. this._quaternionStart.copy( this.object.quaternion );
  173. this._scaleStart.copy( this.object.scale );
  174. this.object.matrixWorld.decompose( this.worldPositionStart, this.worldQuaternionStart, this._worldScaleStart );
  175. this.pointStart.copy( planeIntersect.point ).sub( this.worldPositionStart );
  176. }
  177. this.dragging = true;
  178. _mouseDownEvent.mode = this.mode;
  179. this.dispatchEvent( _mouseDownEvent );
  180. }
  181. }
  182. pointerMove( pointer ) {
  183. const axis = this.axis;
  184. const mode = this.mode;
  185. const object = this.object;
  186. let space = this.space;
  187. if ( mode === 'scale' ) {
  188. space = 'local';
  189. } else if ( axis === 'E' || axis === 'XYZE' || axis === 'XYZ' ) {
  190. space = 'world';
  191. }
  192. if ( object === undefined || axis === null || this.dragging === false || pointer.button !== - 1 ) return;
  193. _raycaster.setFromCamera( pointer, this.camera );
  194. const planeIntersect = intersectObjectWithRay( this._plane, _raycaster, true );
  195. if ( ! planeIntersect ) return;
  196. this.pointEnd.copy( planeIntersect.point ).sub( this.worldPositionStart );
  197. if ( mode === 'translate' ) {
  198. // Apply translate
  199. this._offset.copy( this.pointEnd ).sub( this.pointStart );
  200. if ( space === 'local' && axis !== 'XYZ' ) {
  201. this._offset.applyQuaternion( this._worldQuaternionInv );
  202. }
  203. if ( axis.indexOf( 'X' ) === - 1 ) this._offset.x = 0;
  204. if ( axis.indexOf( 'Y' ) === - 1 ) this._offset.y = 0;
  205. if ( axis.indexOf( 'Z' ) === - 1 ) this._offset.z = 0;
  206. if ( space === 'local' && axis !== 'XYZ' ) {
  207. this._offset.applyQuaternion( this._quaternionStart ).divide( this._parentScale );
  208. } else {
  209. this._offset.applyQuaternion( this._parentQuaternionInv ).divide( this._parentScale );
  210. }
  211. object.position.copy( this._offset ).add( this._positionStart );
  212. // Apply translation snap
  213. if ( this.translationSnap ) {
  214. if ( space === 'local' ) {
  215. object.position.applyQuaternion( _tempQuaternion.copy( this._quaternionStart ).invert() );
  216. if ( axis.search( 'X' ) !== - 1 ) {
  217. object.position.x = Math.round( object.position.x / this.translationSnap ) * this.translationSnap;
  218. }
  219. if ( axis.search( 'Y' ) !== - 1 ) {
  220. object.position.y = Math.round( object.position.y / this.translationSnap ) * this.translationSnap;
  221. }
  222. if ( axis.search( 'Z' ) !== - 1 ) {
  223. object.position.z = Math.round( object.position.z / this.translationSnap ) * this.translationSnap;
  224. }
  225. object.position.applyQuaternion( this._quaternionStart );
  226. }
  227. if ( space === 'world' ) {
  228. if ( object.parent ) {
  229. object.position.add( _tempVector.setFromMatrixPosition( object.parent.matrixWorld ) );
  230. }
  231. if ( axis.search( 'X' ) !== - 1 ) {
  232. object.position.x = Math.round( object.position.x / this.translationSnap ) * this.translationSnap;
  233. }
  234. if ( axis.search( 'Y' ) !== - 1 ) {
  235. object.position.y = Math.round( object.position.y / this.translationSnap ) * this.translationSnap;
  236. }
  237. if ( axis.search( 'Z' ) !== - 1 ) {
  238. object.position.z = Math.round( object.position.z / this.translationSnap ) * this.translationSnap;
  239. }
  240. if ( object.parent ) {
  241. object.position.sub( _tempVector.setFromMatrixPosition( object.parent.matrixWorld ) );
  242. }
  243. }
  244. }
  245. } else if ( mode === 'scale' ) {
  246. if ( axis.search( 'XYZ' ) !== - 1 ) {
  247. let d = this.pointEnd.length() / this.pointStart.length();
  248. if ( this.pointEnd.dot( this.pointStart ) < 0 ) d *= - 1;
  249. _tempVector2.set( d, d, d );
  250. } else {
  251. _tempVector.copy( this.pointStart );
  252. _tempVector2.copy( this.pointEnd );
  253. _tempVector.applyQuaternion( this._worldQuaternionInv );
  254. _tempVector2.applyQuaternion( this._worldQuaternionInv );
  255. _tempVector2.divide( _tempVector );
  256. if ( axis.search( 'X' ) === - 1 ) {
  257. _tempVector2.x = 1;
  258. }
  259. if ( axis.search( 'Y' ) === - 1 ) {
  260. _tempVector2.y = 1;
  261. }
  262. if ( axis.search( 'Z' ) === - 1 ) {
  263. _tempVector2.z = 1;
  264. }
  265. }
  266. // Apply scale
  267. object.scale.copy( this._scaleStart ).multiply( _tempVector2 );
  268. if ( this.scaleSnap ) {
  269. if ( axis.search( 'X' ) !== - 1 ) {
  270. object.scale.x = Math.round( object.scale.x / this.scaleSnap ) * this.scaleSnap || this.scaleSnap;
  271. }
  272. if ( axis.search( 'Y' ) !== - 1 ) {
  273. object.scale.y = Math.round( object.scale.y / this.scaleSnap ) * this.scaleSnap || this.scaleSnap;
  274. }
  275. if ( axis.search( 'Z' ) !== - 1 ) {
  276. object.scale.z = Math.round( object.scale.z / this.scaleSnap ) * this.scaleSnap || this.scaleSnap;
  277. }
  278. }
  279. } else if ( mode === 'rotate' ) {
  280. this._offset.copy( this.pointEnd ).sub( this.pointStart );
  281. const ROTATION_SPEED = 20 / this.worldPosition.distanceTo( _tempVector.setFromMatrixPosition( this.camera.matrixWorld ) );
  282. if ( axis === 'E' ) {
  283. this.rotationAxis.copy( this.eye );
  284. this.rotationAngle = this.pointEnd.angleTo( this.pointStart );
  285. this._startNorm.copy( this.pointStart ).normalize();
  286. this._endNorm.copy( this.pointEnd ).normalize();
  287. this.rotationAngle *= ( this._endNorm.cross( this._startNorm ).dot( this.eye ) < 0 ? 1 : - 1 );
  288. } else if ( axis === 'XYZE' ) {
  289. this.rotationAxis.copy( this._offset ).cross( this.eye ).normalize();
  290. this.rotationAngle = this._offset.dot( _tempVector.copy( this.rotationAxis ).cross( this.eye ) ) * ROTATION_SPEED;
  291. } else if ( axis === 'X' || axis === 'Y' || axis === 'Z' ) {
  292. this.rotationAxis.copy( _unit[ axis ] );
  293. _tempVector.copy( _unit[ axis ] );
  294. if ( space === 'local' ) {
  295. _tempVector.applyQuaternion( this.worldQuaternion );
  296. }
  297. this.rotationAngle = this._offset.dot( _tempVector.cross( this.eye ).normalize() ) * ROTATION_SPEED;
  298. }
  299. // Apply rotation snap
  300. if ( this.rotationSnap ) this.rotationAngle = Math.round( this.rotationAngle / this.rotationSnap ) * this.rotationSnap;
  301. // Apply rotate
  302. if ( space === 'local' && axis !== 'E' && axis !== 'XYZE' ) {
  303. object.quaternion.copy( this._quaternionStart );
  304. object.quaternion.multiply( _tempQuaternion.setFromAxisAngle( this.rotationAxis, this.rotationAngle ) ).normalize();
  305. } else {
  306. this.rotationAxis.applyQuaternion( this._parentQuaternionInv );
  307. object.quaternion.copy( _tempQuaternion.setFromAxisAngle( this.rotationAxis, this.rotationAngle ) );
  308. object.quaternion.multiply( this._quaternionStart ).normalize();
  309. }
  310. }
  311. this.dispatchEvent( _changeEvent );
  312. this.dispatchEvent( _objectChangeEvent );
  313. }
  314. pointerUp( pointer ) {
  315. if ( pointer.button !== 0 ) return;
  316. if ( this.dragging && ( this.axis !== null ) ) {
  317. _mouseUpEvent.mode = this.mode;
  318. this.dispatchEvent( _mouseUpEvent );
  319. }
  320. this.dragging = false;
  321. this.axis = null;
  322. }
  323. dispose() {
  324. this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
  325. this.domElement.removeEventListener( 'pointermove', this._onPointerHover );
  326. this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
  327. this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
  328. this.traverse( function ( child ) {
  329. if ( child.geometry ) child.geometry.dispose();
  330. if ( child.material ) child.material.dispose();
  331. } );
  332. }
  333. // Set current object
  334. attach( object ) {
  335. this.object = object;
  336. this.visible = true;
  337. return this;
  338. }
  339. // Detatch from object
  340. detach() {
  341. this.object = undefined;
  342. this.visible = false;
  343. this.axis = null;
  344. return this;
  345. }
  346. getRaycaster() {
  347. return _raycaster;
  348. }
  349. // TODO: deprecate
  350. getMode() {
  351. return this.mode;
  352. }
  353. setMode( mode ) {
  354. this.mode = mode;
  355. }
  356. setTranslationSnap( translationSnap ) {
  357. this.translationSnap = translationSnap;
  358. }
  359. setRotationSnap( rotationSnap ) {
  360. this.rotationSnap = rotationSnap;
  361. }
  362. setScaleSnap( scaleSnap ) {
  363. this.scaleSnap = scaleSnap;
  364. }
  365. setSize( size ) {
  366. this.size = size;
  367. }
  368. setSpace( space ) {
  369. this.space = space;
  370. }
  371. update() {
  372. console.warn( 'THREE.TransformControls: update function has no more functionality and therefore has been deprecated.' );
  373. }
  374. }
  375. TransformControls.prototype.isTransformControls = true;
  376. // mouse / touch event handlers
  377. function getPointer( event ) {
  378. if ( this.domElement.ownerDocument.pointerLockElement ) {
  379. return {
  380. x: 0,
  381. y: 0,
  382. button: event.button
  383. };
  384. } else {
  385. const rect = this.domElement.getBoundingClientRect();
  386. return {
  387. x: ( event.clientX - rect.left ) / rect.width * 2 - 1,
  388. y: - ( event.clientY - rect.top ) / rect.height * 2 + 1,
  389. button: event.button
  390. };
  391. }
  392. }
  393. function onPointerHover( event ) {
  394. if ( ! this.enabled ) return;
  395. switch ( event.pointerType ) {
  396. case 'mouse':
  397. case 'pen':
  398. this.pointerHover( this._getPointer( event ) );
  399. break;
  400. }
  401. }
  402. function onPointerDown( event ) {
  403. if ( ! this.enabled ) return;
  404. //event.preventDefault();
  405. // event.stopPropagation();
  406. this.domElement.setPointerCapture( event.pointerId );
  407. this.domElement.addEventListener( 'pointermove', this._onPointerMove );
  408. this.pointerHover( this._getPointer( event ) );
  409. this.pointerDown( this._getPointer( event ) );
  410. }
  411. function onPointerMove( event ) {
  412. if ( ! this.enabled ) return;
  413. //event.preventDefault();
  414. // event.stopPropagation();
  415. this.pointerMove( this._getPointer( event ) );
  416. }
  417. function onPointerUp( event ) {
  418. if ( ! this.enabled ) return;
  419. //restoreEventPropagation(event);
  420. //event.preventDefault();
  421. //event.stopPropagation();
  422. this.domElement.releasePointerCapture( event.pointerId );
  423. this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
  424. this.pointerUp( this._getPointer( event ) );
  425. }
  426. function intersectObjectWithRay( object, raycaster, includeInvisible ) {
  427. const allIntersections = raycaster.intersectObject( object, true );
  428. for ( let i = 0; i < allIntersections.length; i ++ ) {
  429. if ( allIntersections[ i ].object.visible || includeInvisible ) {
  430. return allIntersections[ i ];
  431. }
  432. }
  433. return false;
  434. }
  435. //
  436. // Reusable utility variables
  437. const _tempEuler = new Euler();
  438. const _alignVector = new Vector3( 0, 1, 0 );
  439. const _zeroVector = new Vector3( 0, 0, 0 );
  440. const _lookAtMatrix = new Matrix4();
  441. const _tempQuaternion2 = new Quaternion();
  442. const _identityQuaternion = new Quaternion();
  443. const _dirVector = new Vector3();
  444. const _tempMatrix = new Matrix4();
  445. const _unitX = new Vector3( 1, 0, 0 );
  446. const _unitY = new Vector3( 0, 1, 0 );
  447. const _unitZ = new Vector3( 0, 0, 1 );
  448. const _v1 = new Vector3();
  449. const _v2 = new Vector3();
  450. const _v3 = new Vector3();
  451. class TransformControlsGizmo extends Object3D {
  452. constructor() {
  453. super();
  454. this.type = 'TransformControlsGizmo';
  455. // shared materials
  456. const gizmoMaterial = new MeshBasicMaterial( {
  457. depthTest: false,
  458. depthWrite: false,
  459. fog: false,
  460. toneMapped: false,
  461. transparent: true
  462. } );
  463. const gizmoLineMaterial = new LineBasicMaterial( {
  464. depthTest: false,
  465. depthWrite: false,
  466. fog: false,
  467. toneMapped: false,
  468. transparent: true
  469. } );
  470. // Make unique material for each axis/color
  471. const matInvisible = gizmoMaterial.clone();
  472. matInvisible.opacity = 0.15;
  473. const matHelper = gizmoLineMaterial.clone();
  474. matHelper.opacity = 0.5;
  475. const matRed = gizmoMaterial.clone();
  476. matRed.color.setHex( 0xff0000 );
  477. const matGreen = gizmoMaterial.clone();
  478. matGreen.color.setHex( 0x00ff00 );
  479. const matBlue = gizmoMaterial.clone();
  480. matBlue.color.setHex( 0x0000ff );
  481. const matRedTransparent = gizmoMaterial.clone();
  482. matRedTransparent.color.setHex( 0xff0000 );
  483. matRedTransparent.opacity = 0.5;
  484. const matGreenTransparent = gizmoMaterial.clone();
  485. matGreenTransparent.color.setHex( 0x00ff00 );
  486. matGreenTransparent.opacity = 0.5;
  487. const matBlueTransparent = gizmoMaterial.clone();
  488. matBlueTransparent.color.setHex( 0x0000ff );
  489. matBlueTransparent.opacity = 0.5;
  490. const matWhiteTransparent = gizmoMaterial.clone();
  491. matWhiteTransparent.opacity = 0.25;
  492. const matYellowTransparent = gizmoMaterial.clone();
  493. matYellowTransparent.color.setHex( 0xffff00 );
  494. matYellowTransparent.opacity = 0.25;
  495. const matYellow = gizmoMaterial.clone();
  496. matYellow.color.setHex( 0xffff00 );
  497. const matGray = gizmoMaterial.clone();
  498. matGray.color.setHex( 0x787878 );
  499. // reusable geometry
  500. const arrowGeometry = new CylinderGeometry( 0, 0.04, 0.1, 12 );
  501. arrowGeometry.translate( 0, 0.05, 0 );
  502. const scaleHandleGeometry = new BoxGeometry( 0.08, 0.08, 0.08 );
  503. scaleHandleGeometry.translate( 0, 0.04, 0 );
  504. const lineGeometry = new BufferGeometry();
  505. lineGeometry.setAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 1, 0, 0 ], 3 ) );
  506. const lineGeometry2 = new CylinderGeometry( 0.0075, 0.0075, 0.5, 3 );
  507. lineGeometry2.translate( 0, 0.25, 0 );
  508. function CircleGeometry( radius, arc ) {
  509. const geometry = new TorusGeometry( radius, 0.0075, 3, 64, arc * Math.PI * 2 );
  510. geometry.rotateY( Math.PI / 2 );
  511. geometry.rotateX( Math.PI / 2 );
  512. return geometry;
  513. }
  514. // Special geometry for transform helper. If scaled with position vector it spans from [0,0,0] to position
  515. function TranslateHelperGeometry() {
  516. const geometry = new BufferGeometry();
  517. geometry.setAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 1, 1, 1 ], 3 ) );
  518. return geometry;
  519. }
  520. // Gizmo definitions - custom hierarchy definitions for setupGizmo() function
  521. const gizmoTranslate = {
  522. X: [
  523. [ new Mesh( arrowGeometry, matRed ), [ 0.5, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
  524. [ new Mesh( arrowGeometry, matRed ), [ - 0.5, 0, 0 ], [ 0, 0, Math.PI / 2 ]],
  525. [ new Mesh( lineGeometry2, matRed ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]]
  526. ],
  527. Y: [
  528. [ new Mesh( arrowGeometry, matGreen ), [ 0, 0.5, 0 ]],
  529. [ new Mesh( arrowGeometry, matGreen ), [ 0, - 0.5, 0 ], [ Math.PI, 0, 0 ]],
  530. [ new Mesh( lineGeometry2, matGreen ) ]
  531. ],
  532. Z: [
  533. [ new Mesh( arrowGeometry, matBlue ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ]],
  534. [ new Mesh( arrowGeometry, matBlue ), [ 0, 0, - 0.5 ], [ - Math.PI / 2, 0, 0 ]],
  535. [ new Mesh( lineGeometry2, matBlue ), null, [ Math.PI / 2, 0, 0 ]]
  536. ],
  537. XYZ: [
  538. [ new Mesh( new OctahedronGeometry( 0.1, 0 ), matWhiteTransparent.clone() ), [ 0, 0, 0 ]]
  539. ],
  540. XY: [
  541. [ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matBlueTransparent.clone() ), [ 0.15, 0.15, 0 ]]
  542. ],
  543. YZ: [
  544. [ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matRedTransparent.clone() ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]
  545. ],
  546. XZ: [
  547. [ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matGreenTransparent.clone() ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]
  548. ]
  549. };
  550. const pickerTranslate = {
  551. X: [
  552. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0.3, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
  553. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ - 0.3, 0, 0 ], [ 0, 0, Math.PI / 2 ]]
  554. ],
  555. Y: [
  556. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0.3, 0 ]],
  557. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, - 0.3, 0 ], [ 0, 0, Math.PI ]]
  558. ],
  559. Z: [
  560. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, 0.3 ], [ Math.PI / 2, 0, 0 ]],
  561. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, - 0.3 ], [ - Math.PI / 2, 0, 0 ]]
  562. ],
  563. XYZ: [
  564. [ new Mesh( new OctahedronGeometry( 0.2, 0 ), matInvisible ) ]
  565. ],
  566. XY: [
  567. [ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0.15, 0 ]]
  568. ],
  569. YZ: [
  570. [ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]
  571. ],
  572. XZ: [
  573. [ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]
  574. ]
  575. };
  576. const helperTranslate = {
  577. START: [
  578. [ new Mesh( new OctahedronGeometry( 0.01, 2 ), matHelper ), null, null, null, 'helper' ]
  579. ],
  580. END: [
  581. [ new Mesh( new OctahedronGeometry( 0.01, 2 ), matHelper ), null, null, null, 'helper' ]
  582. ],
  583. DELTA: [
  584. [ new Line( TranslateHelperGeometry(), matHelper ), null, null, null, 'helper' ]
  585. ],
  586. X: [
  587. [ new Line( lineGeometry, matHelper.clone() ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]
  588. ],
  589. Y: [
  590. [ new Line( lineGeometry, matHelper.clone() ), [ 0, - 1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], 'helper' ]
  591. ],
  592. Z: [
  593. [ new Line( lineGeometry, matHelper.clone() ), [ 0, 0, - 1e3 ], [ 0, - Math.PI / 2, 0 ], [ 1e6, 1, 1 ], 'helper' ]
  594. ]
  595. };
  596. const gizmoRotate = {
  597. XYZE: [
  598. [ new Mesh( CircleGeometry( 0.5, 1 ), matGray ), null, [ 0, Math.PI / 2, 0 ]]
  599. ],
  600. X: [
  601. [ new Mesh( CircleGeometry( 0.5, 0.5 ), matRed ) ]
  602. ],
  603. Y: [
  604. [ new Mesh( CircleGeometry( 0.5, 0.5 ), matGreen ), null, [ 0, 0, - Math.PI / 2 ]]
  605. ],
  606. Z: [
  607. [ new Mesh( CircleGeometry( 0.5, 0.5 ), matBlue ), null, [ 0, Math.PI / 2, 0 ]]
  608. ],
  609. E: [
  610. [ new Mesh( CircleGeometry( 0.75, 1 ), matYellowTransparent ), null, [ 0, Math.PI / 2, 0 ]]
  611. ]
  612. };
  613. const helperRotate = {
  614. AXIS: [
  615. [ new Line( lineGeometry, matHelper.clone() ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]
  616. ]
  617. };
  618. const pickerRotate = {
  619. XYZE: [
  620. [ new Mesh( new SphereGeometry( 0.25, 10, 8 ), matInvisible ) ]
  621. ],
  622. X: [
  623. [ new Mesh( new TorusGeometry( 0.5, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, - Math.PI / 2, - Math.PI / 2 ]],
  624. ],
  625. Y: [
  626. [ new Mesh( new TorusGeometry( 0.5, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ]],
  627. ],
  628. Z: [
  629. [ new Mesh( new TorusGeometry( 0.5, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
  630. ],
  631. E: [
  632. [ new Mesh( new TorusGeometry( 0.75, 0.1, 2, 24 ), matInvisible ) ]
  633. ]
  634. };
  635. const gizmoScale = {
  636. X: [
  637. [ new Mesh( scaleHandleGeometry, matRed ), [ 0.5, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
  638. [ new Mesh( lineGeometry2, matRed ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
  639. [ new Mesh( scaleHandleGeometry, matRed ), [ - 0.5, 0, 0 ], [ 0, 0, Math.PI / 2 ]],
  640. ],
  641. Y: [
  642. [ new Mesh( scaleHandleGeometry, matGreen ), [ 0, 0.5, 0 ]],
  643. [ new Mesh( lineGeometry2, matGreen ) ],
  644. [ new Mesh( scaleHandleGeometry, matGreen ), [ 0, - 0.5, 0 ], [ 0, 0, Math.PI ]],
  645. ],
  646. Z: [
  647. [ new Mesh( scaleHandleGeometry, matBlue ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ]],
  648. [ new Mesh( lineGeometry2, matBlue ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ]],
  649. [ new Mesh( scaleHandleGeometry, matBlue ), [ 0, 0, - 0.5 ], [ - Math.PI / 2, 0, 0 ]]
  650. ],
  651. XY: [
  652. [ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matBlueTransparent ), [ 0.15, 0.15, 0 ]]
  653. ],
  654. YZ: [
  655. [ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matRedTransparent ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]
  656. ],
  657. XZ: [
  658. [ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matGreenTransparent ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]
  659. ],
  660. XYZ: [
  661. [ new Mesh( new BoxGeometry( 0.1, 0.1, 0.1 ), matWhiteTransparent.clone() ) ],
  662. ]
  663. };
  664. const pickerScale = {
  665. X: [
  666. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0.3, 0, 0 ], [ 0, 0, - Math.PI / 2 ]],
  667. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ - 0.3, 0, 0 ], [ 0, 0, Math.PI / 2 ]]
  668. ],
  669. Y: [
  670. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0.3, 0 ]],
  671. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, - 0.3, 0 ], [ 0, 0, Math.PI ]]
  672. ],
  673. Z: [
  674. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, 0.3 ], [ Math.PI / 2, 0, 0 ]],
  675. [ new Mesh( new CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, - 0.3 ], [ - Math.PI / 2, 0, 0 ]]
  676. ],
  677. XY: [
  678. [ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0.15, 0 ]],
  679. ],
  680. YZ: [
  681. [ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]],
  682. ],
  683. XZ: [
  684. [ new Mesh( new BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]],
  685. ],
  686. XYZ: [
  687. [ new Mesh( new BoxGeometry( 0.2, 0.2, 0.2 ), matInvisible ), [ 0, 0, 0 ]],
  688. ]
  689. };
  690. const helperScale = {
  691. X: [
  692. [ new Line( lineGeometry, matHelper.clone() ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]
  693. ],
  694. Y: [
  695. [ new Line( lineGeometry, matHelper.clone() ), [ 0, - 1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], 'helper' ]
  696. ],
  697. Z: [
  698. [ new Line( lineGeometry, matHelper.clone() ), [ 0, 0, - 1e3 ], [ 0, - Math.PI / 2, 0 ], [ 1e6, 1, 1 ], 'helper' ]
  699. ]
  700. };
  701. // Creates an Object3D with gizmos described in custom hierarchy definition.
  702. function setupGizmo( gizmoMap ) {
  703. const gizmo = new Object3D();
  704. for ( const name in gizmoMap ) {
  705. for ( let i = gizmoMap[ name ].length; i --; ) {
  706. const object = gizmoMap[ name ][ i ][ 0 ].clone();
  707. const position = gizmoMap[ name ][ i ][ 1 ];
  708. const rotation = gizmoMap[ name ][ i ][ 2 ];
  709. const scale = gizmoMap[ name ][ i ][ 3 ];
  710. const tag = gizmoMap[ name ][ i ][ 4 ];
  711. // name and tag properties are essential for picking and updating logic.
  712. object.name = name;
  713. object.tag = tag;
  714. if ( position ) {
  715. object.position.set( position[ 0 ], position[ 1 ], position[ 2 ] );
  716. }
  717. if ( rotation ) {
  718. object.rotation.set( rotation[ 0 ], rotation[ 1 ], rotation[ 2 ] );
  719. }
  720. if ( scale ) {
  721. object.scale.set( scale[ 0 ], scale[ 1 ], scale[ 2 ] );
  722. }
  723. object.updateMatrix();
  724. const tempGeometry = object.geometry.clone();
  725. tempGeometry.applyMatrix4( object.matrix );
  726. object.geometry = tempGeometry;
  727. object.renderOrder = Infinity;
  728. object.position.set( 0, 0, 0 );
  729. object.rotation.set( 0, 0, 0 );
  730. object.scale.set( 1, 1, 1 );
  731. gizmo.add( object );
  732. }
  733. }
  734. return gizmo;
  735. }
  736. // Gizmo creation
  737. this.gizmo = {};
  738. this.picker = {};
  739. this.helper = {};
  740. this.add( this.gizmo[ 'translate' ] = setupGizmo( gizmoTranslate ) );
  741. this.add( this.gizmo[ 'rotate' ] = setupGizmo( gizmoRotate ) );
  742. this.add( this.gizmo[ 'scale' ] = setupGizmo( gizmoScale ) );
  743. this.add( this.picker[ 'translate' ] = setupGizmo( pickerTranslate ) );
  744. this.add( this.picker[ 'rotate' ] = setupGizmo( pickerRotate ) );
  745. this.add( this.picker[ 'scale' ] = setupGizmo( pickerScale ) );
  746. this.add( this.helper[ 'translate' ] = setupGizmo( helperTranslate ) );
  747. this.add( this.helper[ 'rotate' ] = setupGizmo( helperRotate ) );
  748. this.add( this.helper[ 'scale' ] = setupGizmo( helperScale ) );
  749. // Pickers should be hidden always
  750. this.picker[ 'translate' ].visible = false;
  751. this.picker[ 'rotate' ].visible = false;
  752. this.picker[ 'scale' ].visible = false;
  753. }
  754. // updateMatrixWorld will update transformations and appearance of individual handles
  755. updateMatrixWorld( force ) {
  756. const space = ( this.mode === 'scale' ) ? 'local' : this.space; // scale always oriented to local rotation
  757. const quaternion = ( space === 'local' ) ? this.worldQuaternion : _identityQuaternion;
  758. // Show only gizmos for current transform mode
  759. this.gizmo[ 'translate' ].visible = this.mode === 'translate';
  760. this.gizmo[ 'rotate' ].visible = this.mode === 'rotate';
  761. this.gizmo[ 'scale' ].visible = this.mode === 'scale';
  762. this.helper[ 'translate' ].visible = this.mode === 'translate';
  763. this.helper[ 'rotate' ].visible = this.mode === 'rotate';
  764. this.helper[ 'scale' ].visible = this.mode === 'scale';
  765. let handles = [];
  766. handles = handles.concat( this.picker[ this.mode ].children );
  767. handles = handles.concat( this.gizmo[ this.mode ].children );
  768. handles = handles.concat( this.helper[ this.mode ].children );
  769. for ( let i = 0; i < handles.length; i ++ ) {
  770. const handle = handles[ i ];
  771. // hide aligned to camera
  772. handle.visible = true;
  773. handle.rotation.set( 0, 0, 0 );
  774. handle.position.copy( this.worldPosition );
  775. let factor;
  776. if ( this.camera.isOrthographicCamera ) {
  777. factor = ( this.camera.top - this.camera.bottom ) / this.camera.zoom;
  778. } else {
  779. factor = this.worldPosition.distanceTo( this.cameraPosition ) * Math.min( 1.9 * Math.tan( Math.PI * this.camera.fov / 360 ) / this.camera.zoom, 7 );
  780. }
  781. handle.scale.set( 1, 1, 1 ).multiplyScalar( factor * this.size / 4 );
  782. // TODO: simplify helpers and consider decoupling from gizmo
  783. if ( handle.tag === 'helper' ) {
  784. handle.visible = false;
  785. if ( handle.name === 'AXIS' ) {
  786. handle.position.copy( this.worldPositionStart );
  787. handle.visible = !! this.axis;
  788. if ( this.axis === 'X' ) {
  789. _tempQuaternion.setFromEuler( _tempEuler.set( 0, 0, 0 ) );
  790. handle.quaternion.copy( quaternion ).multiply( _tempQuaternion );
  791. if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) > 0.9 ) {
  792. handle.visible = false;
  793. }
  794. }
  795. if ( this.axis === 'Y' ) {
  796. _tempQuaternion.setFromEuler( _tempEuler.set( 0, 0, Math.PI / 2 ) );
  797. handle.quaternion.copy( quaternion ).multiply( _tempQuaternion );
  798. if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) > 0.9 ) {
  799. handle.visible = false;
  800. }
  801. }
  802. if ( this.axis === 'Z' ) {
  803. _tempQuaternion.setFromEuler( _tempEuler.set( 0, Math.PI / 2, 0 ) );
  804. handle.quaternion.copy( quaternion ).multiply( _tempQuaternion );
  805. if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) > 0.9 ) {
  806. handle.visible = false;
  807. }
  808. }
  809. if ( this.axis === 'XYZE' ) {
  810. _tempQuaternion.setFromEuler( _tempEuler.set( 0, Math.PI / 2, 0 ) );
  811. _alignVector.copy( this.rotationAxis );
  812. handle.quaternion.setFromRotationMatrix( _lookAtMatrix.lookAt( _zeroVector, _alignVector, _unitY ) );
  813. handle.quaternion.multiply( _tempQuaternion );
  814. handle.visible = this.dragging;
  815. }
  816. if ( this.axis === 'E' ) {
  817. handle.visible = false;
  818. }
  819. } else if ( handle.name === 'START' ) {
  820. handle.position.copy( this.worldPositionStart );
  821. handle.visible = this.dragging;
  822. } else if ( handle.name === 'END' ) {
  823. handle.position.copy( this.worldPosition );
  824. handle.visible = this.dragging;
  825. } else if ( handle.name === 'DELTA' ) {
  826. handle.position.copy( this.worldPositionStart );
  827. handle.quaternion.copy( this.worldQuaternionStart );
  828. _tempVector.set( 1e-10, 1e-10, 1e-10 ).add( this.worldPositionStart ).sub( this.worldPosition ).multiplyScalar( - 1 );
  829. _tempVector.applyQuaternion( this.worldQuaternionStart.clone().invert() );
  830. handle.scale.copy( _tempVector );
  831. handle.visible = this.dragging;
  832. } else {
  833. handle.quaternion.copy( quaternion );
  834. if ( this.dragging ) {
  835. handle.position.copy( this.worldPositionStart );
  836. } else {
  837. handle.position.copy( this.worldPosition );
  838. }
  839. if ( this.axis ) {
  840. handle.visible = this.axis.search( handle.name ) !== - 1;
  841. }
  842. }
  843. // If updating helper, skip rest of the loop
  844. continue;
  845. }
  846. // Align handles to current local or world rotation
  847. handle.quaternion.copy( quaternion );
  848. if ( this.mode === 'translate' || this.mode === 'scale' ) {
  849. // Hide translate and scale axis facing the camera
  850. const AXIS_HIDE_TRESHOLD = 0.99;
  851. const PLANE_HIDE_TRESHOLD = 0.2;
  852. if ( handle.name === 'X' ) {
  853. if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
  854. handle.scale.set( 1e-10, 1e-10, 1e-10 );
  855. handle.visible = false;
  856. }
  857. }
  858. if ( handle.name === 'Y' ) {
  859. if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
  860. handle.scale.set( 1e-10, 1e-10, 1e-10 );
  861. handle.visible = false;
  862. }
  863. }
  864. if ( handle.name === 'Z' ) {
  865. if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
  866. handle.scale.set( 1e-10, 1e-10, 1e-10 );
  867. handle.visible = false;
  868. }
  869. }
  870. if ( handle.name === 'XY' ) {
  871. if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_TRESHOLD ) {
  872. handle.scale.set( 1e-10, 1e-10, 1e-10 );
  873. handle.visible = false;
  874. }
  875. }
  876. if ( handle.name === 'YZ' ) {
  877. if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_TRESHOLD ) {
  878. handle.scale.set( 1e-10, 1e-10, 1e-10 );
  879. handle.visible = false;
  880. }
  881. }
  882. if ( handle.name === 'XZ' ) {
  883. if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_TRESHOLD ) {
  884. handle.scale.set( 1e-10, 1e-10, 1e-10 );
  885. handle.visible = false;
  886. }
  887. }
  888. } else if ( this.mode === 'rotate' ) {
  889. // Align handles to current local or world rotation
  890. _tempQuaternion2.copy( quaternion );
  891. _alignVector.copy( this.eye ).applyQuaternion( _tempQuaternion.copy( quaternion ).invert() );
  892. if ( handle.name.search( 'E' ) !== - 1 ) {
  893. handle.quaternion.setFromRotationMatrix( _lookAtMatrix.lookAt( this.eye, _zeroVector, _unitY ) );
  894. }
  895. if ( handle.name === 'X' ) {
  896. _tempQuaternion.setFromAxisAngle( _unitX, Math.atan2( - _alignVector.y, _alignVector.z ) );
  897. _tempQuaternion.multiplyQuaternions( _tempQuaternion2, _tempQuaternion );
  898. handle.quaternion.copy( _tempQuaternion );
  899. }
  900. if ( handle.name === 'Y' ) {
  901. _tempQuaternion.setFromAxisAngle( _unitY, Math.atan2( _alignVector.x, _alignVector.z ) );
  902. _tempQuaternion.multiplyQuaternions( _tempQuaternion2, _tempQuaternion );
  903. handle.quaternion.copy( _tempQuaternion );
  904. }
  905. if ( handle.name === 'Z' ) {
  906. _tempQuaternion.setFromAxisAngle( _unitZ, Math.atan2( _alignVector.y, _alignVector.x ) );
  907. _tempQuaternion.multiplyQuaternions( _tempQuaternion2, _tempQuaternion );
  908. handle.quaternion.copy( _tempQuaternion );
  909. }
  910. }
  911. // Hide disabled axes
  912. handle.visible = handle.visible && ( handle.name.indexOf( 'X' ) === - 1 || this.showX );
  913. handle.visible = handle.visible && ( handle.name.indexOf( 'Y' ) === - 1 || this.showY );
  914. handle.visible = handle.visible && ( handle.name.indexOf( 'Z' ) === - 1 || this.showZ );
  915. handle.visible = handle.visible && ( handle.name.indexOf( 'E' ) === - 1 || ( this.showX && this.showY && this.showZ ) );
  916. // highlight selected axis
  917. handle.material._color = handle.material._color || handle.material.color.clone();
  918. handle.material._opacity = handle.material._opacity || handle.material.opacity;
  919. handle.material.color.copy( handle.material._color );
  920. handle.material.opacity = handle.material._opacity;
  921. if ( this.enabled && this.axis ) {
  922. if ( handle.name === this.axis ) {
  923. handle.material.color.setHex( 0xffff00 );
  924. handle.material.opacity = 1.0;
  925. } else if ( this.axis.split( '' ).some( function ( a ) {
  926. return handle.name === a;
  927. } ) ) {
  928. handle.material.color.setHex( 0xffff00 );
  929. handle.material.opacity = 1.0;
  930. }
  931. }
  932. }
  933. super.updateMatrixWorld( force );
  934. }
  935. }
  936. TransformControlsGizmo.prototype.isTransformControlsGizmo = true;
  937. //
  938. class TransformControlsPlane extends Mesh {
  939. constructor() {
  940. super(
  941. new PlaneGeometry( 100000, 100000, 2, 2 ),
  942. new MeshBasicMaterial( { visible: false, wireframe: true, side: DoubleSide, transparent: true, opacity: 0.1, toneMapped: false } )
  943. );
  944. this.type = 'TransformControlsPlane';
  945. }
  946. updateMatrixWorld( force ) {
  947. let space = this.space;
  948. this.position.copy( this.worldPosition );
  949. if ( this.mode === 'scale' ) space = 'local'; // scale always oriented to local rotation
  950. _v1.copy( _unitX ).applyQuaternion( space === 'local' ? this.worldQuaternion : _identityQuaternion );
  951. _v2.copy( _unitY ).applyQuaternion( space === 'local' ? this.worldQuaternion : _identityQuaternion );
  952. _v3.copy( _unitZ ).applyQuaternion( space === 'local' ? this.worldQuaternion : _identityQuaternion );
  953. // Align the plane for current transform mode, axis and space.
  954. _alignVector.copy( _v2 );
  955. switch ( this.mode ) {
  956. case 'translate':
  957. case 'scale':
  958. switch ( this.axis ) {
  959. case 'X':
  960. _alignVector.copy( this.eye ).cross( _v1 );
  961. _dirVector.copy( _v1 ).cross( _alignVector );
  962. break;
  963. case 'Y':
  964. _alignVector.copy( this.eye ).cross( _v2 );
  965. _dirVector.copy( _v2 ).cross( _alignVector );
  966. break;
  967. case 'Z':
  968. _alignVector.copy( this.eye ).cross( _v3 );
  969. _dirVector.copy( _v3 ).cross( _alignVector );
  970. break;
  971. case 'XY':
  972. _dirVector.copy( _v3 );
  973. break;
  974. case 'YZ':
  975. _dirVector.copy( _v1 );
  976. break;
  977. case 'XZ':
  978. _alignVector.copy( _v3 );
  979. _dirVector.copy( _v2 );
  980. break;
  981. case 'XYZ':
  982. case 'E':
  983. _dirVector.set( 0, 0, 0 );
  984. break;
  985. }
  986. break;
  987. case 'rotate':
  988. default:
  989. // special case for rotate
  990. _dirVector.set( 0, 0, 0 );
  991. }
  992. if ( _dirVector.length() === 0 ) {
  993. // If in rotate mode, make the plane parallel to camera
  994. this.quaternion.copy( this.cameraQuaternion );
  995. } else {
  996. _tempMatrix.lookAt( _tempVector.set( 0, 0, 0 ), _dirVector, _alignVector );
  997. this.quaternion.setFromRotationMatrix( _tempMatrix );
  998. }
  999. super.updateMatrixWorld( force );
  1000. }
  1001. }
  1002. TransformControlsPlane.prototype.isTransformControlsPlane = true;
  1003. THREE.TransformControls = TransformControls;
  1004. THREE.TransformControlsGizmo = TransformControlsGizmo;
  1005. THREE.TransformControlsPlane = TransformControlsPlane;
  1006. //export { TransformControls, TransformControlsGizmo, TransformControlsPlane };