TransformControls.js 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947
  1. /**
  2. * @author arodic / https://github.com/arodic
  3. */
  4. //"use strict";
  5. THREE.TransformControls = function ( camera, domElement, doc ) {
  6. // TODO: Make non-uniform scale and rotate play nice in hierarchies
  7. // TODO: ADD RXYZ contol
  8. this.camera = camera;
  9. this.domElement = ( domElement !== undefined ) ? domElement : document;
  10. this.document = ( doc !== undefined ) ? doc : document;
  11. this.object = undefined;
  12. this.active = false;
  13. this.hovered = false;
  14. this.mode = 'translate';
  15. this.space = 'world';
  16. this.scale = 1;
  17. this.snapDist = null;
  18. this.modifierAxis = new THREE.Vector3( 1, 1, 1 );
  19. this.gizmo = new THREE.Object3D();
  20. var scope = this;
  21. var changeEvent = { type: 'change' };
  22. var showPickers = false; // debug
  23. var ray = new THREE.Raycaster();
  24. var projector = new THREE.Projector();
  25. var pointerVector = new THREE.Vector3();
  26. var point = new THREE.Vector3();
  27. var offset = new THREE.Vector3();
  28. var rotation = new THREE.Vector3();
  29. var offsetRotation = new THREE.Vector3();
  30. var scale = 1;
  31. var lookAtMatrix = new THREE.Matrix4();
  32. var eye = new THREE.Vector3()
  33. var tempMatrix = new THREE.Matrix4();
  34. var tempVector = new THREE.Vector3();
  35. var tempQuaternion = new THREE.Quaternion();
  36. var unitX = new THREE.Vector3( 1, 0, 0 );
  37. var unitY = new THREE.Vector3( 0, 1, 0 );
  38. var unitZ = new THREE.Vector3( 0, 0, 1 );
  39. var quaternionXYZ = new THREE.Quaternion();
  40. var quaternionX = new THREE.Quaternion();
  41. var quaternionY = new THREE.Quaternion();
  42. var quaternionZ = new THREE.Quaternion();
  43. var quaternionE = new THREE.Quaternion();
  44. var oldPosition = new THREE.Vector3();
  45. var oldScale = new THREE.Vector3();
  46. var oldRotationMatrix = new THREE.Matrix4();
  47. var parentRotationMatrix = new THREE.Matrix4();
  48. var parentScale = new THREE.Vector3();
  49. var worldPosition = new THREE.Vector3();
  50. var worldRotation = new THREE.Euler();
  51. var worldRotationMatrix = new THREE.Matrix4();
  52. var camPosition = new THREE.Vector3();
  53. var camRotation = new THREE.Euler();
  54. var displayAxes = {};
  55. var pickerAxes = {};
  56. var intersectionPlanes = {};
  57. var intersectionPlaneList = ['XY','YZ','XZ','XYZE']; // E
  58. var currentPlane = 'XY';
  59. // intersection planes
  60. {
  61. var planes = new THREE.Object3D();
  62. this.gizmo.add(planes);
  63. for ( var i in intersectionPlaneList ){
  64. intersectionPlanes[intersectionPlaneList[i]] = new THREE.Mesh( new THREE.PlaneGeometry( 500, 500 ) );
  65. intersectionPlanes[intersectionPlaneList[i]].material.side = THREE.DoubleSide;
  66. intersectionPlanes[intersectionPlaneList[i]].visible = false;
  67. planes.add(intersectionPlanes[intersectionPlaneList[i]]);
  68. }
  69. intersectionPlanes['YZ'].rotation.set( 0, Math.PI/2, 0 );
  70. intersectionPlanes['XZ'].rotation.set( -Math.PI/2, 0, 0 );
  71. bakeTransformations(intersectionPlanes['YZ']);
  72. bakeTransformations(intersectionPlanes['XZ']);
  73. }
  74. // gizmo geometry
  75. {
  76. displayAxes["translate"] = new THREE.Object3D();
  77. displayAxes["rotate"] = new THREE.Object3D();
  78. displayAxes["scale"] = new THREE.Object3D();
  79. this.gizmo.add( displayAxes["translate"] );
  80. this.gizmo.add( displayAxes["rotate"] );
  81. this.gizmo.add( displayAxes["scale"] );
  82. pickerAxes["translate"] = new THREE.Object3D();
  83. pickerAxes["rotate"] = new THREE.Object3D();
  84. pickerAxes["scale"] = new THREE.Object3D();
  85. this.gizmo.add( pickerAxes["translate"] );
  86. this.gizmo.add( pickerAxes["rotate"] );
  87. this.gizmo.add( pickerAxes["scale"] );
  88. var HandleMaterial = function ( color, opacity ) {
  89. var material = new THREE.MeshBasicMaterial();
  90. material.color = color;
  91. material.side = THREE.DoubleSide;
  92. material.depthTest = false;
  93. material.depthWrite = false;
  94. material.opacity = opacity !== undefined ? opacity : 1;
  95. material.transparent = true;
  96. return material;
  97. }
  98. var LineMaterial = function ( color, opacity ) {
  99. var material = new THREE.LineBasicMaterial();
  100. material.color = color;
  101. material.depthTest = false;
  102. material.depthWrite = false;
  103. material.opacity = opacity !== undefined ? opacity : 1;
  104. material.transparent = true;
  105. return material;
  106. }
  107. // materials by color
  108. var white = new THREE.Color( 0xffffff );
  109. var gray = new THREE.Color( 0x808080 );
  110. var red = new THREE.Color( 0xff0000 );
  111. var green = new THREE.Color( 0x00ff00 );
  112. var blue = new THREE.Color( 0x0000ff );
  113. var cyan = new THREE.Color( 0x00ffff );
  114. var magenta = new THREE.Color( 0xff00ff );
  115. var yellow = new THREE.Color( 0xffff00 );
  116. var geometry, mesh;
  117. // Line axes
  118. geometry = new THREE.Geometry();
  119. geometry.vertices.push(
  120. new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 1, 0, 0 ),
  121. new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 1, 0 ),
  122. new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, 1 )
  123. );
  124. geometry.colors.push(
  125. red, red, green, green, blue, blue
  126. );
  127. material = new THREE.LineBasicMaterial( {
  128. vertexColors: THREE.VertexColors,
  129. depthTest: false,
  130. depthWrite: false,
  131. transparent: true
  132. } );
  133. mesh = new THREE.Line( geometry, material, THREE.LinePieces );
  134. displayAxes['translate'].add( mesh );
  135. displayAxes['scale'].add( mesh.clone() );
  136. // Translate handles
  137. mesh = new THREE.Mesh( new THREE.OctahedronGeometry( 0.1, 0 ), HandleMaterial( white, 0.25 ) );
  138. mesh.name = 'TXYZ';
  139. displayAxes['translate'].add( mesh );
  140. pickerAxes['translate'].add( mesh.clone() );
  141. geometry = new THREE.PlaneGeometry( 0.3, 0.3 );
  142. mesh = new THREE.Mesh( geometry, HandleMaterial( yellow, 0.25 ) );
  143. mesh.position.set( 0.15, 0.15, 0 );
  144. bakeTransformations( mesh );
  145. mesh.name = 'TXY';
  146. displayAxes['translate'].add( mesh );
  147. pickerAxes['translate'].add( mesh.clone() );
  148. mesh = new THREE.Mesh( geometry, HandleMaterial( cyan, 0.25 ) );
  149. mesh.position.set( 0, 0.15, 0.15 );
  150. mesh.rotation.y = Math.PI/2;
  151. bakeTransformations( mesh );
  152. mesh.name = 'TYZ';
  153. displayAxes['translate'].add( mesh );
  154. pickerAxes['translate'].add( mesh.clone() );
  155. mesh = new THREE.Mesh( geometry, HandleMaterial( magenta, 0.25 ) );
  156. mesh.position.set( 0.15, 0, 0.15 );
  157. mesh.rotation.x = Math.PI/2;
  158. bakeTransformations( mesh );
  159. mesh.name = 'TXZ';
  160. displayAxes['translate'].add( mesh );
  161. pickerAxes['translate'].add( mesh.clone() );
  162. geometry = new THREE.CylinderGeometry( 0, 0.05, 0.2, 4, 1, true );
  163. mesh = new THREE.Mesh( geometry, HandleMaterial( red ) );
  164. mesh.position.x = 1.1;
  165. mesh.rotation.z = -Math.PI/2;
  166. bakeTransformations( mesh );
  167. mesh.name = 'TX';
  168. displayAxes['translate'].add( mesh );
  169. mesh = new THREE.Mesh( geometry, HandleMaterial( green ) );
  170. mesh.position.y = 1.1;
  171. bakeTransformations( mesh );
  172. mesh.name = 'TY';
  173. displayAxes['translate'].add( mesh );
  174. mesh = new THREE.Mesh( geometry, HandleMaterial( blue ) );
  175. mesh.position.z = 1.1;
  176. mesh.rotation.x = Math.PI/2;
  177. bakeTransformations( mesh );
  178. mesh.name = 'TZ';
  179. displayAxes['translate'].add( mesh );
  180. geometry = new THREE.CylinderGeometry( 0.2, 0.1, 0.8, 4, 1, false );
  181. mesh = new THREE.Mesh( geometry, HandleMaterial( red ) );
  182. mesh.position.x = 0.7;
  183. mesh.rotation.z = -Math.PI/2;
  184. bakeTransformations( mesh );
  185. mesh.name = 'TX';
  186. pickerAxes['translate'].add( mesh );
  187. mesh = new THREE.Mesh( geometry, HandleMaterial( green ) );
  188. mesh.position.y = 0.7;
  189. bakeTransformations( mesh );
  190. mesh.name = 'TY';
  191. pickerAxes['translate'].add( mesh );
  192. mesh = new THREE.Mesh( geometry, HandleMaterial( blue ) );
  193. mesh.position.z = 0.7;
  194. mesh.rotation.x = Math.PI/2;
  195. bakeTransformations( mesh );
  196. mesh.name = 'TZ';
  197. pickerAxes['translate'].add( mesh );
  198. // scale manipulators
  199. geometry = new THREE.CubeGeometry( 0.125, 0.125, 0.125 );
  200. mesh = new THREE.Mesh( geometry, HandleMaterial( white, 0.25 ) );
  201. mesh.name = 'SXYZ';
  202. displayAxes['scale'].add( mesh );
  203. pickerAxes['scale'].add( mesh.clone() );
  204. mesh = new THREE.Mesh( geometry, HandleMaterial( red ) );
  205. mesh.position.set( 1.05, 0, 0 );
  206. bakeTransformations( mesh );
  207. mesh.name = 'SX';
  208. displayAxes['scale'].add( mesh );
  209. pickerAxes['scale'].add( mesh.clone() );
  210. mesh = new THREE.Mesh( geometry, HandleMaterial( green ) );
  211. mesh.position.set( 0, 1.05, 0 );
  212. bakeTransformations( mesh );
  213. mesh.name = 'SY';
  214. displayAxes['scale'].add( mesh );
  215. pickerAxes['scale'].add( mesh.clone() );
  216. mesh = new THREE.Mesh( geometry, HandleMaterial( blue ) );
  217. mesh.position.set( 0, 0, 1.05 );
  218. bakeTransformations( mesh );
  219. mesh.name = 'SZ';
  220. displayAxes['scale'].add( mesh );
  221. pickerAxes['scale'].add( mesh.clone() );
  222. // rotate manipulators
  223. var Circle = function ( radius, facing, arc ) {
  224. geometry = new THREE.Geometry();
  225. arc = arc ? arc : 1;
  226. for ( var i = 0; i <= 64 * arc; ++i ) {
  227. if ( facing == 'x' ) geometry.vertices.push( new THREE.Vector3( 0, Math.cos( i / 32 * Math.PI ), Math.sin( i / 32 * Math.PI ) ).multiplyScalar(radius) );
  228. if ( facing == 'y' ) geometry.vertices.push( new THREE.Vector3( Math.cos( i / 32 * Math.PI ), 0, Math.sin( i / 32 * Math.PI ) ).multiplyScalar(radius) );
  229. if ( facing == 'z' ) geometry.vertices.push( new THREE.Vector3( Math.sin( i / 32 * Math.PI ), Math.cos( i / 32 * Math.PI ), 0 ).multiplyScalar(radius) );
  230. }
  231. return geometry;
  232. }
  233. mesh = new THREE.Line( Circle( 1, 'x', 0.5 ), LineMaterial( red ) );
  234. mesh.name = 'RX';
  235. displayAxes['rotate'].add( mesh );
  236. mesh = new THREE.Line( Circle( 1, 'y', 0.5 ), LineMaterial( green ) );
  237. mesh.name = 'RY';
  238. displayAxes['rotate'].add( mesh );
  239. mesh = new THREE.Line( Circle( 1, 'z', 0.5 ), LineMaterial( blue ) );
  240. mesh.name = 'RZ';
  241. displayAxes['rotate'].add( mesh );
  242. mesh = new THREE.Line( Circle( 1, 'z' ), LineMaterial( gray ) );
  243. mesh.name = 'RXYZE';
  244. displayAxes['rotate'].add( mesh );
  245. mesh = new THREE.Line( Circle( 1.25, 'z' ), LineMaterial( yellow, 0.25 ) );
  246. mesh.name = 'RE';
  247. displayAxes['rotate'].add( mesh );
  248. geometry = new THREE.TorusGeometry( 1, 0.15, 4, 6, Math.PI );
  249. mesh = new THREE.Mesh( geometry, HandleMaterial( red ) );
  250. mesh.rotation.z = -Math.PI/2;
  251. mesh.rotation.y = -Math.PI/2;
  252. bakeTransformations( mesh );
  253. mesh.name = 'RX';
  254. pickerAxes['rotate'].add( mesh );
  255. mesh = new THREE.Mesh( geometry, HandleMaterial( green ) );
  256. mesh.rotation.z = Math.PI;
  257. mesh.rotation.x = -Math.PI/2;
  258. bakeTransformations( mesh );
  259. mesh.name = 'RY';
  260. pickerAxes['rotate'].add( mesh );
  261. mesh = new THREE.Mesh( geometry, HandleMaterial( blue ) );
  262. mesh.rotation.z = -Math.PI/2;
  263. bakeTransformations( mesh );
  264. mesh.name = 'RZ';
  265. pickerAxes['rotate'].add( mesh );
  266. mesh = new THREE.Mesh( new THREE.SphereGeometry( 0.95, 12, 12 ), HandleMaterial( white, 0.25 ) );
  267. mesh.name = 'RXYZE';
  268. pickerAxes['rotate'].add( mesh );
  269. intersectionPlanes['SPHERE'] = new THREE.Mesh( new THREE.SphereGeometry( 0.95, 12, 12 ) );
  270. intersectionPlanes['SPHERE'].visible = false;
  271. planes.add(intersectionPlanes['SPHERE']);
  272. mesh = new THREE.Mesh( new THREE.TorusGeometry( 1.30, 0.15, 4, 12 ), HandleMaterial( yellow, 0.25 ) );
  273. mesh.name = 'RE';
  274. pickerAxes['rotate'].add( mesh );
  275. mesh = null;
  276. }
  277. this.attach = function ( object ) {
  278. this.object = object;
  279. this.setMode( scope.mode );
  280. this.domElement.addEventListener( 'mousedown', onMouseDown, false );
  281. this.domElement.addEventListener( 'mousemove', onMouseHover, false );
  282. this.document.addEventListener( 'keydown', onKeyDown, false );
  283. }
  284. this.detach = function ( object ) {
  285. this.object = undefined;
  286. this.hovered = false;
  287. this.hide();
  288. this.domElement.removeEventListener( 'mousedown', onMouseDown, false );
  289. this.domElement.removeEventListener( 'mousemove', onMouseHover, false );
  290. this.document.removeEventListener( 'keydown', onKeyDown, false );
  291. }
  292. this.update = function () {
  293. if ( this.object === undefined ) return;
  294. this.object.updateMatrixWorld();
  295. worldPosition.getPositionFromMatrix( this.object.matrixWorld );
  296. worldRotation.setFromRotationMatrix( tempMatrix.extractRotation( this.object.matrixWorld ) );
  297. this.camera.updateMatrixWorld();
  298. camPosition.getPositionFromMatrix( this.camera.matrixWorld );
  299. camRotation.setFromRotationMatrix( tempMatrix.extractRotation( this.camera.matrixWorld ) );
  300. scale = worldPosition.distanceTo( camPosition ) / 6 * this.scale;
  301. this.gizmo.position.copy( worldPosition )
  302. this.gizmo.scale.set( scale, scale, scale );
  303. for ( var i in this.gizmo.children ) {
  304. for ( var j in this.gizmo.children[i].children ) {
  305. var object = this.gizmo.children[i].children[j];
  306. var name = object.name;
  307. if ( name.search('E') != -1 ){
  308. lookAtMatrix.lookAt( camPosition, worldPosition, tempVector.set( 0, 1, 0 ));
  309. object.rotation.setFromRotationMatrix( lookAtMatrix );
  310. } else {
  311. eye.copy( camPosition ).sub( worldPosition ).normalize();
  312. if ( this.space == 'local' ) {
  313. tempQuaternion.setFromEuler( worldRotation );
  314. if ( name.search('R') != -1 ){
  315. tempMatrix.makeRotationFromQuaternion( tempQuaternion ).getInverse( tempMatrix );
  316. eye.applyProjection( tempMatrix );
  317. if ( name == 'RX' ) {
  318. quaternionX.setFromAxisAngle( unitX, Math.atan2( -eye.y, eye.z ) );
  319. tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
  320. }
  321. if ( name == 'RY' ) {
  322. quaternionY.setFromAxisAngle( unitY, Math.atan2( eye.x, eye.z ) );
  323. tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
  324. }
  325. if ( name == 'RZ' ) {
  326. quaternionZ.setFromAxisAngle( unitZ, Math.atan2( eye.y, eye.x ) );
  327. tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
  328. }
  329. }
  330. object.quaternion.copy( tempQuaternion );
  331. } else if ( this.space == 'world' ) {
  332. object.rotation.set( 0, 0, 0 );
  333. if ( name == 'RX' ) object.rotation.x = Math.atan2( -eye.y, eye.z );
  334. if ( name == 'RY' ) object.rotation.y = Math.atan2( eye.x, eye.z );
  335. if ( name == 'RZ' ) object.rotation.z = Math.atan2( eye.y, eye.x );
  336. }
  337. }
  338. }
  339. }
  340. }
  341. this.hide = function () {
  342. for ( var i in displayAxes ) {
  343. for ( var j in displayAxes[i].children ) {
  344. displayAxes[i].children[j].visible = false;
  345. }
  346. }
  347. for ( var i in pickerAxes ) {
  348. for ( var j in pickerAxes[i].children ) {
  349. pickerAxes[i].children[j].visible = false;
  350. }
  351. }
  352. }
  353. this.setMode = function ( value ) {
  354. scope.mode = value;
  355. this.hide();
  356. if ( scope.mode == 'scale' ) scope.space = 'local';
  357. for ( var i in displayAxes[this.mode].children ) {
  358. displayAxes[this.mode].children[i].visible = true;
  359. }
  360. for ( var i in pickerAxes[this.mode].children ) {
  361. pickerAxes[this.mode].children[i].visible = showPickers;
  362. }
  363. scope.update();
  364. }
  365. this.setIntersectionPlane = function () {
  366. eye.copy( camPosition ).sub( worldPosition ).normalize();
  367. if ( this.space == 'local' ) {
  368. eye.applyMatrix4( tempMatrix.getInverse( scope.object.matrixWorld ) );
  369. }
  370. if ( isActive("X") ) {
  371. if ( eye.y > eye.z ) currentPlane = 'XZ';
  372. else currentPlane = 'XY';
  373. }
  374. if ( isActive("Y") ) {
  375. if ( eye.x > eye.z ) currentPlane = 'YZ';
  376. else currentPlane = 'XY';
  377. }
  378. if ( isActive("Z") ) {
  379. if ( eye.x > eye.y ) currentPlane = 'YZ';
  380. else currentPlane = 'XZ';
  381. }
  382. if ( isActive("XY") ) {
  383. currentPlane = 'XY';
  384. }
  385. if ( isActive("YZ") ) {
  386. currentPlane = 'YZ';
  387. }
  388. if ( isActive("XZ") ) {
  389. currentPlane = 'XZ';
  390. }
  391. if ( isActive("XYZ") || isActive("E") ) {
  392. currentPlane = 'XYZE';
  393. }
  394. if ( isActive("RX") ) {
  395. currentPlane = 'YZ';
  396. }
  397. if ( isActive("RY") ) {
  398. currentPlane = 'XZ';
  399. }
  400. if ( isActive("RZ") ) {
  401. currentPlane = 'XY';
  402. }
  403. if ( isActive("RXYZ") ) {
  404. currentPlane = 'SPHERE';
  405. }
  406. }
  407. var hovered = null;
  408. var hoveredColor = new THREE.Color();
  409. var hoveredOpacity = 1;
  410. function onMouseHover( event ) {
  411. event.preventDefault();
  412. if ( event.button === 0 && scope.active === false ) {
  413. var intersect = intersectObjects( event, pickerAxes[scope.mode].children );
  414. if ( intersect ) {
  415. if ( hovered !== intersect.object ) {
  416. if ( hovered !== null ) {
  417. hovered.material.color.copy( hoveredColor );
  418. hovered.material.opacity = hoveredOpacity;
  419. }
  420. hovered = intersect.object;
  421. hoveredColor.copy( hovered.material.color );
  422. hoveredOpacity = hovered.material.opacity;
  423. hovered.material.color.setRGB( 1, 1, 0 );
  424. hovered.material.opacity = 1;
  425. scope.dispatchEvent( changeEvent );
  426. }
  427. scope.hovered = true;
  428. } else if ( hovered !== null ) {
  429. hovered.material.color.copy( hoveredColor );
  430. hovered.material.opacity = hoveredOpacity;
  431. hovered = null;
  432. scope.dispatchEvent( changeEvent );
  433. scope.hovered = false;
  434. }
  435. }
  436. scope.document.addEventListener( 'mousemove', onMouseMove, false );
  437. scope.document.addEventListener( 'mouseup', onMouseUp, false );
  438. };
  439. function onMouseDown( event ) {
  440. event.preventDefault();
  441. if ( event.button === 0 ) {
  442. var intersect = intersectObjects( event, pickerAxes[scope.mode].children );
  443. if ( intersect ) {
  444. scope.active = intersect.object.name;
  445. scope.update();
  446. scope.setIntersectionPlane();
  447. var planeIntersect = intersectObjects( event, [intersectionPlanes[currentPlane]] );
  448. if ( planeIntersect ) {
  449. oldPosition.copy( scope.object.position );
  450. oldScale.copy( scope.object.scale );
  451. oldRotationMatrix.extractRotation( scope.object.matrix );
  452. worldRotationMatrix.extractRotation( scope.object.matrixWorld );
  453. parentRotationMatrix.extractRotation( scope.object.parent.matrixWorld );
  454. parentScale.getScaleFromMatrix( tempMatrix.getInverse( scope.object.parent.matrixWorld ) );
  455. offset.copy( planeIntersect.point );
  456. }
  457. }
  458. }
  459. scope.document.addEventListener( 'mousemove', onMouseMove, false );
  460. scope.document.addEventListener( 'mouseup', onMouseUp, false );
  461. };
  462. function onMouseMove( event ) {
  463. if ( scope.active ) {
  464. var planeIntersect = intersectObjects( event, [intersectionPlanes[currentPlane]] );
  465. if ( planeIntersect ) {
  466. point.copy( planeIntersect.point );
  467. if ( ( scope.mode == 'translate' ) && isActive("T") ) {
  468. point.sub( offset );
  469. point.multiply(parentScale);
  470. if ( scope.space == 'local' ) {
  471. point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
  472. if ( !(isActive("X")) || scope.modifierAxis.x != 1 ) point.x = 0;
  473. if ( !(isActive("Y")) || scope.modifierAxis.y != 1 ) point.y = 0;
  474. if ( !(isActive("Z")) || scope.modifierAxis.z != 1 ) point.z = 0;
  475. if ( isActive("XYZ") ) point.set( 0, 0, 0 );
  476. point.applyMatrix4( oldRotationMatrix );
  477. scope.object.position.copy( oldPosition );
  478. scope.object.position.add( point );
  479. }
  480. if ( scope.space == 'world' || isActive("XYZ") ) {
  481. if ( !(isActive("X")) || scope.modifierAxis.x != 1 ) point.x = 0;
  482. if ( !(isActive("Y")) || scope.modifierAxis.y != 1 ) point.y = 0;
  483. if ( !(isActive("Z")) || scope.modifierAxis.z != 1 ) point.z = 0;
  484. point.applyMatrix4( tempMatrix.getInverse( parentRotationMatrix ) );
  485. scope.object.position.copy( oldPosition );
  486. scope.object.position.add( point );
  487. if ( scope.snapDist ) {
  488. if ( isActive("X") ) scope.object.position.x = Math.round( scope.object.position.x / scope.snapDist ) * scope.snapDist;
  489. if ( isActive("Y") ) scope.object.position.y = Math.round( scope.object.position.y / scope.snapDist ) * scope.snapDist;
  490. if ( isActive("Z") ) scope.object.position.z = Math.round( scope.object.position.z / scope.snapDist ) * scope.snapDist;
  491. }
  492. }
  493. } else if ( ( scope.mode == 'scale') && isActive("S") ) {
  494. point.sub( offset );
  495. point.multiply(parentScale);
  496. if ( scope.space == 'local' ) {
  497. if ( isActive("XYZ")) {
  498. scale = 1 + ( ( point.y ) / 50 );
  499. scope.object.scale.x = oldScale.x * scale;
  500. scope.object.scale.y = oldScale.y * scale;
  501. scope.object.scale.z = oldScale.z * scale;
  502. } else {
  503. point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
  504. if ( !(isActive("X")) || scope.modifierAxis.x != 1 ) point.x = 0;
  505. if ( !(isActive("Y")) || scope.modifierAxis.y != 1 ) point.y = 0;
  506. if ( !(isActive("Z")) || scope.modifierAxis.z != 1 ) point.z = 0;
  507. if ( isActive("X") ) scope.object.scale.x = oldScale.x * ( 1 + point.x / 50 );
  508. if ( isActive("Y") ) scope.object.scale.y = oldScale.y * ( 1 + point.y / 50 );
  509. if ( isActive("Z") ) scope.object.scale.z = oldScale.z * ( 1 + point.z / 50 );
  510. }
  511. }
  512. } else if ( ( scope.mode == 'rotate' ) && isActive("R") ) {
  513. point.sub( worldPosition );
  514. point.multiply(parentScale);
  515. tempVector.copy(offset).sub( worldPosition );
  516. tempVector.multiply(parentScale);
  517. if ( scope.active == "RE" ) {
  518. point.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) );
  519. tempVector.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) );
  520. rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
  521. offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
  522. tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) );
  523. quaternionE.setFromAxisAngle( eye, rotation.z - offsetRotation.z );
  524. quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
  525. tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionE );
  526. tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
  527. scope.object.quaternion.copy( tempQuaternion );
  528. } else if ( scope.active == "RXYZE" ) {
  529. quaternionE.setFromEuler( point.clone().cross(tempVector).normalize() ); // rotation axis
  530. tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) );
  531. quaternionX.setFromAxisAngle( quaternionE, - point.clone().angleTo(tempVector) );
  532. quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
  533. tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
  534. tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
  535. scope.object.quaternion.copy( tempQuaternion );
  536. } else if ( scope.space == 'local' ) {
  537. point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
  538. tempVector.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
  539. rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
  540. offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
  541. quaternionXYZ.setFromRotationMatrix( oldRotationMatrix );
  542. quaternionX.setFromAxisAngle( unitX, rotation.x - offsetRotation.x );
  543. quaternionY.setFromAxisAngle( unitY, rotation.y - offsetRotation.y );
  544. quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z );
  545. if ( scope.active == "RX" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionX );
  546. if ( scope.active == "RY" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionY );
  547. if ( scope.active == "RZ" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionZ );
  548. scope.object.quaternion.copy( quaternionXYZ );
  549. } else if ( scope.space == 'world' ) {
  550. rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
  551. offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
  552. tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) );
  553. quaternionX.setFromAxisAngle( unitX, rotation.x - offsetRotation.x );
  554. quaternionY.setFromAxisAngle( unitY, rotation.y - offsetRotation.y );
  555. quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z );
  556. quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
  557. if ( scope.active == "RX" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
  558. if ( scope.active == "RY" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
  559. if ( scope.active == "RZ" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
  560. tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
  561. scope.object.quaternion.copy( tempQuaternion );
  562. }
  563. }
  564. }
  565. scope.update();
  566. scope.dispatchEvent( changeEvent );
  567. }
  568. }
  569. function onMouseUp( event ) {
  570. scope.active = false;
  571. scope.document.removeEventListener( 'mousemove', onMouseMove, false );
  572. scope.document.removeEventListener( 'mouseup', onMouseUp, false );
  573. }
  574. function onKeyDown( event ) {
  575. var currentMode = scope.mode;
  576. var currentSpace = scope.space;
  577. var currentScale = scope.scale;
  578. if ( event.keyCode == 87 ) { // W
  579. if ( scope.mode == 'translate' ) scope.space = ( scope.space == 'world' ) ? 'local' : 'world';
  580. scope.mode = 'translate';
  581. }
  582. if ( event.keyCode == 69 ) { // E
  583. if ( scope.mode == 'rotate' ) scope.space = ( scope.space == 'world' ) ? 'local' : 'world';
  584. scope.mode = 'rotate';
  585. }
  586. if ( event.keyCode == 82 ) { // R
  587. scope.mode = 'scale';
  588. scope.space = 'local';
  589. }
  590. if ( event.keyCode == 187 || event.keyCode == 107 ) { // +,=,num+
  591. scope.scale += 0.1
  592. }
  593. if ( event.keyCode == 189 || event.keyCode == 109) { // -,_,num-
  594. scope.scale -= 0.1
  595. scope.scale = Math.max( scope.scale, 0.1 );
  596. }
  597. if ( scope.mode !== currentMode || scope.space !== currentSpace || scope.scale !== currentScale ) {
  598. scope.setMode( scope.mode );
  599. scope.dispatchEvent( changeEvent );
  600. }
  601. }
  602. function intersectObjects( event, objects ) {
  603. pointerVector.set(
  604. ( event.layerX / scope.domElement.offsetWidth ) * 2 - 1,
  605. - ( event.layerY / scope.domElement.offsetHeight ) * 2 + 1,
  606. 0.5
  607. );
  608. projector.unprojectVector( pointerVector, scope.camera );
  609. ray.set( camPosition, pointerVector.sub( camPosition ).normalize() );
  610. var intersections = ray.intersectObjects( objects, true );
  611. return intersections[0] ? intersections[0] : false;
  612. }
  613. function isActive( name ) {
  614. if ( scope.active.search( name ) != -1 ) return true;
  615. else return false;
  616. }
  617. function bakeTransformations( object ) {
  618. var tempGeometry = new THREE.Geometry();
  619. THREE.GeometryUtils.merge( tempGeometry, object );
  620. object.geometry = tempGeometry;
  621. object.position.set( 0, 0, 0 );
  622. object.rotation.set( 0, 0, 0 );
  623. object.scale.set( 1, 1, 1 );
  624. }
  625. };
  626. THREE.TransformControls.prototype = Object.create( THREE.EventDispatcher.prototype );