CSS2DRenderer.js 2.2 KB

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