TransformControls.js 24 KB

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