CSS2DRenderer.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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. var style = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';
  61. element.style.WebkitTransform = style;
  62. element.style.MozTransform = style;
  63. element.style.oTransform = style;
  64. element.style.transform = style;
  65. element.style.display = ( object.visible && vector.z >= - 1 && vector.z <= 1 ) ? '' : 'none';
  66. var objectData = {
  67. distanceToCameraSquared: getDistanceToSquared( camera, object )
  68. };
  69. cache.objects.set( object, objectData );
  70. if ( element.parentNode !== domElement ) {
  71. domElement.appendChild( element );
  72. }
  73. object.onAfterRender( _this, scene, camera );
  74. }
  75. for ( var i = 0, l = object.children.length; i < l; i ++ ) {
  76. renderObject( object.children[ i ], scene, camera );
  77. }
  78. };
  79. var getDistanceToSquared = function () {
  80. var a = new Vector3();
  81. var b = new Vector3();
  82. return function ( object1, object2 ) {
  83. a.setFromMatrixPosition( object1.matrixWorld );
  84. b.setFromMatrixPosition( object2.matrixWorld );
  85. return a.distanceToSquared( b );
  86. };
  87. }();
  88. var filterAndFlatten = function ( scene ) {
  89. var result = [];
  90. scene.traverse( function ( object ) {
  91. if ( object instanceof CSS2DObject ) result.push( object );
  92. } );
  93. return result;
  94. };
  95. var zOrder = function ( scene ) {
  96. var sorted = filterAndFlatten( scene ).sort( function ( a, b ) {
  97. var distanceA = cache.objects.get( a ).distanceToCameraSquared;
  98. var distanceB = cache.objects.get( b ).distanceToCameraSquared;
  99. return distanceA - distanceB;
  100. } );
  101. var zMax = sorted.length;
  102. for ( var i = 0, l = sorted.length; i < l; i ++ ) {
  103. sorted[ i ].element.style.zIndex = zMax - i;
  104. }
  105. };
  106. this.render = function ( scene, camera ) {
  107. if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
  108. if ( camera.parent === null ) camera.updateMatrixWorld();
  109. viewMatrix.copy( camera.matrixWorldInverse );
  110. viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, viewMatrix );
  111. renderObject( scene, scene, camera );
  112. zOrder( scene );
  113. };
  114. };
  115. export { CSS2DObject, CSS2DRenderer };