ViewHelper.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. ( function () {
  2. const vpTemp = new THREE.Vector4();
  3. class ViewHelper extends THREE.Object3D {
  4. constructor( editorCamera, dom ) {
  5. super();
  6. this.isViewHelper = true;
  7. this.animating = false;
  8. this.controls = null;
  9. const color1 = new THREE.Color( '#ff3653' );
  10. const color2 = new THREE.Color( '#8adb00' );
  11. const color3 = new THREE.Color( '#2c8fff' );
  12. const interactiveObjects = [];
  13. const raycaster = new THREE.Raycaster();
  14. const mouse = new THREE.Vector2();
  15. const dummy = new THREE.Object3D();
  16. const camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
  17. camera.position.set( 0, 0, 2 );
  18. const geometry = new THREE.BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
  19. const xAxis = new THREE.Mesh( geometry, getAxisMaterial( color1 ) );
  20. const yAxis = new THREE.Mesh( geometry, getAxisMaterial( color2 ) );
  21. const zAxis = new THREE.Mesh( geometry, getAxisMaterial( color3 ) );
  22. yAxis.rotation.z = Math.PI / 2;
  23. zAxis.rotation.y = - Math.PI / 2;
  24. this.add( xAxis );
  25. this.add( zAxis );
  26. this.add( yAxis );
  27. const posXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1, 'X' ) );
  28. posXAxisHelper.userData.type = 'posX';
  29. const posYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2, 'Y' ) );
  30. posYAxisHelper.userData.type = 'posY';
  31. const posZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3, 'Z' ) );
  32. posZAxisHelper.userData.type = 'posZ';
  33. const negXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1 ) );
  34. negXAxisHelper.userData.type = 'negX';
  35. const negYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2 ) );
  36. negYAxisHelper.userData.type = 'negY';
  37. const negZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3 ) );
  38. negZAxisHelper.userData.type = 'negZ';
  39. posXAxisHelper.position.x = 1;
  40. posYAxisHelper.position.y = 1;
  41. posZAxisHelper.position.z = 1;
  42. negXAxisHelper.position.x = - 1;
  43. negXAxisHelper.scale.setScalar( 0.8 );
  44. negYAxisHelper.position.y = - 1;
  45. negYAxisHelper.scale.setScalar( 0.8 );
  46. negZAxisHelper.position.z = - 1;
  47. negZAxisHelper.scale.setScalar( 0.8 );
  48. this.add( posXAxisHelper );
  49. this.add( posYAxisHelper );
  50. this.add( posZAxisHelper );
  51. this.add( negXAxisHelper );
  52. this.add( negYAxisHelper );
  53. this.add( negZAxisHelper );
  54. interactiveObjects.push( posXAxisHelper );
  55. interactiveObjects.push( posYAxisHelper );
  56. interactiveObjects.push( posZAxisHelper );
  57. interactiveObjects.push( negXAxisHelper );
  58. interactiveObjects.push( negYAxisHelper );
  59. interactiveObjects.push( negZAxisHelper );
  60. const point = new THREE.Vector3();
  61. const dim = 128;
  62. const turnRate = 2 * Math.PI; // turn rate in angles per second
  63. this.render = function ( renderer ) {
  64. this.quaternion.copy( editorCamera.quaternion ).invert();
  65. this.updateMatrixWorld();
  66. point.set( 0, 0, 1 );
  67. point.applyQuaternion( editorCamera.quaternion );
  68. if ( point.x >= 0 ) {
  69. posXAxisHelper.material.opacity = 1;
  70. negXAxisHelper.material.opacity = 0.5;
  71. } else {
  72. posXAxisHelper.material.opacity = 0.5;
  73. negXAxisHelper.material.opacity = 1;
  74. }
  75. if ( point.y >= 0 ) {
  76. posYAxisHelper.material.opacity = 1;
  77. negYAxisHelper.material.opacity = 0.5;
  78. } else {
  79. posYAxisHelper.material.opacity = 0.5;
  80. negYAxisHelper.material.opacity = 1;
  81. }
  82. if ( point.z >= 0 ) {
  83. posZAxisHelper.material.opacity = 1;
  84. negZAxisHelper.material.opacity = 0.5;
  85. } else {
  86. posZAxisHelper.material.opacity = 0.5;
  87. negZAxisHelper.material.opacity = 1;
  88. }
  89. //
  90. const x = dom.offsetWidth - dim;
  91. renderer.clearDepth();
  92. renderer.getViewport( vpTemp );
  93. renderer.setViewport( x, 0, dim, dim );
  94. renderer.render( this, camera );
  95. renderer.setViewport( vpTemp.x, vpTemp.y, vpTemp.z, vpTemp.w );
  96. };
  97. const targetPosition = new THREE.Vector3();
  98. const targetQuaternion = new THREE.Quaternion();
  99. const q1 = new THREE.Quaternion();
  100. const q2 = new THREE.Quaternion();
  101. let radius = 0;
  102. this.handleClick = function ( event ) {
  103. if ( this.animating === true ) return false;
  104. const rect = dom.getBoundingClientRect();
  105. const offsetX = rect.left + ( dom.offsetWidth - dim );
  106. const offsetY = rect.top + ( dom.offsetHeight - dim );
  107. mouse.x = ( event.clientX - offsetX ) / ( rect.width - offsetX ) * 2 - 1;
  108. mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;
  109. raycaster.setFromCamera( mouse, camera );
  110. const intersects = raycaster.intersectObjects( interactiveObjects );
  111. if ( intersects.length > 0 ) {
  112. const intersection = intersects[ 0 ];
  113. const object = intersection.object;
  114. prepareAnimationData( object, this.controls.center );
  115. this.animating = true;
  116. return true;
  117. } else {
  118. return false;
  119. }
  120. };
  121. this.update = function ( delta ) {
  122. const step = delta * turnRate;
  123. const focusPoint = this.controls.center;
  124. // animate position by doing a slerp and then scaling the position on the unit sphere
  125. q1.rotateTowards( q2, step );
  126. editorCamera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
  127. // animate orientation
  128. editorCamera.quaternion.rotateTowards( targetQuaternion, step );
  129. if ( q1.angleTo( q2 ) === 0 ) {
  130. this.animating = false;
  131. }
  132. };
  133. this.dispose = function () {
  134. geometry.dispose();
  135. xAxis.material.dispose();
  136. yAxis.material.dispose();
  137. zAxis.material.dispose();
  138. posXAxisHelper.material.map.dispose();
  139. posYAxisHelper.material.map.dispose();
  140. posZAxisHelper.material.map.dispose();
  141. negXAxisHelper.material.map.dispose();
  142. negYAxisHelper.material.map.dispose();
  143. negZAxisHelper.material.map.dispose();
  144. posXAxisHelper.material.dispose();
  145. posYAxisHelper.material.dispose();
  146. posZAxisHelper.material.dispose();
  147. negXAxisHelper.material.dispose();
  148. negYAxisHelper.material.dispose();
  149. negZAxisHelper.material.dispose();
  150. };
  151. function prepareAnimationData( object, focusPoint ) {
  152. switch ( object.userData.type ) {
  153. case 'posX':
  154. targetPosition.set( 1, 0, 0 );
  155. targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI * 0.5, 0 ) );
  156. break;
  157. case 'posY':
  158. targetPosition.set( 0, 1, 0 );
  159. targetQuaternion.setFromEuler( new THREE.Euler( - Math.PI * 0.5, 0, 0 ) );
  160. break;
  161. case 'posZ':
  162. targetPosition.set( 0, 0, 1 );
  163. targetQuaternion.setFromEuler( new THREE.Euler() );
  164. break;
  165. case 'negX':
  166. targetPosition.set( - 1, 0, 0 );
  167. targetQuaternion.setFromEuler( new THREE.Euler( 0, - Math.PI * 0.5, 0 ) );
  168. break;
  169. case 'negY':
  170. targetPosition.set( 0, - 1, 0 );
  171. targetQuaternion.setFromEuler( new THREE.Euler( Math.PI * 0.5, 0, 0 ) );
  172. break;
  173. case 'negZ':
  174. targetPosition.set( 0, 0, - 1 );
  175. targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );
  176. break;
  177. default:
  178. console.error( 'ViewHelper: Invalid axis.' );
  179. }
  180. //
  181. radius = editorCamera.position.distanceTo( focusPoint );
  182. targetPosition.multiplyScalar( radius ).add( focusPoint );
  183. dummy.position.copy( focusPoint );
  184. dummy.lookAt( editorCamera.position );
  185. q1.copy( dummy.quaternion );
  186. dummy.lookAt( targetPosition );
  187. q2.copy( dummy.quaternion );
  188. }
  189. function getAxisMaterial( color ) {
  190. return new THREE.MeshBasicMaterial( {
  191. color: color,
  192. toneMapped: false
  193. } );
  194. }
  195. function getSpriteMaterial( color, text = null ) {
  196. const canvas = document.createElement( 'canvas' );
  197. canvas.width = 64;
  198. canvas.height = 64;
  199. const context = canvas.getContext( '2d' );
  200. context.beginPath();
  201. context.arc( 32, 32, 16, 0, 2 * Math.PI );
  202. context.closePath();
  203. context.fillStyle = color.getStyle();
  204. context.fill();
  205. if ( text !== null ) {
  206. context.font = '24px Arial';
  207. context.textAlign = 'center';
  208. context.fillStyle = '#000000';
  209. context.fillText( text, 32, 41 );
  210. }
  211. const texture = new THREE.CanvasTexture( canvas );
  212. return new THREE.SpriteMaterial( {
  213. map: texture,
  214. toneMapped: false
  215. } );
  216. }
  217. }
  218. }
  219. THREE.ViewHelper = ViewHelper;
  220. } )();