DOMRenderer.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /**
  2. * @author mr.doob / http://mrdoob.com/
  3. */
  4. THREE.DOMRenderer = function () {
  5. console.log( 'THREE.DOMRenderer', THREE.REVISION );
  6. var _renderData, _elements,
  7. _width, _height, _widthHalf, _heightHalf, _transformProp,
  8. _projector = new THREE.Projector();
  9. var getSupportedProp = function ( proparray ) {
  10. var root = document.documentElement
  11. for ( var i = 0; i < proparray.length; i ++ ) {
  12. if ( typeof root.style[ proparray[ i ] ] === "string" ) {
  13. return proparray[i];
  14. }
  15. }
  16. return null;
  17. };
  18. _transformProp = getSupportedProp( [ 'transform', 'MozTransform', 'WebkitTransform', 'msTransform', 'OTransform' ] );
  19. this.domElement = document.createElement( 'div' );
  20. this.setSize = function ( width, height ) {
  21. _width = width;
  22. _height = height;
  23. _widthHalf = _width / 2;
  24. _heightHalf = _height / 2;
  25. };
  26. this.render = function ( scene, camera ) {
  27. var e, el, m, ml, element, material, dom, v1x, v1y;
  28. _renderData = _projector.projectScene( scene, camera );
  29. _elements = _renderData.elements;
  30. for ( e = 0, el = _elements.length; e < el; e ++ ) {
  31. element = _elements[ e ];
  32. if ( element instanceof THREE.RenderableParticle && element.material instanceof THREE.ParticleDOMMaterial ) {
  33. dom = element.material.domElement;
  34. v1x = element.x * _widthHalf + _widthHalf - ( dom.offsetWidth >> 1 );
  35. v1y = element.y * _heightHalf + _heightHalf - ( dom.offsetHeight >> 1 );
  36. dom.style.left = v1x + 'px';
  37. dom.style.top = v1y + 'px';
  38. dom.style.zIndex = Math.abs( Math.floor( ( 1 - element.z ) * camera.far / camera.near ) )
  39. if ( _transformProp ) {
  40. var scaleX = element.scale.x * _widthHalf;
  41. var scaleY = element.scale.y * _heightHalf;
  42. var scaleVal = "scale(" + scaleX + "," + scaleY + ")";
  43. dom.style[ _transformProp ] = scaleVal;
  44. }
  45. }
  46. }
  47. };
  48. };