TransformControls.js 43 KB

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