CubeTextureElement.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. var __extends = (this && this.__extends) || function (d, b) {
  2. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3. function __() { this.constructor = d; }
  4. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  5. };
  6. var INSPECTOR;
  7. (function (INSPECTOR) {
  8. /**
  9. * Display a very small div. A new canvas is created, with a new Babylon.js scene, containing only the
  10. * cube texture in a cube
  11. */
  12. var CubeTextureElement = (function (_super) {
  13. __extends(CubeTextureElement, _super);
  14. /** The texture given as a parameter should be cube. */
  15. function CubeTextureElement(tex) {
  16. _super.call(this);
  17. // On pause the engine will not render anything
  18. this._pause = false;
  19. this._div.className = 'fa fa-search texture-element';
  20. // Create the texture viewer
  21. this._textureDiv = INSPECTOR.Helpers.CreateDiv('texture-viewer', this._div);
  22. // canvas
  23. this._canvas = INSPECTOR.Helpers.CreateElement('canvas', 'texture-viewer-img', this._textureDiv);
  24. if (tex) {
  25. this._textureUrl = tex.name;
  26. }
  27. this._div.addEventListener('mouseover', this._showViewer.bind(this, 'flex'));
  28. this._div.addEventListener('mouseout', this._showViewer.bind(this, 'none'));
  29. }
  30. CubeTextureElement.prototype.update = function (tex) {
  31. if (tex && tex.url === this._textureUrl) {
  32. }
  33. else {
  34. if (tex) {
  35. this._textureUrl = tex.name;
  36. }
  37. if (this._engine) {
  38. // Dispose old material and cube
  39. this._cube.material.dispose(true, true);
  40. this._cube.dispose();
  41. }
  42. else {
  43. this._initEngine();
  44. }
  45. // and create it again
  46. this._populateScene();
  47. }
  48. };
  49. /** Creates the box */
  50. CubeTextureElement.prototype._populateScene = function () {
  51. var _this = this;
  52. // Create the hdr texture
  53. var hdrTexture = new BABYLON.CubeTexture(this._textureUrl, this._scene);
  54. hdrTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
  55. this._cube = BABYLON.Mesh.CreateBox("hdrSkyBox", 10.0, this._scene);
  56. var hdrSkyboxMaterial = new BABYLON.StandardMaterial("skyBox", this._scene);
  57. hdrSkyboxMaterial.backFaceCulling = false;
  58. hdrSkyboxMaterial.reflectionTexture = hdrTexture;
  59. hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
  60. hdrSkyboxMaterial.disableLighting = true;
  61. this._cube.material = hdrSkyboxMaterial;
  62. this._cube.registerBeforeRender(function () {
  63. _this._cube.rotation.y += 0.01;
  64. });
  65. };
  66. /** Init the babylon engine */
  67. CubeTextureElement.prototype._initEngine = function () {
  68. var _this = this;
  69. this._engine = new BABYLON.Engine(this._canvas);
  70. this._scene = new BABYLON.Scene(this._engine);
  71. this._scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
  72. var cam = new BABYLON.FreeCamera('cam', new BABYLON.Vector3(0, 0, -20), this._scene);
  73. var light = new BABYLON.HemisphericLight('', new BABYLON.Vector3(0, 1, 0), this._scene);
  74. this._engine.runRenderLoop(function () {
  75. if (!_this._pause) {
  76. _this._scene.render();
  77. }
  78. });
  79. this._canvas.setAttribute('width', '110');
  80. this._canvas.setAttribute('height', '110');
  81. };
  82. CubeTextureElement.prototype._showViewer = function (mode) {
  83. // If displaying...
  84. if (mode != 'none') {
  85. // ... and the canvas is not initialized
  86. if (!this._engine) {
  87. this._initEngine();
  88. this._populateScene();
  89. }
  90. // In every cases, unpause the engine
  91. this._pause = false;
  92. }
  93. else {
  94. // hide : pause the engine
  95. this._pause = true;
  96. }
  97. this._textureDiv.style.display = mode;
  98. };
  99. /** Removes properly the babylon engine */
  100. CubeTextureElement.prototype.dispose = function () {
  101. if (this._engine) {
  102. this._engine.dispose();
  103. this._engine = null;
  104. }
  105. };
  106. return CubeTextureElement;
  107. }(INSPECTOR.BasicElement));
  108. INSPECTOR.CubeTextureElement = CubeTextureElement;
  109. })(INSPECTOR || (INSPECTOR = {}));
  110. //# sourceMappingURL=CubeTextureElement.js.map