CSS2DRenderer.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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 ( event ) {
  9. if ( this.element.parentNode !== null ) {
  10. this.element.parentNode.removeChild( this.element );
  11. for ( var i = 0, l = this.children.length; i < l; i ++ ) {
  12. this.children[ i ].dispatchEvent( event );
  13. }
  14. }
  15. } );
  16. };
  17. THREE.CSS2DObject.prototype = Object.create( THREE.Object3D.prototype );
  18. //
  19. THREE.CSS2DRenderer = function () {
  20. console.log( 'THREE.CSS3DRenderer', THREE.REVISION );
  21. var _width, _height;
  22. var _widthHalf, _heightHalf;
  23. var vector4 = new THREE.Vector4();
  24. var viewMatrix = new THREE.Matrix4();
  25. var viewProjectionMatrix = new THREE.Matrix4();
  26. var domElement = document.createElement( 'div' );
  27. domElement.style.overflow = 'hidden';
  28. this.domElement = domElement;
  29. this.setSize = function ( width, height ) {
  30. _width = width;
  31. _height = height;
  32. _widthHalf = _width / 2;
  33. _heightHalf = _height / 2;
  34. domElement.style.width = width + 'px';
  35. domElement.style.height = height + 'px';
  36. };
  37. var renderObject = function ( object, camera ) {
  38. if ( object instanceof THREE.CSS2DObject ) {
  39. var element = object.element;
  40. var matrix = object.matrixWorld;
  41. vector4.set( matrix.elements[ 12 ], matrix.elements[ 13 ], matrix.elements[ 14 ], 1 );
  42. vector4.applyMatrix4( viewProjectionMatrix );
  43. vector4.x = ( vector4.x / vector4.w ) * _widthHalf + _widthHalf;
  44. vector4.y = - ( vector4.y / vector4.w ) * _heightHalf + _heightHalf;
  45. var style = 'translate(-50%,-50%) translate(' + vector4.x + 'px,' + vector4.y + 'px)';
  46. element.style.WebkitTransform = style;
  47. element.style.MozTransform = style;
  48. element.style.oTransform = style;
  49. element.style.transform = style;
  50. if ( element.parentNode !== domElement ) {
  51. domElement.appendChild( element );
  52. }
  53. }
  54. for ( var i = 0, l = object.children.length; i < l; i ++ ) {
  55. renderObject( object.children[ i ], camera );
  56. }
  57. };
  58. this.render = function ( scene, camera ) {
  59. scene.updateMatrixWorld();
  60. if ( camera.parent === undefined ) camera.updateMatrixWorld();
  61. camera.matrixWorldInverse.getInverse( camera.matrixWorld );
  62. viewMatrix.copy( camera.matrixWorldInverse.getInverse( camera.matrixWorld ) );
  63. viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, viewMatrix );
  64. renderObject( scene, camera );
  65. };
  66. };