CSS2DRenderer.js 3.5 KB

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