CSS2DRenderer.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. import {
  2. Matrix4,
  3. Object3D,
  4. Vector3
  5. } from '../../../build/three.module.js';
  6. var CSS2DObject = function ( element ) {
  7. Object3D.call( this );
  8. this.element = element || document.createElement( 'div' );
  9. this.element.style.position = 'absolute';
  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. CSS2DObject.prototype = Object.assign( Object.create( Object3D.prototype ), {
  19. constructor: CSS2DObject,
  20. copy: function ( source, recursive ) {
  21. Object3D.prototype.copy.call( this, source, recursive );
  22. this.element = source.element.cloneNode( true );
  23. return this;
  24. }
  25. } );
  26. //
  27. var CSS2DRenderer = function () {
  28. var _this = this;
  29. var _width, _height;
  30. var _widthHalf, _heightHalf;
  31. var vector = new Vector3();
  32. var viewMatrix = new Matrix4();
  33. var viewProjectionMatrix = new Matrix4();
  34. var cache = {
  35. objects: new WeakMap()
  36. };
  37. var domElement = document.createElement( 'div' );
  38. domElement.style.overflow = 'hidden';
  39. this.domElement = domElement;
  40. this.getSize = function () {
  41. return {
  42. width: _width,
  43. height: _height
  44. };
  45. };
  46. this.setSize = function ( width, height ) {
  47. _width = width;
  48. _height = height;
  49. _widthHalf = _width / 2;
  50. _heightHalf = _height / 2;
  51. domElement.style.width = width + 'px';
  52. domElement.style.height = height + 'px';
  53. };
  54. var renderObject = function ( object, scene, camera ) {
  55. if ( object instanceof CSS2DObject ) {
  56. object.onBeforeRender( _this, scene, camera );
  57. vector.setFromMatrixPosition( object.matrixWorld );
  58. vector.applyMatrix4( viewProjectionMatrix );
  59. var element = object.element;
  60. element.style.transform = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';
  61. element.style.display = ( object.visible && vector.z >= - 1 && vector.z <= 1 ) ? '' : 'none';
  62. var objectData = {
  63. distanceToCameraSquared: getDistanceToSquared( camera, object )
  64. };
  65. cache.objects.set( object, objectData );
  66. if ( element.parentNode !== domElement ) {
  67. domElement.appendChild( element );
  68. }
  69. object.onAfterRender( _this, scene, camera );
  70. }
  71. for ( var i = 0, l = object.children.length; i < l; i ++ ) {
  72. renderObject( object.children[ i ], scene, camera );
  73. }
  74. };
  75. var getDistanceToSquared = function () {
  76. var a = new Vector3();
  77. var b = new Vector3();
  78. return function ( object1, object2 ) {
  79. a.setFromMatrixPosition( object1.matrixWorld );
  80. b.setFromMatrixPosition( object2.matrixWorld );
  81. return a.distanceToSquared( b );
  82. };
  83. }();
  84. var filterAndFlatten = function ( scene ) {
  85. var result = [];
  86. scene.traverse( function ( object ) {
  87. if ( object instanceof CSS2DObject ) result.push( object );
  88. } );
  89. return result;
  90. };
  91. var zOrder = function ( scene ) {
  92. var sorted = filterAndFlatten( scene ).sort( function ( a, b ) {
  93. var distanceA = cache.objects.get( a ).distanceToCameraSquared;
  94. var distanceB = cache.objects.get( b ).distanceToCameraSquared;
  95. return distanceA - distanceB;
  96. } );
  97. var zMax = sorted.length;
  98. for ( var i = 0, l = sorted.length; i < l; i ++ ) {
  99. sorted[ i ].element.style.zIndex = zMax - i;
  100. }
  101. };
  102. this.render = function ( scene, camera ) {
  103. if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
  104. if ( camera.parent === null ) camera.updateMatrixWorld();
  105. viewMatrix.copy( camera.matrixWorldInverse );
  106. viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, viewMatrix );
  107. renderObject( scene, scene, camera );
  108. zOrder( scene );
  109. };
  110. };
  111. export { CSS2DObject, CSS2DRenderer };