CSS3DRenderer.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. /**
  2. * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
  3. * @author mrdoob / http://mrdoob.com/
  4. */
  5. THREE.CSS3DObject = function ( element ) {
  6. THREE.Object3D.call( this );
  7. this.element = element;
  8. this.element.style.position = 'absolute';
  9. this.addEventListener( 'removed', function ( event ) {
  10. if ( this.element.parentNode !== null ) {
  11. this.element.parentNode.removeChild( this.element );
  12. }
  13. } );
  14. };
  15. THREE.CSS3DObject.prototype = Object.create( THREE.Object3D.prototype );
  16. THREE.CSS3DObject.prototype.constructor = THREE.CSS3DObject;
  17. THREE.CSS3DSprite = function ( element ) {
  18. THREE.CSS3DObject.call( this, element );
  19. };
  20. THREE.CSS3DSprite.prototype = Object.create( THREE.CSS3DObject.prototype );
  21. THREE.CSS3DSprite.prototype.constructor = THREE.CSS3DSprite;
  22. //
  23. THREE.CSS3DRenderer = function () {
  24. console.log( 'THREE.CSS3DRenderer', THREE.REVISION );
  25. var _width, _height;
  26. var matrix = new THREE.Matrix4();
  27. var cache = {
  28. camera: { fov: 0, style: '' },
  29. objects: {}
  30. };
  31. var domElement = document.createElement( 'div' );
  32. domElement.style.overflow = 'hidden';
  33. domElement.style.WebkitTransformStyle = 'preserve-3d';
  34. domElement.style.MozTransformStyle = 'preserve-3d';
  35. domElement.style.oTransformStyle = 'preserve-3d';
  36. domElement.style.transformStyle = 'preserve-3d';
  37. this.domElement = domElement;
  38. var cameraElement = document.createElement( 'div' );
  39. cameraElement.style.position = 'absolute';
  40. cameraElement.style.left = '50%';
  41. cameraElement.style.top = '50%';
  42. cameraElement.style.WebkitTransformStyle = 'preserve-3d';
  43. cameraElement.style.MozTransformStyle = 'preserve-3d';
  44. cameraElement.style.oTransformStyle = 'preserve-3d';
  45. cameraElement.style.transformStyle = 'preserve-3d';
  46. cameraElement.style.WebkitTransformOrigin = '0 0';
  47. cameraElement.style.MozTransformOrigin = '0 0';
  48. cameraElement.style.oTransformOrigin = '0 0';
  49. cameraElement.style.transformOrigin = '0 0';
  50. domElement.appendChild( cameraElement );
  51. this.setClearColor = function () {};
  52. this.getSize = function() {
  53. return {
  54. width: _width,
  55. height: _height
  56. };
  57. };
  58. this.setSize = function ( width, height ) {
  59. _width = width;
  60. _height = height;
  61. domElement.style.width = width + 'px';
  62. domElement.style.height = height + 'px';
  63. };
  64. var epsilon = function ( value ) {
  65. return Math.abs( value ) < Number.EPSILON ? 0 : value;
  66. };
  67. var getCameraCSSMatrix = function ( matrix ) {
  68. var elements = matrix.elements;
  69. return 'matrix3d(' +
  70. epsilon( elements[ 0 ] ) + ',' +
  71. epsilon( - elements[ 1 ] ) + ',' +
  72. epsilon( elements[ 2 ] ) + ',' +
  73. epsilon( elements[ 3 ] ) + ',' +
  74. epsilon( elements[ 4 ] ) + ',' +
  75. epsilon( - elements[ 5 ] ) + ',' +
  76. epsilon( elements[ 6 ] ) + ',' +
  77. epsilon( elements[ 7 ] ) + ',' +
  78. epsilon( elements[ 8 ] ) + ',' +
  79. epsilon( - elements[ 9 ] ) + ',' +
  80. epsilon( elements[ 10 ] ) + ',' +
  81. epsilon( elements[ 11 ] ) + ',' +
  82. epsilon( elements[ 12 ] ) + ',' +
  83. epsilon( - elements[ 13 ] ) + ',' +
  84. epsilon( elements[ 14 ] ) + ',' +
  85. epsilon( elements[ 15 ] ) +
  86. ')';
  87. };
  88. var getObjectCSSMatrix = function ( matrix ) {
  89. var elements = matrix.elements;
  90. return 'translate3d(-50%,-50%,0) matrix3d(' +
  91. epsilon( elements[ 0 ] ) + ',' +
  92. epsilon( elements[ 1 ] ) + ',' +
  93. epsilon( elements[ 2 ] ) + ',' +
  94. epsilon( elements[ 3 ] ) + ',' +
  95. epsilon( - elements[ 4 ] ) + ',' +
  96. epsilon( - elements[ 5 ] ) + ',' +
  97. epsilon( - elements[ 6 ] ) + ',' +
  98. epsilon( - elements[ 7 ] ) + ',' +
  99. epsilon( elements[ 8 ] ) + ',' +
  100. epsilon( elements[ 9 ] ) + ',' +
  101. epsilon( elements[ 10 ] ) + ',' +
  102. epsilon( elements[ 11 ] ) + ',' +
  103. epsilon( elements[ 12 ] ) + ',' +
  104. epsilon( elements[ 13 ] ) + ',' +
  105. epsilon( elements[ 14 ] ) + ',' +
  106. epsilon( elements[ 15 ] ) +
  107. ')';
  108. };
  109. var renderObject = function ( object, camera ) {
  110. if ( object instanceof THREE.CSS3DObject ) {
  111. var style;
  112. if ( object instanceof THREE.CSS3DSprite ) {
  113. // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
  114. matrix.copy( camera.matrixWorldInverse );
  115. matrix.transpose();
  116. matrix.copyPosition( object.matrixWorld );
  117. matrix.scale( object.scale );
  118. matrix.elements[ 3 ] = 0;
  119. matrix.elements[ 7 ] = 0;
  120. matrix.elements[ 11 ] = 0;
  121. matrix.elements[ 15 ] = 1;
  122. style = getObjectCSSMatrix( matrix );
  123. } else {
  124. style = getObjectCSSMatrix( object.matrixWorld );
  125. }
  126. var element = object.element;
  127. var cachedStyle = cache.objects[ object.id ];
  128. if ( cachedStyle === undefined || cachedStyle !== style ) {
  129. element.style.WebkitTransform = style;
  130. element.style.MozTransform = style;
  131. element.style.oTransform = style;
  132. element.style.transform = style;
  133. cache.objects[ object.id ] = style;
  134. }
  135. if ( element.parentNode !== cameraElement ) {
  136. cameraElement.appendChild( element );
  137. }
  138. }
  139. for ( var i = 0, l = object.children.length; i < l; i ++ ) {
  140. renderObject( object.children[ i ], camera );
  141. }
  142. };
  143. this.render = function ( scene, camera ) {
  144. var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.getEffectiveFOV() * 0.5 ) ) * _height;
  145. if ( cache.camera.fov !== fov ) {
  146. domElement.style.WebkitPerspective = fov + "px";
  147. domElement.style.MozPerspective = fov + "px";
  148. domElement.style.oPerspective = fov + "px";
  149. domElement.style.perspective = fov + "px";
  150. cache.camera.fov = fov;
  151. }
  152. scene.updateMatrixWorld();
  153. if ( camera.parent === null ) camera.updateMatrixWorld();
  154. camera.matrixWorldInverse.getInverse( camera.matrixWorld );
  155. var style = 'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
  156. if ( cache.camera.style !== style ) {
  157. cameraElement.style.WebkitTransform = style;
  158. cameraElement.style.MozTransform = style;
  159. cameraElement.style.oTransform = style;
  160. cameraElement.style.transform = style;
  161. cache.camera.style = style;
  162. }
  163. renderObject( scene, camera );
  164. };
  165. };