CSS2DRenderer.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. ( function () {
  2. class CSS2DObject extends THREE.Object3D {
  3. constructor( element = document.createElement( 'div' ) ) {
  4. super();
  5. this.isCSS2DObject = true;
  6. this.element = element;
  7. this.element.style.position = 'absolute';
  8. this.element.style.userSelect = 'none';
  9. this.element.setAttribute( 'draggable', false );
  10. this.addEventListener( 'removed', function () {
  11. this.traverse( function ( object ) {
  12. if ( object.element instanceof Element && object.element.parentNode !== null ) {
  13. object.element.parentNode.removeChild( object.element );
  14. }
  15. } );
  16. } );
  17. }
  18. copy( source, recursive ) {
  19. super.copy( source, recursive );
  20. this.element = source.element.cloneNode( true );
  21. return this;
  22. }
  23. }
  24. //
  25. const _vector = new THREE.Vector3();
  26. const _viewMatrix = new THREE.Matrix4();
  27. const _viewProjectionMatrix = new THREE.Matrix4();
  28. const _a = new THREE.Vector3();
  29. const _b = new THREE.Vector3();
  30. class CSS2DRenderer {
  31. constructor( parameters = {} ) {
  32. const _this = this;
  33. let _width, _height;
  34. let _widthHalf, _heightHalf;
  35. const cache = {
  36. objects: new WeakMap()
  37. };
  38. const domElement = parameters.element !== undefined ? parameters.element : document.createElement( 'div' );
  39. domElement.style.overflow = 'hidden';
  40. this.domElement = domElement;
  41. this.getSize = function () {
  42. return {
  43. width: _width,
  44. height: _height
  45. };
  46. };
  47. this.render = function ( scene, camera ) {
  48. if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
  49. if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
  50. _viewMatrix.copy( camera.matrixWorldInverse );
  51. _viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
  52. renderObject( scene, scene, camera );
  53. zOrder( scene );
  54. };
  55. this.setSize = function ( width, height ) {
  56. _width = width;
  57. _height = height;
  58. _widthHalf = _width / 2;
  59. _heightHalf = _height / 2;
  60. domElement.style.width = width + 'px';
  61. domElement.style.height = height + 'px';
  62. };
  63. function renderObject( object, scene, camera ) {
  64. if ( object.isCSS2DObject ) {
  65. _vector.setFromMatrixPosition( object.matrixWorld );
  66. _vector.applyMatrix4( _viewProjectionMatrix );
  67. const visible = object.visible === true && _vector.z >= - 1 && _vector.z <= 1 && object.layers.test( camera.layers ) === true;
  68. object.element.style.display = visible === true ? '' : 'none';
  69. if ( visible === true ) {
  70. object.onBeforeRender( _this, scene, camera );
  71. const element = object.element;
  72. element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
  73. if ( element.parentNode !== domElement ) {
  74. domElement.appendChild( element );
  75. }
  76. object.onAfterRender( _this, scene, camera );
  77. }
  78. const objectData = {
  79. distanceToCameraSquared: getDistanceToSquared( camera, object )
  80. };
  81. cache.objects.set( object, objectData );
  82. }
  83. for ( let i = 0, l = object.children.length; i < l; i ++ ) {
  84. renderObject( object.children[ i ], scene, camera );
  85. }
  86. }
  87. function getDistanceToSquared( object1, object2 ) {
  88. _a.setFromMatrixPosition( object1.matrixWorld );
  89. _b.setFromMatrixPosition( object2.matrixWorld );
  90. return _a.distanceToSquared( _b );
  91. }
  92. function filterAndFlatten( scene ) {
  93. const result = [];
  94. scene.traverse( function ( object ) {
  95. if ( object.isCSS2DObject ) result.push( object );
  96. } );
  97. return result;
  98. }
  99. function zOrder( scene ) {
  100. const sorted = filterAndFlatten( scene ).sort( function ( a, b ) {
  101. if ( a.renderOrder !== b.renderOrder ) {
  102. return b.renderOrder - a.renderOrder;
  103. }
  104. const distanceA = cache.objects.get( a ).distanceToCameraSquared;
  105. const distanceB = cache.objects.get( b ).distanceToCameraSquared;
  106. return distanceA - distanceB;
  107. } );
  108. const zMax = sorted.length;
  109. for ( let i = 0, l = sorted.length; i < l; i ++ ) {
  110. sorted[ i ].element.style.zIndex = zMax - i;
  111. }
  112. }
  113. }
  114. }
  115. THREE.CSS2DObject = CSS2DObject;
  116. THREE.CSS2DRenderer = CSS2DRenderer;
  117. } )();